document.addEventListener('deviceready', onDeviceReady, false); function onDeviceReady(){ navigator.splashscreen.hide(); //注册后退按钮 document.addEventListener("backbutton", function (e) { if(J.hasMenuOpen){ J.Menu.hide(); }else if(J.hasPopupOpen){ J.closePopup(); }else{ var sectionId = $('section.active').attr('id'); if(sectionId == 'index_section'){ J.confirm('提示','是否退出程序?',function(){ navigator.app.exitApp(); }); }else{ window.history.go(-1); } } }, false); } var App = (function(){ var pages = {}; var run = function(){ $.each(pages,function(k,v){ var sectionId = '#'+k+'_section'; $('body').delegate(sectionId,'pageinit',function(){ v.init && v.init.call(v); }); $('body').delegate(sectionId,'pageshow',function(e,isBack){ //页面加载的时候都会执行 v.show && v.show.call(v); //后退时不执行 if(!isBack && v.load){ v.load.call(v); } }); }); J.Transition.add('flip','slideLeftOut','flipOut','slideRightOut','flipIn'); Jingle.launch({ showWelcome : false, showPageLoading : true, remotePage : { '#index_section': ctx, '#user_section': ctx + '/sys/user' } }); }; var page = function(id,factory){ return ((id && factory)?_addPage:_getPage).call(this,id,factory); } var _addPage = function(id,factory){ pages[id] = new factory(); }; var _getPage = function(id){ return pages[id]; } //动态计算chart canvas的高度,宽度,以适配终端界面 var calcChartOffset = function(){ return { height : $(document).height() - 44 - 30 -60, width : $(document).width() } } return { run : run, page : page, calcChartOffset : calcChartOffset } }());/* App.page('index',function(){ this.init = function(){ $('#btn_show_welcome').on('tap', J.Welcome.show); } }) App.page('calendar',function(){ this.init = function(){ new J.Calendar('#calendar_demo',{ onRenderDay : function(day,date){ if(day == 5){ return '
'+day+'
威武
' } return day; }, onSelect:function(date){ alert(date); } }); $('#btn_popup_calendar').tap(function(){ J.popup({ html : '', pos : 'center', backgroundOpacity : 0.4, showCloseBtn : false, onShow : function(){ new J.Calendar('#popup_calendar',{ date : new Date(2013,7,1), onSelect:function(date){ $('#btn_popup_calendar').text(date); J.closePopup(); } }); } }); }); } }); App.page('refresh',function(){ this.init = function(){ J.Refresh({ selector : '#down_refresh_article', type : 'pullDown', pullText : '你敢往下拉么...', releaseText : '什么时候你才愿意放手?', refreshTip : '最后一次拉的人:骚年', callback : function(){ var scroll = this; setTimeout(function () { $('#down_refresh_article ul.list li').text('嗯哈,长大后我就成了你~'); scroll.refresh(); J.showToast('更新成功','success'); }, 2000); } }); // 最简约的调用方式 J.Refresh( '#up_refresh_article','pullUp', function(){ var scroll = this; setTimeout(function () { var html = ''; for(var i=0;i<10;i++){ html += '
  • 我是被拉出来的...
  • ' } $('#up_refresh_article ul.list').append(html); scroll.refresh(); J.showToast('加载成功','success'); }, 2000); }) } }); App.page('scroll',function(){ this.init = function(){ $('#h_scroll_article').on('articleshow',function(){ J.Scroll('#h_scroll_demo',{hScroll:true,hScrollbar : false}); }) } }); App.page('menu',function(){ this.init = function(){ $.get('html/custom_aside.html',function(aside){ $('#aside_container').append(aside); }) } }); App.page('layout',function(){ this.init = function(){ $('#layout_header_ctrl').on('change',function(event,el){ J.alert('提示','你点了'+$(el).text()); }) $('#layout-btn-getmore').tap(function(){ J.popup({ html: '
    这里展示更多功能
    ', pos : 'bottom-second', showCloseBtn : false }); }) } }); App.page('popup',function(){ this.init = function(){ $('#btn_alert').tap(function(){ J.alert('提示','这是一个Alert'); }) $('#btn_confirm').tap(function(){ J.confirm('提示','这是一个Confirm!',function(){J.showToast('你选择了“确定”')},function(){J.showToast('你选择了“取消”')}); }) $('#btn_loading').tap(function(){ J.showMask(); }) $('#btn_center').tap(function(){ J.popup({ html: '
    随意设计你的弹出框吧
    ', pos : 'center' }) }) $('#btn_from_tpl').tap(function(){ J.popup({ tplId : 'tpl_popup_login', pos : 'center' }) }) $('#btn_t_top').tap(function(){ J.popup({ html: '这是一个来自顶部的弹出框', pos : 'top', showCloseBtn : false }) }) $('#btn_t_ts').tap(function(){ J.popup({ html: '这是一个在header之下的弹出框', pos : 'top-second', showCloseBtn : false }) }) $('#btn_t_bottom').tap(function(){ J.popup({ html: '这是一个来自底部弹出框', pos : 'bottom', showCloseBtn : false }) }) $('#btn_t_bs').tap(function(){ J.popup({ html: '这是一个在footer之上的弹出框', pos : 'bottom-second', showCloseBtn : false }) }) $('#btn_popover').tap(function(){ J.popover('',{top:'50px',left:'10%',right:'10%'},'top'); }); $('#btn_actionsheet').tap(function(){ J.Popup.actionsheet([{ text : '告诉QQ好友', handler : function(){ J.showToast('告诉QQ好友!'); } },{ text : '告诉MSN好友', handler : function(){ J.showToast('告诉MSN好友!'); } } ]); }); } }); App.page('slider',function(){ this.init = function(){ var slider; $('#slider_section article').on('articleshow',function(){ slider = new J.Slider({ selector : '#slider_test', onBeforeSlide : function(){ return true; }, onAfterSlide : function(i){ //alert(i); } }); }); $('#slider_prev').tap(function(){slider.prev()}); $('#slider_next').tap(function(){slider.next()}); } }); App.page('toast',function(){ this.init = function(){ $('#btn_t_default').tap(function(){ J.showToast('这是默认的Toast,默认3s后小时'); }) $('#btn_t_success').tap(function(){ J.showToast('恭喜,success,5s后消失','success',5000); }) $('#btn_t_error').tap(function(){ J.showToast('抱歉,error','error'); }) $('#btn_t_info').tap(function(){ J.showToast('提示,info','info'); }) $('#btn_t_top').tap(function(){ J.showToast('更新了50条数据','toast top'); }) } }); App.page('chart_line',function(){ var line,$chart; this.init = function(){ //重新设置canvas大小 $chart = $('#line_canvas'); var wh = App.calcChartOffset(); $chart.attr('width',wh.width).attr('height',wh.height-30); renderLine(); $('#changeLineType').on('change',function(e,el){ updateChart(el.data('type')); }) } function renderLine(){ var data = { labels : ["一月","二月","三月","四月","五月","六月","七月",'八月','九月','十月','十一月','十二月'], datasets : [ { name : 'A产品', color : "#72caed", pointColor : "#95A5A6", pointBorderColor : "#fff", data : [65,59,90,81,56,55,40,20,13,20,11,60] }, { name : 'B产品', color : "#a6d854", pointColor : "#95A5A6", pointBorderColor : "#fff", data : [28,48,40,19,96,27,100,40,40,70,11,89] } ] } line = new JChart.Line(data,{ id : 'line_canvas', smooth : false, fill : false }); line.on('tap.point',function(d,i,j){ J.alert(data.labels[i],d); }); line.draw(); } function updateChart(type){ if(type == 'smooth'){ line.refresh({ smooth : true, fill : false }); }else if(type == 'area'){ line.refresh({ smooth : true, fill : true }); }else{ line.refresh({ smooth : false, fill : false }); } } }); App.page('chart_bar',function(){ var $chart; this.init = function(){ //重新设置canvas大小 $chart = $('#bar_canvas'); var wh = App.calcChartOffset(); $chart.attr('width',wh.width).attr('height',wh.height); var data = { labels : ["一月","二月","三月","四月","五月","六月","七月",'八月','九月','十月','十一月','十二月'], datasets : [ { name : 'A产品', color : "#72caed", pointColor : "#95A5A6", pointBorderColor : "#fff", data : [65,59,90,81,56,55,40,20,13,20,11,60] }, { name : 'B产品', color : "#a6d854", pointColor : "#95A5A6", pointBorderColor : "#fff", data : [28,48,40,19,96,27,100,40,40,70,11,89] } ] } var bar = new JChart.Bar(data,{ id : 'bar_canvas' }); bar.on('tap.bar',function(d,i,j){ J.alert(data.labels[i],d); }); bar.on('longTap.bar',function(d,i,j){ J.alert('提示',d+' = 按住750ms会出现此提示'); }); bar.draw(); } }); App.page('chart_pie',function(){ var pie,$chart; this.init = function(){ //重新设置canvas大小 $chart = $('#pie_canvas'); var wh = App.calcChartOffset(); $chart.attr('width',wh.width).attr('height',wh.height-100); renderPie(); $('#changePieType').on('change',function(e,el){ updateChart(el.data('type')); }) } function renderPie(){ var pie_data = [ { name : '直接访问', value: 335, color:"#F38630" },{ name : '联盟广告', value : 234, color : "#E0E4CC" },{ name : '视频广告', value : 135, color : "#72caed" },{ name : '搜索引擎', value : 1400, color : "#a6d854" } ]; pie = new JChart.Pie(pie_data,{ id : 'pie_canvas', clickType : 'rotate' }); pie.on('rotate',function(d,i,j){ $('#pie_segment_info').html(d.name + ' '+ d.value).show(); }); pie.draw(); } function updateChart(type){ $('#pie_segment_info').hide(); if(type == 'pie'){ pie.refresh({ isDount : false }); }else if(type == 'dount'){ pie.refresh({ isDount : true, dountText : '访问来源' }); } } }); App.page('chart_drag',function(){ var $lineChart,$barChart; this.init = function(){ //重新设置canvas大小 $lineChart = $('#chart_drag_line_canvas'); $barChart = $('#chart_drag_bar_canvas'); var wh = App.calcChartOffset(); $lineChart.attr('width',wh.width).attr('height',wh.height-30); $barChart.attr('width',wh.width).attr('height',wh.height-30); var data = { labels : ["2012","二月","三月","四月","五月","六月","七月",'八月','九月','十月','十一月','十二月','2013',"二月","三月","四月","五月","六月","七月",'八月','九月','十月','十一月','十二月','2014','一月','二月'], datasets : [ { name : 'A产品', color : "#72caed", pointColor : "#95A5A6", pointBorderColor : "#fff", data : [65,59,90,81,56,55,40,20,13,20,11,60,65,59,90,81,56,55,40,20,11,20,10,60,11,60,65] }, { name : 'B产品', color : "#a6d854", pointColor : "#95A5A6", pointBorderColor : "#fff", data : [28,48,40,19,96,27,100,40,40,70,11,89,28,48,40,19,96,27,100,40,40,70,10,89,28,48,40] } ] } $('#changeDragChartType').on('change',function(e,el){ renderChart(el.data('type'),data); }) renderChart('line',data); } var renderChart = function(type,data){ if(type == 'line'){ $lineChart.show(); $barChart.hide(); new JChart.Line(data,{ id : 'chart_drag_line_canvas', datasetGesture : true, datasetOffsetNumber : 10 }).draw(true); }else{ $lineChart.hide(); $barChart.show(); new JChart.Bar(data,{ id : 'chart_drag_bar_canvas', datasetGesture : true, datasetOffsetNumber : 10 }).draw(true); } } }); App.page('chart_dynamic',function(){ var pause = false,$chart; var datasets = [[65,59,90,81,56,55,40,20,3,20,10,60],[28,48,40,19,96,27,100,40,40,70,10,89]]; var data = { labels : ["一月","二月","三月","四月","五月","六月","七月",'八月','九月','十月','十一月','十二月'], datasets : [ { name : 'A产品', color : "#72caed", pointColor : "#95A5A6", pointBorderColor : "#fff", data : datasets[0] }, { name : 'B产品', color : "#a6d854", pointColor : "#95A5A6", pointBorderColor : "#fff", data : datasets[1] } ] } this.init = function(){ //重新设置canvas大小 $chart = $('#dynamic_line_canvas'); var wh = App.calcChartOffset(); $chart.attr('width',wh.width).attr('height',wh.height-30); var line = new JChart.Line(data,{ id : 'dynamic_line_canvas' }); line.draw(); refreshChart(line); $('#pause_dynamic_chart').on('tap',function(){ pause = !pause; $(this).text(pause?'继续':'暂停'); }) } function refreshChart(chart){ setTimeout(function(){ if(!pause){ datasets[0].shift(); datasets[0].push(Math.floor(Math.random()*100)); datasets[1].shift(); datasets[1].push(Math.floor(Math.random()*100)); chart.load(data); } refreshChart(chart); },1000); } }); App.page('form',function(){ this.init = function(){ alert('init'); $('#checkbox_1').on('change',function(){ alert($(this).data('checkbox')); }) } })*/ $(function(){ App.run(); })