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 '<div>'+day+'</div><div style="font-size: .8em;color: red">威武</div>'
|
}
|
return day;
|
},
|
onSelect:function(date){
|
alert(date);
|
}
|
});
|
$('#btn_popup_calendar').tap(function(){
|
J.popup({
|
html : '<div id="popup_calendar"></div>',
|
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 : '最后一次拉的人：<span style="color:#e222a5">骚年</span>',
|
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 += '<li style="color:#E74C3C">我是被拉出来的...</li>'
|
}
|
$('#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: '<div style="height: 100px;line-height: 100px;font-size: 20px;font-weight: 600;text-align: center;">这里展示更多功能</div>',
|
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: '<div style="height: 100px;text-align: center;font-size: 20px;font-weight: 600;margin-top: 10px;color:#E74C3C ">随意设计你的弹出框吧</div>',
|
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('<ul class="list"><li style="color:#000;">Hello Jingle</li><li style="color:#000;">你好，Jingle</li></ul>',{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();
|
})
|
