first commit
이 커밋은 다음에 포함됨:
@@ -0,0 +1,44 @@
|
||||
$(function(){
|
||||
// 点击复制
|
||||
$(".btn-copy").on('tap',function(){
|
||||
var flag=false
|
||||
// 创建元素用于复制
|
||||
var aux = document.createElement("input");
|
||||
// 获取复制内容
|
||||
var content = document.querySelector(".val").innerHTML;
|
||||
console.log(content)
|
||||
// 解决在移动端进行复制时产生的白屏抖动问题
|
||||
aux.setAttribute('readonly', 'readonly')
|
||||
// 设置元素内容
|
||||
aux.setAttribute("value", content);
|
||||
// 将元素插入页面进行调用
|
||||
document.body.appendChild(aux);
|
||||
// 复制内容
|
||||
aux.select();
|
||||
// 将内容复制到剪贴板
|
||||
document.execCommand("copy");
|
||||
// 删除创建元素
|
||||
document.body.removeChild(aux);
|
||||
flag=true
|
||||
if(flag){
|
||||
mui.alert('复制成功', '提示', '确定', '', 'div')
|
||||
}else{
|
||||
mui.alert('复制失败，请重试', '提示', '确定', '', 'div')
|
||||
}
|
||||
})
|
||||
//显示图片预览数量
|
||||
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
|
||||
console.log(event)
|
||||
//注意slideNumber是从0开始的；
|
||||
document.querySelector(".swiper-pagination-current").innerHTML = event.detail.slideNumber+1;
|
||||
})
|
||||
//点击返回至作品库首页
|
||||
$(".my-btn-back-works-home").on('tap',function(){
|
||||
location.href='./mobileWorksHome.htm'
|
||||
})
|
||||
|
||||
//点击返回至模板库首页
|
||||
$(".my-btn-back-template-home").on('tap',function(){
|
||||
location.href='./mobileTemplateHome.htm'
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,118 @@
|
||||
$(function(){
|
||||
//默认遮罩层 隐藏
|
||||
$(".mui-backdrop").addClass('none');
|
||||
// 默认选中第一个行业 全部
|
||||
$(".my-style").children().first().addClass('actives')
|
||||
$(".select").children().first().addClass('actives')
|
||||
|
||||
// tab栏切换
|
||||
$(".header-cater-left").on('click',function(){
|
||||
$(".header-cater-rigth").css("border-bottom", "none;")
|
||||
$(this).css("border-bottom", "2px solid #54708c;")
|
||||
$(".dom-arrow").css("display","block")
|
||||
})
|
||||
|
||||
$(".header-cater-rigth").on('click',function(){
|
||||
$(".header-cater-left").css("border-bottom", "none;")
|
||||
$(this).css("border-bottom", "2px solid #54708c;")
|
||||
$(".dom-arrow").css("display","none")
|
||||
})
|
||||
// 更多模板显示和隐藏
|
||||
$(".dom-arrow").on('click',function(){
|
||||
$(".mui-backdrop").toggleClass('none');//toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
|
||||
})
|
||||
// 更多模板选中添加样式
|
||||
$(".select").on("click",".text-value",function(){
|
||||
$(this).addClass('active').siblings().removeClass('active')
|
||||
$(".mui-backdrop").addClass('none');
|
||||
})
|
||||
//点击分类显示
|
||||
$(".classify").on('tap',function(){
|
||||
$(".cates-box").css("display","block")
|
||||
})
|
||||
|
||||
// 选择行业
|
||||
$(".my-style").on("click",".catres-value",function(){
|
||||
$(this).addClass('actives').siblings().removeClass('actives')
|
||||
})
|
||||
$(".select").on("click",".text-value",function(){
|
||||
$(this).addClass('actives').siblings().removeClass('actives')
|
||||
})
|
||||
// 确定之后隐藏
|
||||
$(".my-style-btn").on("click",function(){
|
||||
// 获取右侧遮盖层选中行业数据
|
||||
var elem = $(".catres-value.actives");
|
||||
var elemId = elem[0].id;
|
||||
|
||||
// 判断页面元素id是否为[全部]的id，否则根据行业id查询作品列表
|
||||
if(elemId != "clazz_ind_all"){
|
||||
var idStrs = elemId.split("clazz_ind_");
|
||||
// 根据行业id查询作品
|
||||
doWorksSearchByIndustryId(idStrs[1]);
|
||||
} else {
|
||||
// 查询全部
|
||||
doWorksSearchByIndustryId();
|
||||
}
|
||||
|
||||
$(".cates-box").css("display","none")
|
||||
})
|
||||
$(".box-showdom").on("tap",function(){
|
||||
$(".cates-box").css("display","none")
|
||||
})
|
||||
|
||||
// 模板库首页-行业选中-确定之后隐藏
|
||||
$(".my-style-btn-template-home").on("click",function(){
|
||||
// 获取右侧遮盖层选中行业数据
|
||||
var elem = $(".catres-value.actives");
|
||||
var elemId = elem[0].id;
|
||||
|
||||
// 判断页面元素id是否为[全部]的id，否则根据行业id查询作品列表
|
||||
if(elemId != "clazz_ind_all"){
|
||||
var idStrs = elemId.split("clazz_ind_");
|
||||
// 根据行业id查询作品
|
||||
doTemplateSearchByIndustryId(idStrs[1]);
|
||||
} else {
|
||||
// 查询全部
|
||||
doTemplateSearchByIndustryId();
|
||||
}
|
||||
|
||||
$(".cates-box").css("display","none")
|
||||
})
|
||||
$(".box-showdom").on("tap",function(){
|
||||
$(".cates-box").css("display","none")
|
||||
})
|
||||
|
||||
//显示出返回顶部
|
||||
$(window).scrollTop();
|
||||
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
|
||||
// 页面滚动事件
|
||||
// .son-box 改为 .commodity-box
|
||||
var boxTop = $(".commodity-box").offset().top;
|
||||
$(window).scroll(function() {
|
||||
// console.log(11);
|
||||
// console.log($(window).scrollTop());
|
||||
if ($(window).scrollTop() >= boxTop) {
|
||||
$(".top").show();
|
||||
} else {
|
||||
$(".top").hide();
|
||||
}
|
||||
});
|
||||
// 返回顶部
|
||||
$(".top").click(function() {
|
||||
clickHandler()
|
||||
})
|
||||
// 动画返回
|
||||
function clickHandler() {
|
||||
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
if (currentScroll > 0) {
|
||||
window.requestAnimationFrame(clickHandler);//专门用于请求动画的API requestAnimationFrame，顾名思义就是请求动画帧。
|
||||
window.scrollTo(0, currentScroll - (currentScroll / 6));
|
||||
}
|
||||
}
|
||||
|
||||
//搜索之后显示的
|
||||
$(".my-classify").on('tap',function(){
|
||||
$(".serch-show").show()
|
||||
$(".header-cater").hide()
|
||||
})
|
||||
})
|
||||
하나 이상의 라인이 너무 길어 파일 Diff가 표시되지 않음
@@ -0,0 +1,389 @@
|
||||
/**
|
||||
* 选择列表插件
|
||||
* varstion 2.0.0
|
||||
* by Houfeng
|
||||
* Houfeng@DCloud.io
|
||||
*/
|
||||
|
||||
(function($, window, document, undefined) {
|
||||
|
||||
var MAX_EXCEED = 30;
|
||||
var VISIBLE_RANGE = 90;
|
||||
var DEFAULT_ITEM_HEIGHT = 40;
|
||||
var BLUR_WIDTH = 10;
|
||||
|
||||
var rad2deg = $.rad2deg = function(rad) {
|
||||
return rad / (Math.PI / 180);
|
||||
};
|
||||
|
||||
var deg2rad = $.deg2rad = function(deg) {
|
||||
return deg * (Math.PI / 180);
|
||||
};
|
||||
|
||||
var platform = navigator.platform.toLowerCase();
|
||||
var userAgent = navigator.userAgent.toLowerCase();
|
||||
var isIos = (userAgent.indexOf('iphone') > -1 ||
|
||||
userAgent.indexOf('ipad') > -1 ||
|
||||
userAgent.indexOf('ipod') > -1) &&
|
||||
(platform.indexOf('iphone') > -1 ||
|
||||
platform.indexOf('ipad') > -1 ||
|
||||
platform.indexOf('ipod') > -1);
|
||||
//alert(isIos);
|
||||
|
||||
var Picker = $.Picker = function(holder, options) {
|
||||
var self = this;
|
||||
self.holder = holder;
|
||||
self.options = options || {};
|
||||
self.init();
|
||||
self.initInertiaParams();
|
||||
self.calcElementItemPostion(true);
|
||||
self.bindEvent();
|
||||
};
|
||||
|
||||
Picker.prototype.findElementItems = function() {
|
||||
var self = this;
|
||||
self.elementItems = [].slice.call(self.holder.querySelectorAll('li'));
|
||||
return self.elementItems;
|
||||
};
|
||||
|
||||
Picker.prototype.init = function() {
|
||||
var self = this;
|
||||
self.list = self.holder.querySelector('ul');
|
||||
self.findElementItems();
|
||||
self.height = self.holder.offsetHeight;
|
||||
self.r = self.height / 2 - BLUR_WIDTH;
|
||||
self.d = self.r * 2;
|
||||
self.itemHeight = self.elementItems.length > 0 ? self.elementItems[0].offsetHeight : DEFAULT_ITEM_HEIGHT;
|
||||
self.itemAngle = parseInt(self.calcAngle(self.itemHeight * 0.8));
|
||||
self.hightlightRange = self.itemAngle / 2;
|
||||
self.visibleRange = VISIBLE_RANGE;
|
||||
self.beginAngle = 0;
|
||||
self.beginExceed = self.beginAngle - MAX_EXCEED;
|
||||
self.list.angle = self.beginAngle;
|
||||
if (isIos) {
|
||||
self.list.style.webkitTransformOrigin = "center center " + self.r + "px";
|
||||
}
|
||||
};
|
||||
|
||||
Picker.prototype.calcElementItemPostion = function(andGenerateItms) {
|
||||
var self = this;
|
||||
if (andGenerateItms) {
|
||||
self.items = [];
|
||||
}
|
||||
self.elementItems.forEach(function(item) {
|
||||
var index = self.elementItems.indexOf(item);
|
||||
self.endAngle = self.itemAngle * index;
|
||||
item.angle = self.endAngle;
|
||||
item.style.webkitTransformOrigin = "center center -" + self.r + "px";
|
||||
item.style.webkitTransform = "translateZ(" + self.r + "px) rotateX(" + (-self.endAngle) + "deg)";
|
||||
if (andGenerateItms) {
|
||||
var dataItem = {};
|
||||
dataItem.text = item.innerHTML || '';
|
||||
dataItem.value = item.getAttribute('data-value') || dataItem.text;
|
||||
self.items.push(dataItem);
|
||||
}
|
||||
});
|
||||
self.endExceed = self.endAngle + MAX_EXCEED;
|
||||
self.calcElementItemVisibility(self.beginAngle);
|
||||
};
|
||||
|
||||
Picker.prototype.calcAngle = function(c) {
|
||||
var self = this;
|
||||
var a = b = parseFloat(self.r);
|
||||
//直径的整倍数部分直接乘以 180
|
||||
c = Math.abs(c); //只算角度不关心正否值
|
||||
var intDeg = parseInt(c / self.d) * 180;
|
||||
c = c % self.d;
|
||||
//余弦
|
||||
var cosC = (a * a + b * b - c * c) / (2 * a * b);
|
||||
var angleC = intDeg + rad2deg(Math.acos(cosC));
|
||||
return angleC;
|
||||
};
|
||||
|
||||
Picker.prototype.calcElementItemVisibility = function(angle) {
|
||||
var self = this;
|
||||
self.elementItems.forEach(function(item) {
|
||||
var difference = Math.abs(item.angle - angle);
|
||||
if (difference < self.hightlightRange) {
|
||||
item.classList.add('highlight');
|
||||
} else if (difference < self.visibleRange) {
|
||||
item.classList.add('visible');
|
||||
item.classList.remove('highlight');
|
||||
} else {
|
||||
item.classList.remove('highlight');
|
||||
item.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Picker.prototype.setAngle = function(angle) {
|
||||
var self = this;
|
||||
self.list.angle = angle;
|
||||
self.list.style.webkitTransform = "perspective(1000px) rotateY(0deg) rotateX(" + angle + "deg)";
|
||||
self.calcElementItemVisibility(angle);
|
||||
};
|
||||
|
||||
Picker.prototype.bindEvent = function() {
|
||||
var self = this;
|
||||
var lastAngle = 0;
|
||||
var startY = null;
|
||||
var isPicking = false;
|
||||
self.holder.addEventListener($.EVENT_START, function(event) {
|
||||
isPicking = true;
|
||||
event.preventDefault();
|
||||
self.list.style.webkitTransition = '';
|
||||
startY = (event.changedTouches ? event.changedTouches[0] : event).pageY;
|
||||
lastAngle = self.list.angle;
|
||||
self.updateInertiaParams(event, true);
|
||||
}, false);
|
||||
self.holder.addEventListener($.EVENT_END, function(event) {
|
||||
isPicking = false;
|
||||
event.preventDefault();
|
||||
self.startInertiaScroll(event);
|
||||
}, false);
|
||||
self.holder.addEventListener($.EVENT_CANCEL, function(event) {
|
||||
isPicking = false;
|
||||
event.preventDefault();
|
||||
self.startInertiaScroll(event);
|
||||
}, false);
|
||||
self.holder.addEventListener($.EVENT_MOVE, function(event) {
|
||||
if (!isPicking) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
var endY = (event.changedTouches ? event.changedTouches[0] : event).pageY;
|
||||
var dragRange = endY - startY;
|
||||
var dragAngle = self.calcAngle(dragRange);
|
||||
var newAngle = dragRange > 0 ? lastAngle - dragAngle : lastAngle + dragAngle;
|
||||
if (newAngle > self.endExceed) {
|
||||
newAngle = self.endExceed
|
||||
}
|
||||
if (newAngle < self.beginExceed) {
|
||||
newAngle = self.beginExceed
|
||||
}
|
||||
self.setAngle(newAngle);
|
||||
self.updateInertiaParams(event);
|
||||
}, false);
|
||||
//--
|
||||
self.list.addEventListener('tap', function(event) {
|
||||
elementItem = event.target;
|
||||
if (elementItem.tagName == 'LI') {
|
||||
self.setSelectedIndex(self.elementItems.indexOf(elementItem), 200);
|
||||
}
|
||||
}, false);
|
||||
};
|
||||
|
||||
Picker.prototype.initInertiaParams = function() {
|
||||
var self = this;
|
||||
self.lastMoveTime = 0;
|
||||
self.lastMoveStart = 0;
|
||||
self.stopInertiaMove = false;
|
||||
};
|
||||
|
||||
Picker.prototype.updateInertiaParams = function(event, isStart) {
|
||||
var self = this;
|
||||
var point = event.changedTouches ? event.changedTouches[0] : event;
|
||||
if (isStart) {
|
||||
self.lastMoveStart = point.pageY;
|
||||
self.lastMoveTime = event.timeStamp || Date.now();
|
||||
self.startAngle = self.list.angle;
|
||||
} else {
|
||||
var nowTime = event.timeStamp || Date.now();
|
||||
if (nowTime - self.lastMoveTime > 300) {
|
||||
self.lastMoveTime = nowTime;
|
||||
self.lastMoveStart = point.pageY;
|
||||
}
|
||||
}
|
||||
self.stopInertiaMove = true;
|
||||
};
|
||||
|
||||
Picker.prototype.startInertiaScroll = function(event) {
|
||||
var self = this;
|
||||
var point = event.changedTouches ? event.changedTouches[0] : event;
|
||||
/**
|
||||
* 缓动代码
|
||||
*/
|
||||
var nowTime = event.timeStamp || Date.now();
|
||||
var v = (point.pageY - self.lastMoveStart) / (nowTime - self.lastMoveTime); //最后一段时间手指划动速度
|
||||
var dir = v > 0 ? -1 : 1; //加速度方向
|
||||
var deceleration = dir * 0.0006 * -1;
|
||||
var duration = Math.abs(v / deceleration); // 速度消减至0所需时间
|
||||
var dist = v * duration / 2; //最终移动多少
|
||||
var startAngle = self.list.angle;
|
||||
var distAngle = self.calcAngle(dist) * dir;
|
||||
//----
|
||||
var srcDistAngle = distAngle;
|
||||
if (startAngle + distAngle < self.beginExceed) {
|
||||
distAngle = self.beginExceed - startAngle;
|
||||
duration = duration * (distAngle / srcDistAngle) * 0.6;
|
||||
}
|
||||
if (startAngle + distAngle > self.endExceed) {
|
||||
distAngle = self.endExceed - startAngle;
|
||||
duration = duration * (distAngle / srcDistAngle) * 0.6;
|
||||
}
|
||||
//----
|
||||
if (distAngle == 0) {
|
||||
self.endScroll();
|
||||
return;
|
||||
}
|
||||
self.scrollDistAngle(nowTime, startAngle, distAngle, duration);
|
||||
};
|
||||
|
||||
Picker.prototype.scrollDistAngle = function(nowTime, startAngle, distAngle, duration) {
|
||||
var self = this;
|
||||
self.stopInertiaMove = false;
|
||||
(function(nowTime, startAngle, distAngle, duration) {
|
||||
var frameInterval = 13;
|
||||
var stepCount = duration / frameInterval;
|
||||
var stepIndex = 0;
|
||||
(function inertiaMove() {
|
||||
if (self.stopInertiaMove) return;
|
||||
var newAngle = self.quartEaseOut(stepIndex, startAngle, distAngle, stepCount);
|
||||
self.setAngle(newAngle);
|
||||
stepIndex++;
|
||||
if (stepIndex > stepCount - 1 || newAngle < self.beginExceed || newAngle > self.endExceed) {
|
||||
self.endScroll();
|
||||
return;
|
||||
}
|
||||
setTimeout(inertiaMove, frameInterval);
|
||||
})();
|
||||
})(nowTime, startAngle, distAngle, duration);
|
||||
};
|
||||
|
||||
Picker.prototype.quartEaseOut = function(t, b, c, d) {
|
||||
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
|
||||
};
|
||||
|
||||
Picker.prototype.endScroll = function() {
|
||||
var self = this;
|
||||
if (self.list.angle < self.beginAngle) {
|
||||
self.list.style.webkitTransition = "150ms ease-out";
|
||||
self.setAngle(self.beginAngle);
|
||||
} else if (self.list.angle > self.endAngle) {
|
||||
self.list.style.webkitTransition = "150ms ease-out";
|
||||
self.setAngle(self.endAngle);
|
||||
} else {
|
||||
var index = parseInt((self.list.angle / self.itemAngle).toFixed(0));
|
||||
self.list.style.webkitTransition = "100ms ease-out";
|
||||
self.setAngle(self.itemAngle * index);
|
||||
}
|
||||
self.triggerChange();
|
||||
};
|
||||
|
||||
Picker.prototype.triggerChange = function(force) {
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
var index = self.getSelectedIndex();
|
||||
var item = self.items[index];
|
||||
if ($.trigger && (index != self.lastIndex || force === true)) {
|
||||
$.trigger(self.holder, 'change', {
|
||||
"index": index,
|
||||
"item": item
|
||||
});
|
||||
//console.log('change:' + index);
|
||||
}
|
||||
self.lastIndex = index;
|
||||
typeof force === 'function' && force();
|
||||
}, 0);
|
||||
};
|
||||
|
||||
Picker.prototype.correctAngle = function(angle) {
|
||||
var self = this;
|
||||
if (angle < self.beginAngle) {
|
||||
return self.beginAngle;
|
||||
} else if (angle > self.endAngle) {
|
||||
return self.endAngle;
|
||||
} else {
|
||||
return angle;
|
||||
}
|
||||
};
|
||||
|
||||
Picker.prototype.setItems = function(items) {
|
||||
var self = this;
|
||||
self.items = items || [];
|
||||
var buffer = [];
|
||||
self.items.forEach(function(item) {
|
||||
if (item !== null && item !== undefined) {
|
||||
buffer.push('<li>' + (item.text || item) + '</li>');
|
||||
}
|
||||
});
|
||||
self.list.innerHTML = buffer.join('');
|
||||
self.findElementItems();
|
||||
self.calcElementItemPostion();
|
||||
self.setAngle(self.correctAngle(self.list.angle));
|
||||
self.triggerChange(true);
|
||||
};
|
||||
|
||||
Picker.prototype.getItems = function() {
|
||||
var self = this;
|
||||
return self.items;
|
||||
};
|
||||
|
||||
Picker.prototype.getSelectedIndex = function() {
|
||||
var self = this;
|
||||
return parseInt((self.list.angle / self.itemAngle).toFixed(0));
|
||||
};
|
||||
|
||||
Picker.prototype.setSelectedIndex = function(index, duration, callback) {
|
||||
var self = this;
|
||||
self.list.style.webkitTransition = '';
|
||||
var angle = self.correctAngle(self.itemAngle * index);
|
||||
if (duration && duration > 0) {
|
||||
var distAngle = angle - self.list.angle;
|
||||
self.scrollDistAngle(Date.now(), self.list.angle, distAngle, duration);
|
||||
} else {
|
||||
self.setAngle(angle);
|
||||
}
|
||||
self.triggerChange(callback);
|
||||
};
|
||||
|
||||
Picker.prototype.getSelectedItem = function() {
|
||||
var self = this;
|
||||
return self.items[self.getSelectedIndex()];
|
||||
};
|
||||
|
||||
Picker.prototype.getSelectedValue = function() {
|
||||
var self = this;
|
||||
return (self.items[self.getSelectedIndex()] || {}).value;
|
||||
};
|
||||
|
||||
Picker.prototype.getSelectedText = function() {
|
||||
var self = this;
|
||||
return (self.items[self.getSelectedIndex()] || {}).text;
|
||||
};
|
||||
|
||||
Picker.prototype.setSelectedValue = function(value, duration, callback) {
|
||||
var self = this;
|
||||
for (var index in self.items) {
|
||||
var item = self.items[index];
|
||||
if (item.value == value) {
|
||||
self.setSelectedIndex(index, duration, callback);
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if ($.fn) {
|
||||
$.fn.picker = function(options) {
|
||||
//遍历选择的元素
|
||||
this.each(function(i, element) {
|
||||
if (element.picker) return;
|
||||
if (options) {
|
||||
element.picker = new Picker(element, options);
|
||||
} else {
|
||||
var optionsText = element.getAttribute('data-picker-options');
|
||||
var _options = optionsText ? JSON.parse(optionsText) : {};
|
||||
element.picker = new Picker(element, _options);
|
||||
}
|
||||
});
|
||||
return this[0] ? this[0].picker : null;
|
||||
};
|
||||
|
||||
//自动初始化
|
||||
$.ready(function() {
|
||||
$('.mui-picker').picker();
|
||||
});
|
||||
}
|
||||
|
||||
})(window.mui || window, window, document, undefined);
|
||||
//end
|
||||
@@ -0,0 +1,160 @@
|
||||
/**
|
||||
* 弹出选择列表插件
|
||||
* 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js
|
||||
* varstion 1.0.1
|
||||
* by Houfeng
|
||||
* Houfeng@DCloud.io
|
||||
*/
|
||||
|
||||
(function($, document) {
|
||||
|
||||
//创建 DOM
|
||||
$.dom = function(str) {
|
||||
if (typeof(str) !== 'string') {
|
||||
if ((str instanceof Array) || (str[0] && str.length)) {
|
||||
return [].slice.call(str);
|
||||
} else {
|
||||
return [str];
|
||||
}
|
||||
}
|
||||
if (!$.__create_dom_div__) {
|
||||
$.__create_dom_div__ = document.createElement('div');
|
||||
}
|
||||
$.__create_dom_div__.innerHTML = str;
|
||||
return [].slice.call($.__create_dom_div__.childNodes);
|
||||
};
|
||||
|
||||
var panelBuffer = '<div class="mui-poppicker">\
|
||||
<div class="mui-poppicker-header">\
|
||||
<button class="mui-btn mui-poppicker-btn-cancel">取消</button>\
|
||||
<button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button>\
|
||||
<div class="mui-poppicker-clear"></div>\
|
||||
</div>\
|
||||
<div class="mui-poppicker-body">\
|
||||
</div>\
|
||||
</div>';
|
||||
|
||||
var pickerBuffer = '<div class="mui-picker">\
|
||||
<div class="mui-picker-inner">\
|
||||
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
|
||||
<ul class="mui-pciker-list">\
|
||||
</ul>\
|
||||
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
|
||||
</div>\
|
||||
</div>';
|
||||
|
||||
//定义弹出选择器类
|
||||
var PopPicker = $.PopPicker = $.Class.extend({
|
||||
//构造函数
|
||||
init: function(options) {
|
||||
var self = this;
|
||||
self.options = options || {};
|
||||
self.options.buttons = self.options.buttons || ['取消', '确定'];
|
||||
self.panel = $.dom(panelBuffer)[0];
|
||||
document.body.appendChild(self.panel);
|
||||
self.ok = self.panel.querySelector('.mui-poppicker-btn-ok');
|
||||
self.cancel = self.panel.querySelector('.mui-poppicker-btn-cancel');
|
||||
self.body = self.panel.querySelector('.mui-poppicker-body');
|
||||
self.mask = $.createMask();
|
||||
self.cancel.innerText = self.options.buttons[0];
|
||||
self.ok.innerText = self.options.buttons[1];
|
||||
self.cancel.addEventListener('tap', function(event) {
|
||||
self.hide();
|
||||
}, false);
|
||||
self.ok.addEventListener('tap', function(event) {
|
||||
if (self.callback) {
|
||||
var rs = self.callback(self.getSelectedItems());
|
||||
if (rs !== false) {
|
||||
self.hide();
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
self.mask[0].addEventListener('tap', function() {
|
||||
self.hide();
|
||||
}, false);
|
||||
self._createPicker();
|
||||
//防止滚动穿透
|
||||
self.panel.addEventListener($.EVENT_START, function(event) {
|
||||
event.preventDefault();
|
||||
}, false);
|
||||
self.panel.addEventListener($.EVENT_MOVE, function(event) {
|
||||
event.preventDefault();
|
||||
}, false);
|
||||
},
|
||||
_createPicker: function() {
|
||||
var self = this;
|
||||
var layer = self.options.layer || 1;
|
||||
var width = (100 / layer) + '%';
|
||||
self.pickers = [];
|
||||
for (var i = 1; i <= layer; i++) {
|
||||
var pickerElement = $.dom(pickerBuffer)[0];
|
||||
pickerElement.style.width = width;
|
||||
self.body.appendChild(pickerElement);
|
||||
var picker = $(pickerElement).picker();
|
||||
self.pickers.push(picker);
|
||||
pickerElement.addEventListener('change', function(event) {
|
||||
var nextPickerElement = this.nextSibling;
|
||||
if (nextPickerElement && nextPickerElement.picker) {
|
||||
var eventData = event.detail || {};
|
||||
var preItem = eventData.item || {};
|
||||
nextPickerElement.picker.setItems(preItem.children);
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
},
|
||||
//填充数据
|
||||
setData: function(data) {
|
||||
var self = this;
|
||||
data = data || [];
|
||||
self.pickers[0].setItems(data);
|
||||
},
|
||||
//获取选中的项（数组）
|
||||
getSelectedItems: function() {
|
||||
var self = this;
|
||||
var items = [];
|
||||
for (var i in self.pickers) {
|
||||
if(self.pickers.hasOwnProperty(i)) { // 修复for in会访问继承属性造成items报错情况
|
||||
var picker = self.pickers[i];
|
||||
items.push(picker.getSelectedItem() || {});
|
||||
}
|
||||
}
|
||||
return items;
|
||||
},
|
||||
//显示
|
||||
show: function(callback) {
|
||||
var self = this;
|
||||
self.callback = callback;
|
||||
self.mask.show();
|
||||
document.body.classList.add($.className('poppicker-active-for-page'));
|
||||
self.panel.classList.add($.className('active'));
|
||||
//处理物理返回键
|
||||
self.__back = $.back;
|
||||
$.back = function() {
|
||||
self.hide();
|
||||
};
|
||||
},
|
||||
//隐藏
|
||||
hide: function() {
|
||||
var self = this;
|
||||
if (self.disposed) return;
|
||||
self.panel.classList.remove($.className('active'));
|
||||
self.mask.close();
|
||||
document.body.classList.remove($.className('poppicker-active-for-page'));
|
||||
//处理物理返回键
|
||||
$.back=self.__back;
|
||||
},
|
||||
dispose: function() {
|
||||
var self = this;
|
||||
self.hide();
|
||||
setTimeout(function() {
|
||||
self.panel.parentNode.removeChild(self.panel);
|
||||
for (var name in self) {
|
||||
self[name] = null;
|
||||
delete self[name];
|
||||
};
|
||||
self.disposed = true;
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
|
||||
})(mui, document);
|
||||
@@ -0,0 +1,407 @@
|
||||
(function($, window, document) {
|
||||
var STATE_BEFORECHANGEOFFSET = 'beforeChangeOffset';
|
||||
var STATE_AFTERCHANGEOFFSET = 'afterChangeOffset';
|
||||
|
||||
var EVENT_PULLSTART = 'pullstart';
|
||||
var EVENT_PULLING = 'pulling';
|
||||
var EVENT_BEFORECHANGEOFFSET = STATE_BEFORECHANGEOFFSET;
|
||||
var EVENT_AFTERCHANGEOFFSET = STATE_AFTERCHANGEOFFSET;
|
||||
var EVENT_DRAGENDAFTERCHANGEOFFSET = 'dragEndAfterChangeOffset';
|
||||
|
||||
var CLASS_TRANSITIONING = $.className('transitioning');
|
||||
var CLASS_PULL_TOP_TIPS = $.className('pull-top-tips');
|
||||
var CLASS_PULL_BOTTOM_TIPS = $.className('pull-bottom-tips');
|
||||
var CLASS_PULL_LOADING = $.className('pull-loading');
|
||||
var CLASS_SCROLL = $.className('scroll');
|
||||
|
||||
var CLASS_PULL_TOP_ARROW = $.className('pull-loading') + ' ' + $.className('icon') + ' ' + $.className('icon-pulldown');
|
||||
var CLASS_PULL_TOP_ARROW_REVERSE = CLASS_PULL_TOP_ARROW + ' ' + $.className('reverse');
|
||||
var CLASS_PULL_TOP_SPINNER = $.className('pull-loading') + ' ' + $.className('spinner');
|
||||
var CLASS_HIDDEN = $.className('hidden');
|
||||
|
||||
var SELECTOR_PULL_LOADING = '.' + CLASS_PULL_LOADING;
|
||||
$.PullToRefresh = $.Class.extend({
|
||||
init: function(element, options) {
|
||||
this.element = element;
|
||||
this.options = $.extend(true, {
|
||||
down: {
|
||||
height: 75,
|
||||
callback: false,
|
||||
},
|
||||
up: {
|
||||
auto: false,
|
||||
offset: 100, //距离底部高度(到达该高度即触发)
|
||||
show: true,
|
||||
contentinit: '上拉显示更多',
|
||||
contentdown: '上拉显示更多',
|
||||
contentrefresh: '正在加载...',
|
||||
contentnomore: '没有更多数据了',
|
||||
callback: false
|
||||
},
|
||||
preventDefaultException: {
|
||||
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
|
||||
}
|
||||
}, options);
|
||||
this.stopped = this.isNeedRefresh = this.isDragging = false;
|
||||
this.state = STATE_BEFORECHANGEOFFSET;
|
||||
this.isInScroll = this.element.classList.contains(CLASS_SCROLL);
|
||||
this.initPullUpTips();
|
||||
|
||||
this.initEvent();
|
||||
},
|
||||
_preventDefaultException: function(el, exceptions) {
|
||||
for (var i in exceptions) {
|
||||
if (exceptions[i].test(el[i])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
initEvent: function() {
|
||||
if ($.isFunction(this.options.down.callback)) {
|
||||
this.element.addEventListener($.EVENT_START, this);
|
||||
this.element.addEventListener('drag', this);
|
||||
this.element.addEventListener('dragend', this);
|
||||
}
|
||||
if (this.pullUpTips) {
|
||||
this.element.addEventListener('dragup', this);
|
||||
if (this.isInScroll) {
|
||||
this.element.addEventListener('scrollbottom', this);
|
||||
} else {
|
||||
window.addEventListener('scroll', this);
|
||||
}
|
||||
}
|
||||
},
|
||||
handleEvent: function(e) {
|
||||
switch (e.type) {
|
||||
case $.EVENT_START:
|
||||
this.isInScroll && this._canPullDown() && e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
|
||||
break;
|
||||
case 'drag':
|
||||
this._drag(e);
|
||||
break;
|
||||
case 'dragend':
|
||||
this._dragend(e);
|
||||
break;
|
||||
case 'webkitTransitionEnd':
|
||||
this._transitionEnd(e);
|
||||
break;
|
||||
case 'dragup':
|
||||
case 'scroll':
|
||||
this._dragup(e);
|
||||
break;
|
||||
case 'scrollbottom':
|
||||
if (e.target === this.element) {
|
||||
this.pullUpLoading(e);
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
initPullDownTips: function() {
|
||||
var self = this;
|
||||
if ($.isFunction(self.options.down.callback)) {
|
||||
self.pullDownTips = (function() {
|
||||
var element = document.querySelector('.' + CLASS_PULL_TOP_TIPS);
|
||||
if (element) {
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
if (!element) {
|
||||
element = document.createElement('div');
|
||||
element.classList.add(CLASS_PULL_TOP_TIPS);
|
||||
element.innerHTML = '<div class="mui-pull-top-wrapper"><span class="mui-pull-loading mui-icon mui-icon-pulldown"></span></div>';
|
||||
element.addEventListener('webkitTransitionEnd', self);
|
||||
}
|
||||
self.pullDownTipsIcon = element.querySelector(SELECTOR_PULL_LOADING);
|
||||
document.body.appendChild(element);
|
||||
return element;
|
||||
}());
|
||||
}
|
||||
},
|
||||
initPullUpTips: function() {
|
||||
var self = this;
|
||||
if ($.isFunction(self.options.up.callback)) {
|
||||
self.pullUpTips = (function() {
|
||||
var element = self.element.querySelector('.' + CLASS_PULL_BOTTOM_TIPS);
|
||||
if (!element) {
|
||||
element = document.createElement('div');
|
||||
element.classList.add(CLASS_PULL_BOTTOM_TIPS);
|
||||
if (!self.options.up.show) {
|
||||
element.classList.add(CLASS_HIDDEN);
|
||||
}
|
||||
element.innerHTML = '<div class="mui-pull-bottom-wrapper"><span class="mui-pull-loading">' + self.options.up.contentinit + '</span></div>';
|
||||
self.element.appendChild(element);
|
||||
}
|
||||
self.pullUpTipsIcon = element.querySelector(SELECTOR_PULL_LOADING);
|
||||
return element;
|
||||
}());
|
||||
}
|
||||
},
|
||||
_transitionEnd: function(e) {
|
||||
if (e.target === this.pullDownTips && this.removing) {
|
||||
this.removePullDownTips();
|
||||
}
|
||||
},
|
||||
_dragup: function(e) {
|
||||
var self = this;
|
||||
if (self.loading) {
|
||||
return;
|
||||
}
|
||||
if (e && e.detail && $.gestures.session.drag) {
|
||||
self.isDraggingUp = true;
|
||||
} else {
|
||||
if (!self.isDraggingUp) { //scroll event
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (!self.isDragging) {
|
||||
if (self._canPullUp()) {
|
||||
self.pullUpLoading(e);
|
||||
}
|
||||
}
|
||||
},
|
||||
_canPullUp: function() {
|
||||
if (this.removing) {
|
||||
return false;
|
||||
}
|
||||
if (this.isInScroll) {
|
||||
var scrollId = this.element.parentNode.getAttribute('data-scroll');
|
||||
if (scrollId) {
|
||||
var scrollApi = $.data[scrollId];
|
||||
return scrollApi.y === scrollApi.maxScrollY;
|
||||
}
|
||||
}
|
||||
return window.pageYOffset + window.innerHeight + this.options.up.offset >= document.documentElement.scrollHeight;
|
||||
},
|
||||
_canPullDown: function() {
|
||||
if (this.removing) {
|
||||
return false;
|
||||
}
|
||||
if (this.isInScroll) {
|
||||
var scrollId = this.element.parentNode.getAttribute('data-scroll');
|
||||
if (scrollId) {
|
||||
var scrollApi = $.data[scrollId];
|
||||
return scrollApi.y === 0;
|
||||
}
|
||||
}
|
||||
return document.body.scrollTop === 0;
|
||||
},
|
||||
_drag: function(e) {
|
||||
if (this.loading || this.stopped) {
|
||||
e.stopPropagation();
|
||||
e.detail.gesture.preventDefault();
|
||||
return;
|
||||
}
|
||||
var detail = e.detail;
|
||||
if (!this.isDragging) {
|
||||
if (detail.direction === 'down' && this._canPullDown()) {
|
||||
if (document.querySelector('.' + CLASS_PULL_TOP_TIPS)) {
|
||||
e.stopPropagation();
|
||||
e.detail.gesture.preventDefault();
|
||||
return;
|
||||
}
|
||||
this.isDragging = true;
|
||||
this.removing = false;
|
||||
this.startDeltaY = detail.deltaY;
|
||||
$.gestures.session.lockDirection = true; //锁定方向
|
||||
$.gestures.session.startDirection = detail.direction;
|
||||
this._pullStart(this.startDeltaY);
|
||||
}
|
||||
}
|
||||
if (this.isDragging) {
|
||||
e.stopPropagation();
|
||||
e.detail.gesture.preventDefault();
|
||||
var deltaY = detail.deltaY - this.startDeltaY;
|
||||
deltaY = Math.min(deltaY, 1.5 * this.options.down.height);
|
||||
this.deltaY = deltaY;
|
||||
this._pulling(deltaY);
|
||||
var state = deltaY > this.options.down.height ? STATE_AFTERCHANGEOFFSET : STATE_BEFORECHANGEOFFSET;
|
||||
if (this.state !== state) {
|
||||
this.state = state;
|
||||
if (this.state === STATE_AFTERCHANGEOFFSET) {
|
||||
this.removing = false;
|
||||
this.isNeedRefresh = true;
|
||||
} else {
|
||||
this.removing = true;
|
||||
this.isNeedRefresh = false;
|
||||
}
|
||||
this['_' + state](deltaY);
|
||||
}
|
||||
if ($.os.ios && parseFloat($.os.version) >= 8) {
|
||||
var clientY = detail.gesture.touches[0].clientY;
|
||||
if ((clientY + 10) > window.innerHeight || clientY < 10) {
|
||||
this._dragend(e);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_dragend: function(e) {
|
||||
var self = this;
|
||||
if (self.isDragging) {
|
||||
self.isDragging = false;
|
||||
self._dragEndAfterChangeOffset(self.isNeedRefresh);
|
||||
}
|
||||
if (self.isPullingUp) {
|
||||
if (self.pullingUpTimeout) {
|
||||
clearTimeout(self.pullingUpTimeout);
|
||||
}
|
||||
self.pullingUpTimeout = setTimeout(function() {
|
||||
self.isPullingUp = false;
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
_pullStart: function(startDeltaY) {
|
||||
this.pullStart(startDeltaY);
|
||||
$.trigger(this.element, EVENT_PULLSTART, {
|
||||
api: this,
|
||||
startDeltaY: startDeltaY
|
||||
});
|
||||
},
|
||||
_pulling: function(deltaY) {
|
||||
this.pulling(deltaY);
|
||||
$.trigger(this.element, EVENT_PULLING, {
|
||||
api: this,
|
||||
deltaY: deltaY
|
||||
});
|
||||
},
|
||||
_beforeChangeOffset: function(deltaY) {
|
||||
this.beforeChangeOffset(deltaY);
|
||||
$.trigger(this.element, EVENT_BEFORECHANGEOFFSET, {
|
||||
api: this,
|
||||
deltaY: deltaY
|
||||
});
|
||||
},
|
||||
_afterChangeOffset: function(deltaY) {
|
||||
this.afterChangeOffset(deltaY);
|
||||
$.trigger(this.element, EVENT_AFTERCHANGEOFFSET, {
|
||||
api: this,
|
||||
deltaY: deltaY
|
||||
});
|
||||
},
|
||||
_dragEndAfterChangeOffset: function(isNeedRefresh) {
|
||||
this.dragEndAfterChangeOffset(isNeedRefresh);
|
||||
$.trigger(this.element, EVENT_DRAGENDAFTERCHANGEOFFSET, {
|
||||
api: this,
|
||||
isNeedRefresh: isNeedRefresh
|
||||
});
|
||||
},
|
||||
removePullDownTips: function() {
|
||||
if (this.pullDownTips) {
|
||||
try {
|
||||
this.pullDownTips.parentNode && this.pullDownTips.parentNode.removeChild(this.pullDownTips);
|
||||
this.pullDownTips = null;
|
||||
this.removing = false;
|
||||
} catch (e) {}
|
||||
}
|
||||
},
|
||||
pullStart: function(startDeltaY) {
|
||||
this.initPullDownTips(startDeltaY);
|
||||
},
|
||||
pulling: function(deltaY) {
|
||||
this.pullDownTips.style.webkitTransform = 'translate3d(0,' + deltaY + 'px,0)';
|
||||
},
|
||||
beforeChangeOffset: function(deltaY) {
|
||||
this.pullDownTipsIcon.className = CLASS_PULL_TOP_ARROW;
|
||||
},
|
||||
afterChangeOffset: function(deltaY) {
|
||||
this.pullDownTipsIcon.className = CLASS_PULL_TOP_ARROW_REVERSE;
|
||||
},
|
||||
dragEndAfterChangeOffset: function(isNeedRefresh) {
|
||||
if (isNeedRefresh) {
|
||||
this.pullDownTipsIcon.className = CLASS_PULL_TOP_SPINNER;
|
||||
this.pullDownLoading();
|
||||
} else {
|
||||
this.pullDownTipsIcon.className = CLASS_PULL_TOP_ARROW;
|
||||
this.endPullDownToRefresh();
|
||||
}
|
||||
},
|
||||
pullDownLoading: function() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
if (!this.pullDownTips) {
|
||||
this.initPullDownTips();
|
||||
this.dragEndAfterChangeOffset(true);
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.pullDownTips.classList.add(CLASS_TRANSITIONING);
|
||||
this.pullDownTips.style.webkitTransform = 'translate3d(0,' + this.options.down.height + 'px,0)';
|
||||
this.options.down.callback.apply(this);
|
||||
},
|
||||
pullUpLoading: function(e) {
|
||||
if (this.loading || this.finished) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.isDraggingUp = false;
|
||||
this.pullUpTips.classList.remove(CLASS_HIDDEN);
|
||||
e && e.detail && e.detail.gesture && e.detail.gesture.preventDefault();
|
||||
this.pullUpTipsIcon.innerHTML = this.options.up.contentrefresh;
|
||||
this.options.up.callback.apply(this);
|
||||
},
|
||||
endPullDownToRefresh: function() {
|
||||
this.loading = false;
|
||||
this.pullUpTips && this.pullUpTips.classList.remove(CLASS_HIDDEN);
|
||||
this.pullDownTips.classList.add(CLASS_TRANSITIONING);
|
||||
this.pullDownTips.style.webkitTransform = 'translate3d(0,0,0)';
|
||||
if (this.deltaY <= 0) {
|
||||
this.removePullDownTips();
|
||||
} else {
|
||||
this.removing = true;
|
||||
}
|
||||
if (this.isInScroll) {
|
||||
$(this.element.parentNode).scroll().refresh();
|
||||
}
|
||||
},
|
||||
endPullUpToRefresh: function(finished) {
|
||||
if (finished) {
|
||||
this.finished = true;
|
||||
this.pullUpTipsIcon.innerHTML = this.options.up.contentnomore;
|
||||
this.element.removeEventListener('dragup', this);
|
||||
window.removeEventListener('scroll', this);
|
||||
} else {
|
||||
this.pullUpTipsIcon.innerHTML = this.options.up.contentdown;
|
||||
}
|
||||
this.loading = false;
|
||||
if (this.isInScroll) {
|
||||
$(this.element.parentNode).scroll().refresh();
|
||||
}
|
||||
},
|
||||
setStopped: function(stopped) {
|
||||
if (stopped != this.stopped) {
|
||||
this.stopped = stopped;
|
||||
this.pullUpTips && this.pullUpTips.classList[stopped ? 'add' : 'remove'](CLASS_HIDDEN);
|
||||
}
|
||||
},
|
||||
refresh: function(isReset) {
|
||||
if (isReset && this.finished && this.pullUpTipsIcon) {
|
||||
this.pullUpTipsIcon.innerHTML = this.options.up.contentdown;
|
||||
this.element.addEventListener('dragup', this);
|
||||
window.addEventListener('scroll', this);
|
||||
this.finished = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
$.fn.pullToRefresh = function(options) {
|
||||
var pullRefreshApis = [];
|
||||
options = options || {};
|
||||
this.each(function() {
|
||||
var self = this;
|
||||
var pullRefreshApi = null;
|
||||
var id = self.getAttribute('data-pullToRefresh');
|
||||
if (!id) {
|
||||
id = ++$.uuid;
|
||||
$.data[id] = pullRefreshApi = new $.PullToRefresh(self, options);
|
||||
self.setAttribute('data-pullToRefresh', id);
|
||||
} else {
|
||||
pullRefreshApi = $.data[id];
|
||||
}
|
||||
if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
|
||||
pullRefreshApi.pullUpLoading();
|
||||
}
|
||||
pullRefreshApis.push(pullRefreshApi);
|
||||
});
|
||||
return pullRefreshApis.length === 1 ? pullRefreshApis[0] : pullRefreshApis;
|
||||
}
|
||||
})(mui, window, document);
|
||||
@@ -0,0 +1,352 @@
|
||||
(function($) {
|
||||
var CLASS_PULL_TOP_TIPS = $.className('pull-top-tips');
|
||||
|
||||
$.PullToRefresh = $.PullToRefresh.extend({
|
||||
init: function(element, options) {
|
||||
this._super(element, options);
|
||||
this.options = $.extend(true, {
|
||||
down: {
|
||||
tips: {
|
||||
colors: ['008000', 'd8ad44', 'd00324', 'dc00b8', '017efc'],
|
||||
size: 200, //width=height=size;x=y=size/2;radius=size/4
|
||||
lineWidth: 15,
|
||||
duration: 1000,
|
||||
tail_duration: 1000 * 2.5
|
||||
}
|
||||
}
|
||||
}, this.options);
|
||||
this.options.down.tips.color = this.options.down.tips.colors[0];
|
||||
this.options.down.tips.colors = this.options.down.tips.colors.map(function(color) {
|
||||
return {
|
||||
r: parseInt(color.substring(0, 2), 16),
|
||||
g: parseInt(color.substring(2, 4), 16),
|
||||
b: parseInt(color.substring(4, 6), 16)
|
||||
};
|
||||
});
|
||||
},
|
||||
initPullDownTips: function() {
|
||||
var self = this;
|
||||
if ($.isFunction(self.options.down.callback)) {
|
||||
self.pullDownTips = (function() {
|
||||
var element = document.querySelector('.' + CLASS_PULL_TOP_TIPS);
|
||||
if (element) {
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
if (!element) {
|
||||
element = document.createElement('div');
|
||||
element.classList.add(CLASS_PULL_TOP_TIPS);
|
||||
element.innerHTML = '<div class="mui-pull-top-wrapper"><div class="mui-pull-top-canvas"><canvas id="pullDownTips" width="' + self.options.down.tips.size + '" height="' + self.options.down.tips.size + '"></canvas></div></div>';
|
||||
element.addEventListener('webkitTransitionEnd', self);
|
||||
document.body.appendChild(element);
|
||||
}
|
||||
self.pullDownCanvas = document.getElementById("pullDownTips");
|
||||
self.pullDownCanvasCtx = self.pullDownCanvas.getContext('2d');
|
||||
self.canvasUtils.init(self.pullDownCanvas, self.options.down.tips);
|
||||
return element;
|
||||
}());
|
||||
}
|
||||
},
|
||||
removePullDownTips: function() {
|
||||
this._super();
|
||||
this.canvasUtils.stopSpin();
|
||||
},
|
||||
pulling: function(deltaY) {
|
||||
var ratio = Math.min(deltaY / (this.options.down.height * 1.5), 1);
|
||||
var ratioPI = Math.min(1, ratio * 2);
|
||||
this.pullDownTips.style.webkitTransform = 'translate3d(0,' + (deltaY < 0 ? 0 : deltaY) + 'px,0)';
|
||||
this.pullDownCanvas.style.opacity = ratioPI;
|
||||
this.pullDownCanvas.style.webkitTransform = 'rotate(' + 300 * ratio + 'deg)';
|
||||
var canvas = this.pullDownCanvas;
|
||||
var ctx = this.pullDownCanvasCtx;
|
||||
var size = this.options.down.tips.size;
|
||||
ctx.lineWidth = this.options.down.tips.lineWidth;
|
||||
ctx.fillStyle = '#' + this.options.down.tips.color;
|
||||
ctx.strokeStyle = '#' + this.options.down.tips.color;
|
||||
ctx.stroke();
|
||||
ctx.clearRect(0, 0, size, size);
|
||||
//fixed android 4.1.x
|
||||
canvas.style.display = 'none'; // Detach from DOM
|
||||
canvas.offsetHeight; // Force the detach
|
||||
canvas.style.display = 'inherit'; // Reattach to DOM
|
||||
this.canvasUtils.drawArcedArrow(ctx, size / 2 + 0.5, size / 2, size / 4, 0 * Math.PI, 5 / 3 * Math.PI * ratioPI, false, 1, 2, 0.7853981633974483, 25, this.options.down.tips.lineWidth, this.options.down.tips.lineWidth);
|
||||
},
|
||||
|
||||
beforeChangeOffset: function(deltaY) {},
|
||||
afterChangeOffset: function(deltaY) {},
|
||||
dragEndAfterChangeOffset: function(isNeedRefresh) {
|
||||
if (isNeedRefresh) {
|
||||
this.canvasUtils.startSpin();
|
||||
this.pullDownLoading();
|
||||
} else {
|
||||
this.canvasUtils.stopSpin();
|
||||
this.endPullDownToRefresh();
|
||||
}
|
||||
},
|
||||
canvasUtils: (function() {
|
||||
var canvasObj = null,
|
||||
ctx = null,
|
||||
size = 200,
|
||||
lineWidth = 15,
|
||||
tick = 0,
|
||||
startTime = 0,
|
||||
frameTime = 0,
|
||||
timeLast = 0,
|
||||
oldStep = 0,
|
||||
acc = 0,
|
||||
head = 0,
|
||||
tail = 180,
|
||||
rad = Math.PI / 180,
|
||||
duration = 1000,
|
||||
tail_duration = 1000 * 2.5,
|
||||
colors = ['35ad0e', 'd8ad44', 'd00324', 'dc00b8', '017efc'],
|
||||
rAF = null;
|
||||
|
||||
function easeLinear(currentIteration, startValue, changeInValue, totalIterations) {
|
||||
return changeInValue * currentIteration / totalIterations + startValue;
|
||||
}
|
||||
|
||||
function easeInOutQuad(currentIteration, startValue, changeInValue, totalIterations) {
|
||||
if ((currentIteration /= totalIterations / 2) < 1) {
|
||||
return changeInValue / 2 * currentIteration * currentIteration + startValue;
|
||||
}
|
||||
return -changeInValue / 2 * ((--currentIteration) * (currentIteration - 2) - 1) + startValue;
|
||||
}
|
||||
|
||||
function minmax(value, v0, v1) {
|
||||
var min = Math.min(v0, v1);
|
||||
var max = Math.max(v0, v1);
|
||||
if (value < min)
|
||||
return min;
|
||||
if (value > max)
|
||||
return min;
|
||||
return value;
|
||||
}
|
||||
var drawHead = function(ctx, x0, y0, x1, y1, x2, y2, style) {
|
||||
'use strict';
|
||||
if (typeof(x0) == 'string') x0 = parseInt(x0);
|
||||
if (typeof(y0) == 'string') y0 = parseInt(y0);
|
||||
if (typeof(x1) == 'string') x1 = parseInt(x1);
|
||||
if (typeof(y1) == 'string') y1 = parseInt(y1);
|
||||
if (typeof(x2) == 'string') x2 = parseInt(x2);
|
||||
if (typeof(y2) == 'string') y2 = parseInt(y2);
|
||||
var radius = 3;
|
||||
var twoPI = 2 * Math.PI;
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x0, y0);
|
||||
ctx.lineTo(x1, y1);
|
||||
ctx.lineTo(x2, y2);
|
||||
switch (style) {
|
||||
case 0:
|
||||
var backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0)));
|
||||
ctx.arcTo(x1, y1, x0, y0, .55 * backdist);
|
||||
ctx.fill();
|
||||
break;
|
||||
case 1:
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x0, y0);
|
||||
ctx.lineTo(x1, y1);
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.lineTo(x0, y0);
|
||||
ctx.fill();
|
||||
break;
|
||||
case 2:
|
||||
ctx.stroke();
|
||||
break;
|
||||
case 3:
|
||||
var cpx = (x0 + x1 + x2) / 3;
|
||||
var cpy = (y0 + y1 + y2) / 3;
|
||||
ctx.quadraticCurveTo(cpx, cpy, x0, y0);
|
||||
ctx.fill();
|
||||
break;
|
||||
case 4:
|
||||
var cp1x, cp1y, cp2x, cp2y, backdist;
|
||||
var shiftamt = 5;
|
||||
if (x2 == x0) {
|
||||
backdist = y2 - y0;
|
||||
cp1x = (x1 + x0) / 2;
|
||||
cp2x = (x1 + x0) / 2;
|
||||
cp1y = y1 + backdist / shiftamt;
|
||||
cp2y = y1 - backdist / shiftamt;
|
||||
} else {
|
||||
backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0)));
|
||||
var xback = (x0 + x2) / 2;
|
||||
var yback = (y0 + y2) / 2;
|
||||
var xmid = (xback + x1) / 2;
|
||||
var ymid = (yback + y1) / 2;
|
||||
var m = (y2 - y0) / (x2 - x0);
|
||||
var dx = (backdist / (2 * Math.sqrt(m * m + 1))) / shiftamt;
|
||||
var dy = m * dx;
|
||||
cp1x = xmid - dx;
|
||||
cp1y = ymid - dy;
|
||||
cp2x = xmid + dx;
|
||||
cp2y = ymid + dy;
|
||||
}
|
||||
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x0, y0);
|
||||
ctx.fill();
|
||||
break;
|
||||
}
|
||||
ctx.restore();
|
||||
};
|
||||
var drawArcedArrow = function(ctx, x, y, r, startangle, endangle, anticlockwise, style, which, angle, d, lineWidth, lineRatio) {
|
||||
'use strict';
|
||||
style = typeof(style) != 'undefined' ? style : 3;
|
||||
which = typeof(which) != 'undefined' ? which : 1;
|
||||
angle = typeof(angle) != 'undefined' ? angle : Math.PI / 8;
|
||||
lineWidth = lineWidth || 1;
|
||||
lineRatio = lineRatio || 10;
|
||||
d = typeof(d) != 'undefined' ? d : 10;
|
||||
ctx.save();
|
||||
ctx.lineWidth = lineWidth;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, r, startangle, endangle, anticlockwise);
|
||||
ctx.stroke();
|
||||
var sx, sy, lineangle, destx, desty;
|
||||
if (which & 1) {
|
||||
sx = Math.cos(startangle) * r + x;
|
||||
sy = Math.sin(startangle) * r + y;
|
||||
lineangle = Math.atan2(x - sx, sy - y);
|
||||
if (anticlockwise) {
|
||||
destx = sx + 10 * Math.cos(lineangle);
|
||||
desty = sy + 10 * Math.sin(lineangle);
|
||||
} else {
|
||||
destx = sx - 10 * Math.cos(lineangle);
|
||||
desty = sy - 10 * Math.sin(lineangle);
|
||||
}
|
||||
drawArrow(ctx, sx, sy, destx, desty, style, 2, angle, d);
|
||||
}
|
||||
if (which & 2) {
|
||||
sx = Math.cos(endangle) * r + x;
|
||||
sy = Math.sin(endangle) * r + y;
|
||||
lineangle = Math.atan2(x - sx, sy - y);
|
||||
if (anticlockwise) {
|
||||
destx = sx - 10 * Math.cos(lineangle);
|
||||
desty = sy - 10 * Math.sin(lineangle);
|
||||
} else {
|
||||
destx = sx + 10 * Math.cos(lineangle);
|
||||
desty = sy + 10 * Math.sin(lineangle);
|
||||
}
|
||||
drawArrow(ctx, sx - lineRatio * Math.sin(endangle), sy + lineRatio * Math.cos(endangle), destx - lineRatio * Math.sin(endangle), desty + lineRatio * Math.cos(endangle), style, 2, angle, d)
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
var drawArrow = function(ctx, x1, y1, x2, y2, style, which, angle, d) {
|
||||
'use strict';
|
||||
if (typeof(x1) == 'string') x1 = parseInt(x1);
|
||||
if (typeof(y1) == 'string') y1 = parseInt(y1);
|
||||
if (typeof(x2) == 'string') x2 = parseInt(x2);
|
||||
if (typeof(y2) == 'string') y2 = parseInt(y2);
|
||||
style = typeof(style) != 'undefined' ? style : 3;
|
||||
which = typeof(which) != 'undefined' ? which : 1;
|
||||
angle = typeof(angle) != 'undefined' ? angle : Math.PI / 8;
|
||||
d = typeof(d) != 'undefined' ? d : 10;
|
||||
var toDrawHead = typeof(style) != 'function' ? drawHead : style;
|
||||
var dist = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
|
||||
var ratio = (dist - d / 3) / dist;
|
||||
var tox, toy, fromx, fromy;
|
||||
if (which & 1) {
|
||||
tox = Math.round(x1 + (x2 - x1) * ratio);
|
||||
toy = Math.round(y1 + (y2 - y1) * ratio);
|
||||
} else {
|
||||
tox = x2;
|
||||
toy = y2;
|
||||
}
|
||||
if (which & 2) {
|
||||
fromx = x1 + (x2 - x1) * (1 - ratio);
|
||||
fromy = y1 + (y2 - y1) * (1 - ratio);
|
||||
} else {
|
||||
fromx = x1;
|
||||
fromy = y1;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(fromx, fromy);
|
||||
ctx.lineTo(tox, toy);
|
||||
ctx.stroke();
|
||||
var lineangle = Math.atan2(y2 - y1, x2 - x1);
|
||||
var h = Math.abs(d / Math.cos(angle));
|
||||
if (which & 1) {
|
||||
var angle1 = lineangle + Math.PI + angle;
|
||||
var topx = x2 + Math.cos(angle1) * h;
|
||||
var topy = y2 + Math.sin(angle1) * h;
|
||||
var angle2 = lineangle + Math.PI - angle;
|
||||
var botx = x2 + Math.cos(angle2) * h;
|
||||
var boty = y2 + Math.sin(angle2) * h;
|
||||
toDrawHead(ctx, topx, topy, x2, y2, botx, boty, style);
|
||||
}
|
||||
if (which & 2) {
|
||||
var angle1 = lineangle + angle;
|
||||
var topx = x1 + Math.cos(angle1) * h;
|
||||
var topy = y1 + Math.sin(angle1) * h;
|
||||
var angle2 = lineangle - angle;
|
||||
var botx = x1 + Math.cos(angle2) * h;
|
||||
var boty = y1 + Math.sin(angle2) * h;
|
||||
toDrawHead(ctx, topx, topy, x1, y1, botx, boty, style);
|
||||
}
|
||||
};
|
||||
|
||||
var spinColors = function(currentIteration, totalIterations) {
|
||||
var step = currentIteration % totalIterations;
|
||||
if (step < oldStep)
|
||||
colors.push(colors.shift());
|
||||
var c0 = colors[0],
|
||||
c1 = colors[1],
|
||||
r = minmax(easeLinear(step, c0.r, c1.r - c0.r, totalIterations), c0.r, c1.r),
|
||||
g = minmax(easeLinear(step, c0.g, c1.g - c0.g, totalIterations), c0.g, c1.g),
|
||||
b = minmax(easeLinear(step, c0.b, c1.b - c0.b, totalIterations), c0.b, c1.b);
|
||||
|
||||
oldStep = step;
|
||||
return "rgb(" + parseInt(r) + "," + parseInt(g) + "," + parseInt(b) + ")";
|
||||
}
|
||||
|
||||
var spin = function(t) {
|
||||
var timeCurrent = t || (new Date).getTime();
|
||||
if (!startTime) {
|
||||
startTime = timeCurrent;
|
||||
}
|
||||
tick = timeCurrent - startTime;
|
||||
acc = easeInOutQuad((tick + tail_duration / 2) % tail_duration, 0, duration, tail_duration);
|
||||
head = easeLinear((tick + acc) % duration, 0, 360, duration);
|
||||
tail = 20 + Math.abs(easeLinear((tick + tail_duration / 2) % tail_duration, -300, 600, tail_duration));
|
||||
|
||||
ctx.lineWidth = lineWidth;
|
||||
ctx.lineCap = "round";
|
||||
|
||||
ctx.strokeStyle = spinColors(tick, duration);
|
||||
ctx.clearRect(0, 0, size, size);
|
||||
//fixed android 4.1.x
|
||||
canvasObj.style.display = 'none'; // Detach from DOM
|
||||
canvasObj.offsetHeight; // Force the detach
|
||||
canvasObj.style.display = 'inherit'; // Reattach to DOM
|
||||
ctx.beginPath();
|
||||
ctx.arc(size / 2, size / 2, size / 4, parseInt(head - tail) % 360 * rad, parseInt(head) % 360 * rad, false);
|
||||
ctx.stroke();
|
||||
|
||||
rAF = requestAnimationFrame(spin);
|
||||
};
|
||||
var startSpin = function() {
|
||||
startTime = 0;
|
||||
oldStep = 0;
|
||||
rAF = requestAnimationFrame(spin);
|
||||
};
|
||||
var stopSpin = function() {
|
||||
rAF && cancelAnimationFrame(rAF);
|
||||
}
|
||||
var init = function(canvas, options) {
|
||||
canvasObj = canvas;
|
||||
ctx = canvasObj.getContext('2d');
|
||||
var options = $.extend(true, {}, options);
|
||||
colors = options.colors;
|
||||
duration = options.duration;
|
||||
tail_duration = options.tail_duration;
|
||||
size = options.size;
|
||||
lineWidth = options.lineWidth;
|
||||
};
|
||||
return {
|
||||
init: init,
|
||||
drawArcedArrow: drawArcedArrow,
|
||||
startSpin: startSpin,
|
||||
stopSpin: stopSpin
|
||||
};
|
||||
})()
|
||||
});
|
||||
})(mui);
|
||||
@@ -0,0 +1,628 @@
|
||||
/**
|
||||
* <div id="app" class="mui-views">
|
||||
<div class="mui-view">
|
||||
<div class="mui-navbar">
|
||||
</div>
|
||||
<div class="mui-pages">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
* @param {Object} $
|
||||
* @param {Object} window
|
||||
*/
|
||||
(function($, window) {
|
||||
var CLASS_LEFT = $.className('left');
|
||||
var CLASS_CENTER = $.className('center');
|
||||
var CLASS_RIGHT = $.className('right');
|
||||
var CLASS_PAGE = $.className('page');
|
||||
var CLASS_PAGE_LEFT = $.className('page-left');
|
||||
var CLASS_PAGE_CENTER = $.className('page-center');
|
||||
var CLASS_NAVBAR_LEFT = $.className('navbar-left');
|
||||
var CLASS_NAVBAR_CENTER = $.className('navbar-center');
|
||||
var CLASS_PAGE_SHADOW = $.className('page-shadow');
|
||||
|
||||
var CLASS_TRANSITIONING = $.className('transitioning');
|
||||
|
||||
var SELECTOR_LEFT = '.' + CLASS_LEFT;
|
||||
var SELECTOR_CENTER = '.' + CLASS_CENTER;
|
||||
var SELECTOR_RIGHT = '.' + CLASS_RIGHT;
|
||||
|
||||
var SELECTOR_ICON = $.classSelector('.icon');
|
||||
var SELECTOR_NAVBAR = $.classSelector('.navbar');
|
||||
var SELECTOR_NAVBAR_INNER = $.classSelector('.navbar-inner');
|
||||
var SELECTOR_PAGES = $.classSelector('.pages');
|
||||
var SELECTOR_BTN_NAV = $.classSelector('.btn-nav');
|
||||
var SELECTOR_PAGE_LEFT = '.' + CLASS_PAGE_LEFT;
|
||||
var SELECTOR_PAGE_CENTER = '.' + CLASS_PAGE_CENTER;
|
||||
var SELECTOR_NAVBAR_LEFT = '.' + CLASS_NAVBAR_LEFT;
|
||||
var SELECTOR_NAVBAR_CENTER = '.' + CLASS_NAVBAR_CENTER;
|
||||
|
||||
var View = $.Class.extend({
|
||||
init: function(element, options) {
|
||||
this.view = this.element = element;
|
||||
this.options = $.extend({
|
||||
animateNavbar: 'ios', //ios
|
||||
swipeBackPageActiveArea: 30,
|
||||
hardwareAccelerated: true
|
||||
}, options);
|
||||
this.navbars = this.view.querySelector(SELECTOR_NAVBAR);
|
||||
this.pages = this.view.querySelector(SELECTOR_PAGES);
|
||||
|
||||
this.history = []; //history
|
||||
|
||||
this.maxScrollX = this.view.offsetWidth;
|
||||
this.x = this.y = 0;
|
||||
this.translateZ = this.options.hardwareAccelerated ? ' translateZ(0)' : '';
|
||||
this.ratio = 0;
|
||||
this.isBack = true;
|
||||
this.moved = this.dragging = false;
|
||||
|
||||
this.activeNavbar = this.previousNavbar = null;
|
||||
this.activePage = this.previousPage = null;
|
||||
|
||||
this._initPageEventMethod();
|
||||
|
||||
this._initDefaultPage();
|
||||
|
||||
this.navbars && this._initNavBar();
|
||||
|
||||
this.initEvent();
|
||||
},
|
||||
_initPageEventMethod: function() {
|
||||
var self = this;
|
||||
$.each(['onPageBeforeShow', 'onPageShow', 'onPageBeforeBack', 'onPageBack'], function(index, event) {
|
||||
self[event + 'Callbacks'] = {};
|
||||
self[event] = function(page, callback) {
|
||||
var eventCallbacks = event + 'Callbacks';
|
||||
if (!self[eventCallbacks].hasOwnProperty(page)) {
|
||||
self[eventCallbacks][page] = [callback];
|
||||
} else {
|
||||
self[eventCallbacks][page].push(callback);
|
||||
}
|
||||
};
|
||||
});
|
||||
},
|
||||
_initDefaultPage: function() {
|
||||
var defaultPage = document.querySelector(this.options.defaultPage);
|
||||
if (defaultPage) {
|
||||
this._appendPage(defaultPage);
|
||||
} else {
|
||||
throw new Error('defaultPage[' + this.options.defaultPage + '] does not exist');
|
||||
}
|
||||
},
|
||||
initEvent: function() {
|
||||
this.view.addEventListener('click', this);
|
||||
this.view.addEventListener('tap', this);
|
||||
this.pages.addEventListener('drag', this);
|
||||
this.pages.addEventListener('dragend', this);
|
||||
this.pages.addEventListener('webkitTransitionEnd', this);
|
||||
},
|
||||
handleEvent: function(event) {
|
||||
switch (event.type) {
|
||||
case 'click':
|
||||
this._click(event);
|
||||
break;
|
||||
case 'tap':
|
||||
this._tap(event);
|
||||
break;
|
||||
case 'drag':
|
||||
this._drag(event);
|
||||
break;
|
||||
case 'dragend':
|
||||
this._dragend(event);
|
||||
break;
|
||||
case 'webkitTransitionEnd':
|
||||
this._webkitTransitionEnd(event);
|
||||
break;
|
||||
}
|
||||
},
|
||||
shadow: function() {
|
||||
var shadow = document.createElement('div');
|
||||
shadow.className = CLASS_PAGE_SHADOW;
|
||||
return shadow;
|
||||
}(),
|
||||
_removePage: function(page, navbar) {
|
||||
navbar && this._removeNavbar(page, navbar);
|
||||
document.body.appendChild(page);
|
||||
this._cleanPageClass(page);
|
||||
},
|
||||
_prependPage: function(page) {
|
||||
var navbar = page.querySelector(SELECTOR_NAVBAR_INNER);
|
||||
navbar && this._prependNavbar(navbar);
|
||||
page.classList.add(CLASS_PAGE_LEFT);
|
||||
this.pages.insertBefore(page, this.pages.firstElementChild);
|
||||
},
|
||||
_appendPage: function(page) {
|
||||
var navbar = page.querySelector(SELECTOR_NAVBAR_INNER);
|
||||
navbar && this._appendNavbar(navbar);
|
||||
page.classList.add(CLASS_PAGE_CENTER);
|
||||
this.pages.appendChild(page);
|
||||
},
|
||||
_removeNavbar: function(page, navbar) {
|
||||
page.insertBefore(navbar, page.firstElementChild);
|
||||
this._cleanNavbarClass(navbar);
|
||||
},
|
||||
_prependNavbar: function(navbar) {
|
||||
navbar.classList.add(CLASS_NAVBAR_LEFT);
|
||||
this.navbars.insertBefore(navbar, this.navbars.firstElementChild);
|
||||
},
|
||||
_appendNavbar: function(navbar) {
|
||||
navbar.classList.add(CLASS_NAVBAR_CENTER);
|
||||
this.navbars.appendChild(navbar);
|
||||
},
|
||||
_cleanPageClass: function(page) {
|
||||
page.classList.remove(CLASS_PAGE_CENTER);
|
||||
page.classList.remove(CLASS_PAGE_LEFT);
|
||||
},
|
||||
_cleanNavbarClass: function(navbar) {
|
||||
navbar.classList.remove(CLASS_NAVBAR_CENTER);
|
||||
navbar.classList.remove(CLASS_NAVBAR_LEFT);
|
||||
},
|
||||
_tap: function(event) {
|
||||
var target = event.target;
|
||||
for (; target && target !== document; target = target.parentNode) {
|
||||
if (target.tagName === 'A' && target.hash) {
|
||||
var page = document.getElementById(target.hash.replace('#', ''));
|
||||
if (page && page.classList.contains(CLASS_PAGE)) {
|
||||
event.stopPropagation();
|
||||
event.detail.gesture.preventDefault();
|
||||
this.go(target.hash);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_click: function(event) {
|
||||
var target = event.target;
|
||||
for (; target && target !== document; target = target.parentNode) {
|
||||
if (target.tagName === 'A' && target.hash) {
|
||||
var page = document.getElementById(target.hash.replace('#', ''));
|
||||
if (page && page.classList.contains(CLASS_PAGE)) {
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_cleanStyle: function(el) {
|
||||
if (el) {
|
||||
el.style.webkitTransform = '';
|
||||
el.style.opacity = '';
|
||||
}
|
||||
},
|
||||
_isAnimateNavbarIOS: function() {
|
||||
return !$.os.android && this.options.animateNavbar === 'ios';
|
||||
},
|
||||
_webkitTransitionEnd: function(event) {
|
||||
this.dragging = this.moved = false;
|
||||
if (this.activePage !== event.target) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isInTransition = false;
|
||||
|
||||
this.shadow.parentNode === this.activePage && this.activePage.removeChild(this.shadow);
|
||||
this.previousPageClassList.remove(CLASS_TRANSITIONING);
|
||||
this.activePageClassList.remove(CLASS_TRANSITIONING);
|
||||
|
||||
var self = this;
|
||||
if (this._isAnimateNavbarIOS() && this.previousNavElements && this.activeNavElements) {
|
||||
var isBack = this.isBack;
|
||||
$.each(this.previousNavElements, function(i, el) {
|
||||
el.classList.remove(CLASS_TRANSITIONING);
|
||||
isBack && self._cleanStyle(el);
|
||||
});
|
||||
$.each(this.activeNavElements, function(i, el) {
|
||||
el.classList.remove(CLASS_TRANSITIONING);
|
||||
self._cleanStyle(el);
|
||||
});
|
||||
if (this.previousNavBackIcon) {
|
||||
this.previousNavBackIcon.classList.remove(CLASS_TRANSITIONING);
|
||||
isBack && this._cleanStyle(this.previousNavBackIcon);
|
||||
}
|
||||
if (this.activeNavBackIcon) {
|
||||
this.activeNavBackIcon.classList.remove(CLASS_TRANSITIONING);
|
||||
this._cleanStyle(this.activeNavBackIcon);
|
||||
}
|
||||
} else {
|
||||
this.previousNavbar && this.previousNavbar.classList.remove(CLASS_TRANSITIONING);
|
||||
this.activeNavbar && this.activeNavbar.classList.remove(CLASS_TRANSITIONING);
|
||||
this._cleanStyle(this.previousNavbar);
|
||||
this._cleanStyle(this.activeNavbar);
|
||||
}
|
||||
|
||||
this._cleanStyle(this.previousPage);
|
||||
this._cleanStyle(this.activePage);
|
||||
|
||||
if (this.ratio <= 0.5) {
|
||||
return;
|
||||
}
|
||||
if (this.isBack) {
|
||||
this._removePage(this.activePage, this.activeNavbar);
|
||||
this.previousPageClassList.remove(CLASS_PAGE_LEFT);
|
||||
this.previousPageClassList.add(CLASS_PAGE_CENTER);
|
||||
if (this.previousNavbar) {
|
||||
this.previousNavbar.classList.remove(CLASS_NAVBAR_LEFT);
|
||||
this.previousNavbar.classList.add(CLASS_NAVBAR_CENTER);
|
||||
}
|
||||
if (this.history.length > 0) {
|
||||
this._prependPage(this.history.pop());
|
||||
}
|
||||
this.navbars && this._initNavBar();
|
||||
this._trigger('pageBack', this.activePage);
|
||||
this._trigger('pageShow', this.previousPage);
|
||||
} else {
|
||||
this.previousPageClassList.add(CLASS_PAGE_LEFT);
|
||||
this.activePageClassList.add(CLASS_PAGE_CENTER);
|
||||
this._trigger('pageShow', this.activePage);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
_trigger: function(eventType, page) {
|
||||
var eventCallbacks = 'on' + eventType.charAt(0).toUpperCase() + eventType.slice(1) + 'Callbacks';
|
||||
if (this[eventCallbacks].hasOwnProperty(page.id)) {
|
||||
var callbacks = this[eventCallbacks][page.id];
|
||||
var event = new CustomEvent(eventType, {
|
||||
detail: {
|
||||
page: page
|
||||
},
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
});
|
||||
for (var len = callbacks.length; len--;) {
|
||||
callbacks[len].call(this, event);
|
||||
}
|
||||
}
|
||||
$.trigger(this.view, eventType, {
|
||||
page: page
|
||||
});
|
||||
},
|
||||
_initPageTransform: function() {
|
||||
this.previousPage = this.pages.querySelector(SELECTOR_PAGE_LEFT);
|
||||
this.activePage = this.pages.querySelector(SELECTOR_PAGE_CENTER);
|
||||
if (this.previousPage && this.activePage) {
|
||||
this.activePage.appendChild(this.shadow);
|
||||
this.previousPageClassList = this.previousPage.classList;
|
||||
this.activePageClassList = this.activePage.classList;
|
||||
|
||||
this.previousPageStyle = this.previousPage.style;
|
||||
this.activePageStyle = this.activePage.style;
|
||||
|
||||
this.previousPageClassList.remove(CLASS_TRANSITIONING);
|
||||
this.activePageClassList.remove(CLASS_TRANSITIONING);
|
||||
|
||||
if (this.navbars) {
|
||||
this.previousNavbar = this.navbars.querySelector(SELECTOR_NAVBAR_LEFT);
|
||||
this.activeNavbar = this.navbars.querySelector(SELECTOR_NAVBAR_CENTER);
|
||||
if (this._isAnimateNavbarIOS() && this.previousNavbar && this.activeNavbar) {
|
||||
this.previousNavElements = this.previousNavbar.querySelectorAll(SELECTOR_LEFT + ',' + SELECTOR_CENTER + ',' + SELECTOR_RIGHT);
|
||||
this.activeNavElements = this.activeNavbar.querySelectorAll(SELECTOR_LEFT + ',' + SELECTOR_CENTER + ',' + SELECTOR_RIGHT);
|
||||
this.previousNavBackIcon = this.previousNavbar.querySelector(SELECTOR_LEFT + SELECTOR_BTN_NAV + ' ' + SELECTOR_ICON);
|
||||
this.activeNavBackIcon = this.activeNavbar.querySelector(SELECTOR_LEFT + SELECTOR_BTN_NAV + ' ' + SELECTOR_ICON);
|
||||
}
|
||||
}
|
||||
this.x = 0;
|
||||
this.dragging = true;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
_initNavBar: function() {
|
||||
if (this._isAnimateNavbarIOS() && this.navbars) {
|
||||
var inners = this.navbars.querySelectorAll(SELECTOR_NAVBAR_INNER);
|
||||
var inner, left, right, center, leftWidth, rightWidth, centerWidth, noLeft, onRight, currLeft, diff, navbarWidth;
|
||||
for (var i = 0, len = inners.length; i < len; i++) {
|
||||
inner = inners[i];
|
||||
left = inner.querySelector(SELECTOR_LEFT);
|
||||
right = inner.querySelector(SELECTOR_RIGHT);
|
||||
center = inner.querySelector(SELECTOR_CENTER);
|
||||
noLeft = !left;
|
||||
noRight = !right;
|
||||
leftWidth = noLeft ? 0 : left.offsetWidth;
|
||||
rightWidth = noRight ? 0 : right.offsetWidth;
|
||||
centerWidth = center ? center.offsetWidth : 0;
|
||||
navbarWidth = this.maxScrollX;
|
||||
onLeft = inner.classList.contains('navbar-left');
|
||||
if (noRight) {
|
||||
currLeft = navbarWidth - centerWidth;
|
||||
}
|
||||
if (noLeft) {
|
||||
currLeft = 0;
|
||||
}
|
||||
if (!noLeft && !noRight) {
|
||||
currLeft = (navbarWidth - rightWidth - centerWidth + leftWidth) / 2;
|
||||
}
|
||||
var requiredLeft = (navbarWidth - centerWidth) / 2;
|
||||
if (navbarWidth - leftWidth - rightWidth > centerWidth) {
|
||||
if (requiredLeft < leftWidth) {
|
||||
requiredLeft = leftWidth;
|
||||
}
|
||||
if (requiredLeft + centerWidth > navbarWidth - rightWidth) {
|
||||
requiredLeft = navbarWidth - rightWidth - centerWidth;
|
||||
}
|
||||
diff = requiredLeft - currLeft;
|
||||
} else {
|
||||
diff = 0;
|
||||
}
|
||||
|
||||
var centerLeft = diff;
|
||||
if (center) {
|
||||
center.style.marginLeft = -leftWidth + 'px';
|
||||
center.mNavbarLeftOffset = -(currLeft + diff) + 30; //这个30是测出来的。后续要实际计算一下
|
||||
center.mNavbarRightOffset = navbarWidth - currLeft - diff - centerWidth;
|
||||
}
|
||||
|
||||
if (onLeft) center.style.webkitTransform = ('translate3d(' + center.mNavbarLeftOffset + 'px, 0, 0)');
|
||||
|
||||
if (!noLeft) {
|
||||
left.mNavbarLeftOffset = -leftWidth;
|
||||
left.mNavbarRightOffset = (navbarWidth - leftWidth) / 2;
|
||||
if (onLeft) left.style.webkitTransform = ('translate3d(' + left[0].mNavbarLeftOffset + 'px, 0, 0)');
|
||||
}
|
||||
|
||||
if (!noRight) {
|
||||
right.mNavbarLeftOffset = -(navbarWidth - rightWidth) / 2;
|
||||
right.mNavbarRightOffset = rightWidth;
|
||||
if (onLeft) right.style.webkitTransform = ('translate3d(' + right[0].mNavbarLeftOffset + 'px, 0, 0)');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
_drag: function(event) {
|
||||
if (this.isInTransition) {
|
||||
return;
|
||||
}
|
||||
var detail = event.detail;
|
||||
if (!this.dragging) {
|
||||
if (($.gestures.session.firstTouch.center.x - this.view.offsetLeft) < this.options.swipeBackPageActiveArea) {
|
||||
this.isBack = true;
|
||||
this._initPageTransform();
|
||||
}
|
||||
}
|
||||
if (this.dragging) {
|
||||
var deltaX = 0;
|
||||
if (!this.moved) { //start
|
||||
deltaX = detail.deltaX;
|
||||
$.gestures.session.lockDirection = true; //锁定方向
|
||||
$.gestures.session.startDirection = detail.direction;
|
||||
} else { //move
|
||||
deltaX = detail.deltaX - ($.gestures.session.prevTouch && $.gestures.session.prevTouch.deltaX || 0);
|
||||
}
|
||||
var newX = this.x + deltaX;
|
||||
if (newX < 0 || newX > this.maxScrollX) {
|
||||
newX = newX < 0 ? 0 : this.maxScrollX;
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
detail.gesture.preventDefault();
|
||||
|
||||
if (!this.requestAnimationFrame) {
|
||||
this._updateTranslate();
|
||||
}
|
||||
|
||||
this.moved = true;
|
||||
this.x = newX;
|
||||
this.y = 0;
|
||||
}
|
||||
},
|
||||
_dragend: function(event) {
|
||||
if (!this.moved) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
|
||||
var detail = event.detail;
|
||||
|
||||
this._clearRequestAnimationFrame();
|
||||
|
||||
this._prepareTransition();
|
||||
|
||||
this.ratio = this.x / this.maxScrollX;
|
||||
if (this.ratio === 1 || this.ratio === 0) {
|
||||
$.trigger(this.activePage, 'webkitTransitionEnd');
|
||||
return;
|
||||
}
|
||||
if (this.ratio > 0.5) {
|
||||
this.setTranslate(this.maxScrollX, 0);
|
||||
} else {
|
||||
this._cleanStyle(this.previousPage);
|
||||
this._cleanStyle(this.activePage);
|
||||
}
|
||||
},
|
||||
_prepareTransition: function() {
|
||||
this.isInTransition = true;
|
||||
this.previousPageClassList.add(CLASS_TRANSITIONING);
|
||||
this.activePageClassList.add(CLASS_TRANSITIONING);
|
||||
var self = this;
|
||||
if (this.previousNavbar && this.activeNavbar) {
|
||||
this.previousNavbar.classList.add(CLASS_TRANSITIONING);
|
||||
this.activeNavbar.classList.add(CLASS_TRANSITIONING);
|
||||
if (this._isAnimateNavbarIOS() && this.previousNavElements && this.activeNavElements) {
|
||||
$.each(this.previousNavElements, function(i, el) {
|
||||
el.classList.add(CLASS_TRANSITIONING);
|
||||
self._cleanStyle(el);
|
||||
});
|
||||
$.each(this.activeNavElements, function(i, el) {
|
||||
el.classList.add(CLASS_TRANSITIONING);
|
||||
self._cleanStyle(el);
|
||||
});
|
||||
if (this.previousNavBackIcon) {
|
||||
this._cleanStyle(this.previousNavBackIcon);
|
||||
this.previousNavBackIcon.classList.add(CLASS_TRANSITIONING);
|
||||
}
|
||||
if (this.activeNavBackIcon) {
|
||||
this._cleanStyle(this.activeNavBackIcon);
|
||||
this.activeNavBackIcon.classList.add(CLASS_TRANSITIONING);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_clearRequestAnimationFrame: function() {
|
||||
if (this.requestAnimationFrame) {
|
||||
cancelAnimationFrame(this.requestAnimationFrame);
|
||||
this.requestAnimationFrame = null;
|
||||
}
|
||||
},
|
||||
_getTranslateStr: function(x, y) {
|
||||
if (this.options.hardwareAccelerated) {
|
||||
return 'translate3d(' + x + 'px,' + y + 'px,0px) ' + this.translateZ;
|
||||
}
|
||||
return 'translate(' + x + 'px,' + y + 'px) ';
|
||||
},
|
||||
|
||||
_updateTranslate: function() {
|
||||
var self = this;
|
||||
if (self.x !== self.lastX || self.y !== self.lastY) {
|
||||
self.setTranslate(self.x, self.y);
|
||||
}
|
||||
self.requestAnimationFrame = requestAnimationFrame(function() {
|
||||
self._updateTranslate();
|
||||
});
|
||||
},
|
||||
_setNavbarTranslate: function(x, y) {
|
||||
var percentage = x / this.maxScrollX;
|
||||
//only for ios
|
||||
if (this._isAnimateNavbarIOS()) {
|
||||
if (this.previousNavElements && this.activeNavElements) {
|
||||
this.animateNavbarByIOS(percentage);
|
||||
}
|
||||
} else { //pop-in
|
||||
this.activeNavbar.style.opacity = 1 - percentage * 1.3;
|
||||
this.previousNavbar.style.opacity = percentage * 1.3 - 0.3;
|
||||
}
|
||||
},
|
||||
animateNavbarByIOS: function(percentage) {
|
||||
var i, len, style, el;
|
||||
for (i = 0, len = this.activeNavElements.length; i < len; i++) {
|
||||
el = this.activeNavElements[i];
|
||||
style = el.style;
|
||||
style.opacity = (1 - percentage * (el.classList.contains(CLASS_LEFT) ? 3.5 : 1.3));
|
||||
if (!el.classList.contains(CLASS_RIGHT)) {
|
||||
var activeNavTranslate = percentage * el.mNavbarRightOffset;
|
||||
el.style.webkitTransform = ('translate3d(' + activeNavTranslate + 'px,0,0)');
|
||||
if (el.classList.contains(CLASS_LEFT) && this.activeNavBackIcon) {
|
||||
this.activeNavBackIcon.style.webkitTransform = ('translate3d(' + -activeNavTranslate + 'px,0,0)');
|
||||
}
|
||||
}
|
||||
}
|
||||
for (i = 0, len = this.previousNavElements.length; i < len; i++) {
|
||||
el = this.previousNavElements[i];
|
||||
style = el.style;
|
||||
style.opacity = percentage * 1.3 - 0.3;
|
||||
if (!el.classList.contains(CLASS_RIGHT)) {
|
||||
var previousNavTranslate = el.mNavbarLeftOffset * (1 - percentage);
|
||||
el.style.webkitTransform = ('translate3d(' + previousNavTranslate + 'px,0,0)');
|
||||
if (el.classList.contains(CLASS_LEFT) && this.previousNavBackIcon) {
|
||||
this.previousNavBackIcon.style.webkitTransform = ('translate3d(' + -previousNavTranslate + 'px,0,0)');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
setTranslate: function(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.previousPage.style.opacity = 0.9 + 0.1 * x / this.maxScrollX;
|
||||
this.previousPage.style['webkitTransform'] = this._getTranslateStr((x / 6 - this.maxScrollX / 6), y);
|
||||
this.activePage.style['webkitTransform'] = this._getTranslateStr(x, y);
|
||||
|
||||
this.navbars && this._setNavbarTranslate(x, y);
|
||||
this.lastX = this.x;
|
||||
this.lastY = this.y;
|
||||
},
|
||||
canBack: function() {
|
||||
return this.pages.querySelector(SELECTOR_PAGE_LEFT);
|
||||
},
|
||||
back: function() {
|
||||
if (this.isInTransition) {
|
||||
return;
|
||||
}
|
||||
this.isBack = true;
|
||||
this.ratio = 1;
|
||||
if (this._initPageTransform()) {
|
||||
this._trigger('pageBeforeBack', this.activePage);
|
||||
this._trigger('pageBeforeShow', this.previousPage);
|
||||
this._prepareTransition();
|
||||
this.previousPage.offsetHeight;
|
||||
this.activePage.offsetHeight;
|
||||
this.setTranslate(this.maxScrollX, 0);
|
||||
}
|
||||
},
|
||||
go: function(pageSelector) {
|
||||
if (this.isInTransition) {
|
||||
return;
|
||||
}
|
||||
var nextPage = document.querySelector(pageSelector);
|
||||
|
||||
if (nextPage) {
|
||||
var previousPage = this.pages.querySelector(SELECTOR_PAGE_LEFT);
|
||||
var activePage = this.pages.querySelector(SELECTOR_PAGE_CENTER);
|
||||
var previousNavbar;
|
||||
var activeNavbar;
|
||||
if (this.navbars) {
|
||||
previousNavbar = this.navbars.querySelector(SELECTOR_NAVBAR_LEFT);
|
||||
activeNavbar = this.navbars.querySelector(SELECTOR_NAVBAR_CENTER);
|
||||
}
|
||||
if (activeNavbar) {
|
||||
activeNavbar.classList.remove(CLASS_NAVBAR_CENTER);
|
||||
activeNavbar.classList.add(CLASS_NAVBAR_LEFT);
|
||||
}
|
||||
|
||||
if (previousPage) {
|
||||
this._removePage(previousPage, previousNavbar);
|
||||
this.history.push(previousPage); //add to history
|
||||
}
|
||||
|
||||
if (activePage) {
|
||||
activePage.classList.remove(CLASS_PAGE_CENTER);
|
||||
activePage.style.webkitTransform = 'translate3d(0,0,0)';
|
||||
activePage.classList.add(CLASS_PAGE_LEFT);
|
||||
}
|
||||
|
||||
|
||||
nextPage.style.webkitTransform = 'translate3d(100%,0,0)';
|
||||
this._appendPage(nextPage);
|
||||
nextPage.appendChild(this.shadow); //shadow
|
||||
nextPage.offsetHeight; //force
|
||||
this.isBack = false;
|
||||
this.ratio = 1;
|
||||
|
||||
this._initPageTransform();
|
||||
|
||||
this.navbars && this._initNavBar();
|
||||
|
||||
this.navbars && this._setNavbarTranslate(this.maxScrollX, 0);
|
||||
//force
|
||||
this.previousPage.offsetHeight;
|
||||
this.activePage.offsetHeight;
|
||||
|
||||
if (this.navbars) {
|
||||
this.previousNavbar.offsetHeight;
|
||||
this.activeNavbar.offsetHeight;
|
||||
}
|
||||
|
||||
this._trigger('pageBeforeShow', this.activePage);
|
||||
this._prepareTransition();
|
||||
this.setTranslate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
$.fn.view = function(options) {
|
||||
var self = this[0];
|
||||
var viewApi = null;
|
||||
var id = self.getAttribute('data-view');
|
||||
if (!id) {
|
||||
id = ++$.uuid;
|
||||
$.data[id] = viewApi = new View(self, options);
|
||||
self.setAttribute('data-view', id);
|
||||
} else {
|
||||
viewApi = $.data[id];
|
||||
}
|
||||
return viewApi;
|
||||
}
|
||||
})(mui, window);
|
||||
@@ -0,0 +1,213 @@
|
||||
/*分页插件*/
|
||||
var Pagination = {
|
||||
|
||||
showPageCount: 7,
|
||||
|
||||
init: function (obj, callback,topFlag) {
|
||||
this.bindListener(obj, callback,topFlag);
|
||||
},
|
||||
createHtml: function (pageIndex, recordCount, pageSize) {
|
||||
|
||||
var pageCount = Math.ceil(recordCount / pageSize); //总页数
|
||||
var showPageCount = this.showPageCount;
|
||||
var MaxCount = 10000000000;
|
||||
var HalfPageCount = (showPageCount + 1) / 2;
|
||||
var html = [];
|
||||
|
||||
if (pageCount > MaxCount) {
|
||||
pageCount = MaxCount;
|
||||
}
|
||||
if (pageIndex > pageCount - 1) {
|
||||
pageIndex = pageCount - 1;
|
||||
}
|
||||
html.push("<span class=\"total\">共" + recordCount + "条</span>");
|
||||
if (pageIndex > 0) {
|
||||
html.push("<span class=\"previous\"><a href=\"javascript:;\" page= " + (pageIndex - 1) + " data-rec=\"上一页\"></a></span>");
|
||||
}
|
||||
else {
|
||||
html.push("<span class=\"disable previous\"></span>");
|
||||
}
|
||||
if (pageCount <= showPageCount) {
|
||||
for (var i = 0; i < pageCount; i++) {
|
||||
if (pageIndex == i) {
|
||||
html.push("<span class=\"current num\">" + (i + 1) + "</span>");
|
||||
}
|
||||
else {
|
||||
html.push("<span class=\"num\"><a href=\"javascript:;\" page=" + i + ">" + (i + 1) + "</a></span>");
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (pageIndex < HalfPageCount) {
|
||||
for (var i = 0; i < showPageCount - 1; i++) {
|
||||
if (pageIndex == i) {
|
||||
html.push("<span class=\"current num\">" + (i + 1) + "</span>");
|
||||
}
|
||||
else {
|
||||
html.push("<span class=\"num\"><a href=\"javascript:;\" page=" + i + ">" + (i + 1) + "</a></span>");
|
||||
}
|
||||
}
|
||||
|
||||
html.push("<span class=\"dots\">...</span>");
|
||||
html.push("<span class=\"num\"><a href=\"javascript:;\" page=" + (pageCount - 1) + ">" + pageCount + "</a></span>");
|
||||
}
|
||||
else if (pageIndex >= pageCount - HalfPageCount - 1) {
|
||||
html.push("<span class=\"num\"><a href=\"javascript:;\" page='0'>" + 1 + "</a></span>");
|
||||
html.push("<span class=\"dots\">...</span>");
|
||||
for (var i = pageCount - showPageCount + 1; i < pageCount; i++) {
|
||||
if (pageIndex == i) {
|
||||
html.push("<span class=\"current num\">" + (i + 1) + "</span>");
|
||||
}
|
||||
else {
|
||||
html.push("<span class=\"num\"><a href=\"javascript:;\" page=" + i + ">" + (i + 1) + "</a></span>");
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
html.push("<span class=\"num\"><a href=\"javascript:;\" page=0>" + 1 + "</a></span>");
|
||||
html.push("<span class=\"dots\">...</span>");
|
||||
|
||||
for (var i = pageIndex - HalfPageCount / 2; i <= pageIndex + HalfPageCount / 2; i++) {
|
||||
if (pageIndex == i) {
|
||||
html.push("<span class=\"current num\">" + (i + 1) + "</span>");
|
||||
}
|
||||
else {
|
||||
html.push("<span class=\"num\"><a href=\"javascript:;\" page=" + i + ">" + (i + 1) + "</a></span>");
|
||||
}
|
||||
}
|
||||
html.push("<span class=\"dots\">...</span>");
|
||||
html.push("<span class=\"num\"><a href=\"javascript:;\" page =" + (pageCount - 1) + ">" + pageCount + "</a></span>");
|
||||
}
|
||||
|
||||
if (pageIndex < pageCount - 1) {
|
||||
html.push("<span class=\"next\"><a href=\"javascript:;\" page=" + (pageIndex + 1) + " data-rec=\"下一页\"></a></span>");
|
||||
}
|
||||
else {
|
||||
html.push("<span class=\"disable next\"></span>");
|
||||
}
|
||||
|
||||
// html.push("<span class=\"total\">每页" + pageSize + "条</span>");
|
||||
html.push("<span class=\"total total_page\">共" + pageCount + "页</span>");
|
||||
html.push("<span class=\"page_jump\">到</span><input id='pageInput' class='pageInput' oldpage='' maxlength='" + pageCount + "' type='text' ><span class=\"page_jump\">页</span><button type='button' id='pagebtn' class='pagebtn'>确定</button>");
|
||||
|
||||
// html.push("<script>pagination(" + pageCount + ",$('#pageInput'), $('#pagebtn'));</script>");
|
||||
return html.join("");
|
||||
},
|
||||
|
||||
bindListener: function (obj, callback,topFlag) {
|
||||
var topFlag = topFlag || true;
|
||||
obj.on("click", "a", function () {
|
||||
if (typeof callback === "function") {
|
||||
var index = $(this).attr("page");
|
||||
callback(parseInt(index));
|
||||
}
|
||||
if(topFlag){
|
||||
$(window).scrollTop(0);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
obj.on("click", "button", function () {
|
||||
var pageInput = obj.find('input');
|
||||
if (typeof callback === "function") {
|
||||
var index = pageInput.val();
|
||||
if (index == '') {
|
||||
pageInput.focus();
|
||||
return false;
|
||||
// index = 1;
|
||||
}
|
||||
callback(parseInt(index) - 1);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// var pageButton = $("#pageButton");
|
||||
|
||||
obj.on("keyup", "input", function (e) {
|
||||
|
||||
switch (e.keyCode) {
|
||||
case 37:
|
||||
break;
|
||||
case 38:
|
||||
break;
|
||||
case 39:
|
||||
break;
|
||||
case 40:
|
||||
break;
|
||||
case 13:
|
||||
changePage();
|
||||
break;
|
||||
case 8:
|
||||
$(e.target).attr('oldpage', $(e.target).val());
|
||||
break;
|
||||
case 46:
|
||||
$(e.target).attr('oldpage', $(e.target).val());
|
||||
break;
|
||||
default :
|
||||
validPage();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
//分页
|
||||
function changePage() {
|
||||
var pageInput = obj.find('input');
|
||||
var page = pageInput.val();
|
||||
var maxPage = parseInt(obj.find(".total_page").html().substring(1));
|
||||
var pattern = new RegExp("^[1-9]\\d{0," + maxPage.toString().length + "}$");
|
||||
if (page.trim() == "") {
|
||||
pageInput.focus();
|
||||
return;
|
||||
}
|
||||
if (pattern.test(page)) {
|
||||
page = parseInt(page);
|
||||
maxPage = parseInt(maxPage);
|
||||
if (page > maxPage || page < 0) {
|
||||
pageInput.val("").focus();
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
|
||||
pageInput.val("").focus();
|
||||
return;
|
||||
}
|
||||
callback(parseInt(page) - 1);
|
||||
}
|
||||
|
||||
//页码校验v2
|
||||
function validPage() {
|
||||
var pageInput = obj.find('input');
|
||||
|
||||
var totalPageHtml = obj.find(".total_page").html();
|
||||
var maxPage = parseInt(totalPageHtml.substring(1, totalPageHtml.length - 1));
|
||||
|
||||
var page = pageInput.val();
|
||||
var pattern = /^[0-9]+$/;
|
||||
var oldpage = pageInput.attr("oldpage") || '';
|
||||
if (page.trim() == "") {
|
||||
pageInput.val("");
|
||||
return;
|
||||
}
|
||||
if (!pattern.test(page)) {
|
||||
pageInput.val(oldpage);
|
||||
return;
|
||||
}
|
||||
var pageInt = parseInt(page);
|
||||
if (page.substr(0, 1) == '0') {
|
||||
pageInput.val(pageInt);
|
||||
}
|
||||
if (pageInt == 0) {
|
||||
pageInput.val('');
|
||||
return;
|
||||
}
|
||||
if (pageInt > parseInt(maxPage)) {
|
||||
pageInput.val(page.substr(0, page.length - 1));
|
||||
return;
|
||||
}
|
||||
pageInput.attr('oldpage', pageInput.val());
|
||||
}
|
||||
},
|
||||
Page: function (obj, pageIndex, recordCount, pageSize) {
|
||||
obj.empty();
|
||||
obj.html(this.createHtml(pageIndex, recordCount, pageSize));
|
||||
}
|
||||
|
||||
};
|
||||
새 이슈에서 참조
사용자 차단