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();
})