var req = function (page) {
var box = $('#data2');
$.ajax({
url: './data.php',
data: {
page: page
},
beforeSend: function () {
box.html('loading...');
p2.render({ // 点击后就将分页视图切换
current: page
});
},
single: { // 最佳实践: 使用ajax single auto模式
name: p2.cid,
rule: 'auto'
}
}).done(function (data) {
box.html('数据取到');
p2.render({
total: data.data.total
});
});
};
$(function () {
$('#box').text(Browser['is']);
});
}).on('selectDate', function (date) {
$('#output8').text('日期选择了...' + date);
});
}).show().on('submit', function (date1, date2) {
$('#output18').text(date1 + '...' + date2);
});
}).on('submit', function (date1, date2) {
$(this.get('trigger')).val(date1 + '===' + date2);
});
$(function () {
// 简单实例
new Calendar({
trigger: '#cal1'
});
// 日期禁用
new Calendar({
trigger: '#cal2',
disabled: {
date: function (date) {
return date.getDay() === 0;
},
year: function (date) {
var year = date.getFullYear();
return year < 2011 || year > 2019;
}
}
});
// 无输入框触发
new Calendar({
trigger: '#cal3',
output: '#output3'
});
// 直接显示
new Calendar({
parentNode: '#show4',
repositionOnResize: false
}).show();
// 初始化日期
new Calendar({
trigger: '#cal5',
date: '2012-12-25'
});
// 日期格式化输出
new Calendar({
trigger: '#cal6',
format: 'yyyy年MM月dd那个日'
});
// 时间选择
new Calendar({
trigger: '#cal7',
time: true
});
// 一些事件
new Calendar({
trigger: '#cal8'
}).on('selectDate', function (date) {
$('#output8').text('日期选择了...' + date);
});
// 双日历
var c9_1 = new Calendar({
trigger: '#cal9_1',
disabled: {
date: function (date) {
return +date > +c9_2.get('date');
}
}
});
var c9_2 = new Calendar({
trigger: '#cal9_2',
disabled: {
date: function (date) {
return +date < +c9_1.get('date');
}
}
});
// 国际化
new Calendar({
trigger: '#cal10',
i18n: {
week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
});
// 年选择
new Calendar({
trigger: '#cal11',
view: 'year'
});
// 月选择
new Calendar({
trigger: '#cal12',
view: 'month'
});
// 月选择双日历
var c13_1 = new Calendar({
trigger: '#cal13_1',
view: 'month',
disabled: {
month: function (date) {
return +date >= +c13_2.get('date');
}
}
});
var c13_2 = new Calendar({
trigger: '#cal13_2',
view: 'month',
disabled: {
month: function (date) {
return +date <= +c13_1.get('date');
}
}
});
// 另一种双日历：日期选择
new DoubleCalendar({
trigger: '#cal14'
}).on('submit', function (date1, date2) {
$(this.get('trigger')).val(date1 + '===' + date2);
});
// 另一种双日历：月份选择
new DoubleCalendar({
view: 'month',
trigger: '#cal15',
c1: {
date: '2009-05'
}
}).on('submit', function (date1, date2) {
$(this.get('trigger')).val(date1 + '===' + date2);
});
// 另一种双日历：年份选择
new DoubleCalendar({
view: 'year',
trigger: '#cal16',
c1: {
date: '2009'
}
}).on('submit', function (date1, date2) {
$(this.get('trigger')).val(date1 + '===' + date2);
});
// 双日历直接显示
new DoubleCalendar({
parentNode: '#show18',
hideOnSelect: false,
c1: {
date: '2009-12-08'
}
}).show().on('submit', function (date1, date2) {
$('#output18').text(date1 + '...' + date2);
});
});
$(function () {
$('#box').wheel(function(e, direction, browser) {
console.log(direction);
});
});
$(function () {
var p1 = new Pagination({
parentNode: '#p1',
action: function (node, page) {
this.render({
current: page
});
}
});
var nodes = {
total: $('#total'),
pageSize: $('#per_page'),
current: $('#current')
};
var pages = function (total, pageSize) {
var totalPage = Math.ceil(total / pageSize);
var html = [];
for (var i = 1; i <= totalPage; i++) {
html[i] = '<option value="' + i + '">' + i + '</option>';
}
nodes.current.html(html.join(''));
};
pages(nodes.total.val(), nodes.pageSize.val());
p1.render({
total: nodes.total.val(),
pageSize: nodes.pageSize.val(),
current: nodes.current.val()
});
nodes.total.change(function () {
pages(this.value, nodes.pageSize.val());
p1.render({
total: this.value,
current: nodes.current.val()
});
});
nodes.pageSize.change(function () {
pages(nodes.total.val(), this.value);
p1.render({
pageSize: this.value,
current: nodes.current.val()
});
});
nodes.current.change(function () {
p1.render({
current: this.value
});
});
// ajax例子
var req = function (page) {
var box = $('#data2');
$.ajax({
url: './data.php',
data: {
page: page
},
beforeSend: function () {
box.html('loading...');
p2.render({ // 点击后就将分页视图切换
current: page
});
},
single: { // 最佳实践: 使用ajax single auto模式
name: p2.cid,
rule: 'auto'
}
}).done(function (data) {
box.html('数据取到');
p2.render({
total: data.data.total
});
});
};
var p2 = new Pagination({
parentNode: '#p2',
action: function (node, page) {
req(page);
}
});
req(1);
// 自定义模板
var MyPagination = Pagination.extend({
view: function() {
var total = this.get('total');
var current = this.get('current');
var pageSize = this.get('pageSize');
var totalPage = Math.ceil(total / pageSize);
var html = '';
html += '<span>总共' + total + '条，' + totalPage + '页</span>，';
html += '<span>每页' + pageSize + '条</span>，';
html += '<span>当前第：' + current + '页</span>';
html += '<button data-page="' + (current - 1) + '"';
if(current <= 1) {
html += ' disabled ';
}
html += '><</button>';
html += '<button data-page="' + (current + 1) + '"';
if(current >= totalPage) {
html += ' disabled ';
}
html += '>></button>';
return html;
}
});
var p3 = new MyPagination({
parentNode: '#p3',
action: function (node, page) {
this.render({
current: page
});
}
});
p3.render({
total: 135
});
});