You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1527 lines
43 KiB
1527 lines
43 KiB
/**
|
|
* User: jeakeyliang
|
|
* Date: 14-08-22
|
|
* Time: 下午9:20
|
|
*/
|
|
|
|
|
|
;(function($){
|
|
var data = {}, dataAttr = $.fn.data, camelize = $.camelCase,
|
|
exp = $.expando = 'Zepto' + (+new Date()), emptyArray = []
|
|
|
|
// Get value from node:
|
|
// 1. first try key as given,
|
|
// 2. then try camelized key,
|
|
// 3. fall back to reading "data-*" attribute.
|
|
function getData(node, name) {
|
|
var id = node[exp], store = id && data[id]
|
|
if (name === undefined) return store || setData(node)
|
|
else {
|
|
if (store) {
|
|
if (name in store) return store[name]
|
|
var camelName = camelize(name)
|
|
if (camelName in store) return store[camelName]
|
|
}
|
|
return dataAttr.call($(node), name)
|
|
}
|
|
}
|
|
|
|
// Store value under camelized key on node
|
|
function setData(node, name, value) {
|
|
var id = node[exp] || (node[exp] = ++$.uuid),
|
|
store = data[id] || (data[id] = attributeData(node))
|
|
if (name !== undefined) store[camelize(name)] = value
|
|
return store
|
|
}
|
|
|
|
// Read all "data-*" attributes from a node
|
|
function attributeData(node) {
|
|
var store = {}
|
|
$.each(node.attributes || emptyArray, function(i, attr){
|
|
if (attr.name.indexOf('data-') == 0)
|
|
store[camelize(attr.name.replace('data-', ''))] =
|
|
$.zepto.deserializeValue(attr.value)
|
|
})
|
|
return store
|
|
}
|
|
|
|
$.fn.data = function(name, value) {
|
|
return value === undefined ?
|
|
// set multiple values via object
|
|
$.isPlainObject(name) ?
|
|
this.each(function(i, node){
|
|
$.each(name, function(key, value){ setData(node, key, value) })
|
|
}) :
|
|
// get value from first element
|
|
(0 in this ? getData(this[0], name) : undefined) :
|
|
// set value on all elements
|
|
this.each(function(){ setData(this, name, value) })
|
|
}
|
|
|
|
$.fn.removeData = function(names) {
|
|
if (typeof names == 'string') names = names.split(/\s+/)
|
|
return this.each(function(){
|
|
var id = this[exp], store = id && data[id]
|
|
if (store) $.each(names || store, function(key){
|
|
delete store[names ? camelize(this) : key]
|
|
})
|
|
})
|
|
}
|
|
|
|
// Generate extended `remove` and `empty` functions
|
|
;['remove', 'empty'].forEach(function(methodName){
|
|
var origFn = $.fn[methodName]
|
|
$.fn[methodName] = function() {
|
|
var elements = this.find('*')
|
|
if (methodName === 'remove') elements = elements.add(this)
|
|
elements.removeData()
|
|
return origFn.call(this)
|
|
}
|
|
})
|
|
})(window.Zepto);
|
|
|
|
!function ($) {
|
|
var _private = {};
|
|
_private.cache = {};
|
|
$.tpl = function (str, data, env) {
|
|
// 判断str参数，如str为script标签的id，则取该标签的innerHTML，再递归调用自身
|
|
// 如str为HTML文本，则分析文本并构造渲染函数
|
|
var fn = !/[^\w\-\.:]/.test(str)
|
|
? _private.cache[str] = _private.cache[str] || this.get(document.getElementById(str).innerHTML)
|
|
: function (data, env) {
|
|
var i, variable = [], value = []; // variable数组存放变量名，对应data结构的成员变量；value数组存放各变量的值
|
|
for (i in data) {
|
|
variable.push(i);
|
|
value.push(data[i]);
|
|
}
|
|
return (new Function(variable, fn.code))
|
|
.apply(env || data, value); // 此处的new Function是由下面fn.code产生的渲染函数；执行后即返回渲染结果HTML
|
|
};
|
|
|
|
fn.code = fn.code || "var $parts=[]; $parts.push('"
|
|
+ str
|
|
.replace(/\\/g, '\\\\') // 处理模板中的\转义
|
|
.replace(/[\r\t\n]/g, " ") // 去掉换行符和tab符，将模板合并为一行
|
|
.split("<%").join("\t") // 将模板左标签<%替换为tab，起到分割作用
|
|
.replace(/(^|%>)[^\t]*/g, function(str) { return str.replace(/'/g, "\\'"); }) // 将模板中文本部分的单引号替换为\'
|
|
.replace(/\t=(.*?)%>/g, "',$1,'") // 将模板中<%= %>的直接数据引用（无逻辑代码）与两侧的文本用'和,隔开，同时去掉了左标签产生的tab符
|
|
.split("\t").join("');") // 将tab符（上面替换左标签产生）替换为'); 由于上一步已经把<%=产生的tab符去掉，因此这里实际替换的只有逻辑代码的左标签
|
|
.split("%>").join("$parts.push('") // 把剩下的右标签%>（逻辑代码的）替换为"$parts.push('"
|
|
+ "'); return $parts.join('');"; // 最后得到的就是一段JS代码，保留模板中的逻辑，并依次把模板中的常量和变量压入$parts数组
|
|
|
|
return data ? fn(data, env) : fn; // 如果传入了数据，则直接返回渲染结果HTML文本，否则返回一个渲染函数
|
|
};
|
|
$.adaptObject = function (element, defaults, option,template,plugin,pluginName) {
|
|
var $this= element;
|
|
|
|
if (typeof option != 'string'){
|
|
|
|
// 获得配置信息
|
|
var context=$.extend({}, defaults, typeof option == 'object' && option);
|
|
|
|
var isFromTpl=false;
|
|
// 如果传入script标签的选择器
|
|
if($.isArray($this) && $this.length && $($this)[0].nodeName.toLowerCase()=="script"){
|
|
// 根据模板获得对象并插入到body中
|
|
$this=$($.tpl($this[0].innerHTML,context)).appendTo("body");
|
|
isFromTpl=true;
|
|
}
|
|
// 如果传入模板字符串
|
|
else if($.isArray($this) && $this.length && $this.selector== ""){
|
|
// 根据模板获得对象并插入到body中
|
|
$this=$($.tpl($this[0].outerHTML,context)).appendTo("body");
|
|
isFromTpl=true;
|
|
}
|
|
// 如果通过$.dialog()的方式调用
|
|
else if(!$.isArray($this)){
|
|
// 根据模板获得对象并插入到body中
|
|
$this=$($.tpl(template,context)).appendTo("body");
|
|
isFromTpl=true;
|
|
}
|
|
|
|
}
|
|
|
|
return $this.each(function () {
|
|
|
|
var el = $(this);
|
|
// 读取对象缓存
|
|
|
|
var data = el.data('fz.'+pluginName);
|
|
|
|
|
|
|
|
if (!data) el.data('fz.'+pluginName,
|
|
(data = new plugin(this,$.extend({}, defaults, typeof option == 'object' && option),isFromTpl)
|
|
|
|
));
|
|
|
|
if (typeof option == 'string') data[option]();
|
|
})
|
|
}
|
|
}(window.Zepto);
|
|
|
|
|
|
|
|
/**
|
|
* User: jeakeyliang
|
|
* Date: 14-08-22
|
|
* Time: 下午9:20
|
|
*/
|
|
|
|
!function($){
|
|
|
|
// 默认模板
|
|
var _dialogTpl='<div class="ui-dialog">'+
|
|
'<div class="ui-dialog-cnt">'+
|
|
'<div class="ui-dialog-bd">'+
|
|
'<div>'+
|
|
'<h4><%=title%></h4>'+
|
|
'<div><%=content%></div></div>'+
|
|
'</div>'+
|
|
'<div class="ui-dialog-ft ui-btn-group">'+
|
|
'<% for (var i = 0; i < button.length; i++) { %>' +
|
|
'<% if (i == select) { %>' +
|
|
'<button type="button" data-role="button" class="select" id="dialogButton<%=i%>"><%=button[i]%></button>' +
|
|
'<% } else { %>' +
|
|
'<button type="button" data-role="button" id="dialogButton<%=i%>"><%=button[i]%></div>' +
|
|
'<% } %>' +
|
|
'<% } %>' +
|
|
'</div>'+
|
|
'</div>'+
|
|
'</div>';
|
|
// 默认参数
|
|
var defaults={
|
|
title:'',
|
|
content:'',
|
|
button:['确认'],
|
|
select:0,
|
|
allowScroll:false,
|
|
callback:function(){}
|
|
}
|
|
// 构造函数
|
|
var Dialog = function (el,option,isFromTpl) {
|
|
|
|
this.option=$.extend(defaults,option);
|
|
this.element=$(el);
|
|
this._isFromTpl=isFromTpl;
|
|
this.button=$(el).find('[data-role="button"]');
|
|
this._bindEvent();
|
|
this.toggle();
|
|
}
|
|
Dialog.prototype={
|
|
_bindEvent:function(){
|
|
var self=this;
|
|
self.button.on("tap",function(){
|
|
var index=$(self.button).index($(this));
|
|
// self.option.callback("button",index);
|
|
var e=$.Event("dialog:action");
|
|
e.index=index;
|
|
self.element.trigger(e);
|
|
self.hide.apply(self);
|
|
});
|
|
},
|
|
toggle:function(){
|
|
if(this.element.hasClass("show")){
|
|
this.hide();
|
|
}else{
|
|
this.show();
|
|
}
|
|
},
|
|
show:function(){
|
|
var self=this;
|
|
// self.option.callback("show");
|
|
self.element.trigger($.Event("dialog:show"));
|
|
self.element.addClass("show");
|
|
this.option.allowScroll && self.element.on("touchmove" , _stopScroll);
|
|
|
|
},
|
|
hide :function () {
|
|
var self=this;
|
|
// self.option.callback("hide");
|
|
self.element.trigger($.Event("dialog:hide"));
|
|
self.element.off("touchmove" , _stopScroll);
|
|
self.element.removeClass("show");
|
|
|
|
self._isFromTpl&&self.element.remove();
|
|
}
|
|
}
|
|
// 禁止冒泡
|
|
function _stopScroll(){
|
|
return false;
|
|
}
|
|
function Plugin(option) {
|
|
|
|
return $.adaptObject(this, defaults, option,_dialogTpl,Dialog,"dialog");
|
|
}
|
|
$.fn.dialog=$.dialog= Plugin;
|
|
}(window.Zepto)
|
|
|
|
|
|
|
|
/**
|
|
* User: jeakeyliang
|
|
* Date: 14-11-07
|
|
* Time: 下午9:20
|
|
*/
|
|
|
|
!function($){
|
|
|
|
// 默认模板
|
|
var _loadingTpl='<div class="ui-loading-block show">'+
|
|
'<div class="ui-loading-cnt">'+
|
|
'<i class="ui-loading-bright"></i>'+
|
|
'<p><%=content%></p>'+
|
|
'</div>'+
|
|
'</div>';
|
|
|
|
// 默认参数
|
|
var defaults={
|
|
content:'加载中...'
|
|
}
|
|
// 构造函数
|
|
var Loading = function (el,option,isFromTpl) {
|
|
var self=this;
|
|
this.element=$(el);
|
|
this._isFromTpl=isFromTpl;
|
|
this.option=$.extend(defaults,option);
|
|
this.show();
|
|
}
|
|
Loading.prototype={
|
|
show:function(){
|
|
var e=$.Event('loading:show');
|
|
this.element.trigger(e);
|
|
this.element.show();
|
|
|
|
},
|
|
hide :function () {
|
|
var e=$.Event('loading:hide');
|
|
this.element.trigger(e);
|
|
this.element.remove();
|
|
}
|
|
}
|
|
function Plugin(option) {
|
|
|
|
return $.adaptObject(this, defaults, option,_loadingTpl,Loading,"loading");
|
|
}
|
|
$.fn.loading=$.loading= Plugin;
|
|
}(window.Zepto)
|
|
|
|
|
|
|
|
;(function ($) {
|
|
|
|
var rAF = window.requestAnimationFrame ||
|
|
window.webkitRequestAnimationFrame ||
|
|
window.mozRequestAnimationFrame ||
|
|
window.oRequestAnimationFrame ||
|
|
window.msRequestAnimationFrame ||
|
|
function (callback) { window.setTimeout(callback, 1000 / 60); };
|
|
|
|
|
|
/*
|
|
* 工具类
|
|
*/
|
|
var utils = (function () {
|
|
|
|
var me = {};
|
|
|
|
var _elementStyle = document.createElement('div').style;
|
|
|
|
var _vendor = (function () {
|
|
var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
|
|
transform,
|
|
i = 0,
|
|
l = vendors.length;
|
|
|
|
for ( ; i < l; i++ ) {
|
|
transform = vendors[i] + 'ransform';
|
|
if ( transform in _elementStyle ) return vendors[i].substr(0, vendors[i].length-1);
|
|
}
|
|
return false;
|
|
})();
|
|
|
|
function _prefixStyle (style) {
|
|
if ( _vendor === false ) return false;
|
|
if ( _vendor === '' ) return style;
|
|
return _vendor + style.charAt(0).toUpperCase() + style.substr(1);
|
|
}
|
|
|
|
|
|
me.getTime = Date.now || function getTime () { return new Date().getTime(); };
|
|
|
|
|
|
me.extend = function (target, obj) {
|
|
for ( var i in obj ) {
|
|
target[i] = obj[i];
|
|
}
|
|
};
|
|
|
|
|
|
me.addEvent = function (el, type, fn, capture) {
|
|
el.addEventListener(type, fn, !!capture);
|
|
};
|
|
|
|
|
|
me.removeEvent = function (el, type, fn, capture) {
|
|
el.removeEventListener(type, fn, !!capture);
|
|
};
|
|
|
|
|
|
me.prefixPointerEvent = function (pointerEvent) {
|
|
return window.MSPointerEvent ?
|
|
'MSPointer' + pointerEvent.charAt(9).toUpperCase() + pointerEvent.substr(10):
|
|
pointerEvent;
|
|
};
|
|
|
|
|
|
/**
|
|
* 根据一定时间内的滑动距离计算出最终停止距离和时间。
|
|
* @param current：当前滑动位置
|
|
* @param start：touchStart 时候记录的开始位置，但是在touchmove时候可能被重写
|
|
* @param time：touchstart 到手指离开时候经历的时间，同样可能被touchmove重写
|
|
* @param lowerMargin：可移动的最大距离，这个一般为计算得出 this.wrapperHeight - this.scrollerHeight
|
|
* @param wrapperSize：如果有边界距离的话就是可拖动，不然碰到0的时候便停止
|
|
* @param deceleration：匀减速
|
|
* @returns {{destination: number, duration: number}}
|
|
*/
|
|
me.momentum = function (current, start, time, lowerMargin, wrapperSize, deceleration) {
|
|
var distance = current - start,
|
|
speed = Math.abs(distance) / time,
|
|
destination,
|
|
duration;
|
|
|
|
deceleration = deceleration === undefined ? 0.0006 : deceleration;
|
|
|
|
destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
|
|
duration = speed / deceleration;
|
|
|
|
if ( destination < lowerMargin ) {
|
|
destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
|
|
distance = Math.abs(destination - current);
|
|
duration = distance / speed;
|
|
} else if ( destination > 0 ) {
|
|
destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
|
|
distance = Math.abs(current) + destination;
|
|
duration = distance / speed;
|
|
}
|
|
|
|
return {
|
|
destination: Math.round(destination),
|
|
duration: duration
|
|
};
|
|
};
|
|
|
|
var _transform = _prefixStyle('transform');
|
|
|
|
me.extend(me, {
|
|
hasTransform: _transform !== false,
|
|
hasPerspective: _prefixStyle('perspective') in _elementStyle,
|
|
hasTouch: 'ontouchstart' in window,
|
|
hasPointer: window.PointerEvent || window.MSPointerEvent, // IE10 is prefixed
|
|
hasTransition: _prefixStyle('transition') in _elementStyle
|
|
});
|
|
|
|
// This should find all Android browsers lower than build 535.19 (both stock browser and webview)
|
|
me.isBadAndroid = /Android /.test(window.navigator.appVersion) && !(/Chrome\/\d/.test(window.navigator.appVersion));
|
|
|
|
me.extend(me.style = {}, {
|
|
transform: _transform,
|
|
transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
|
|
transitionDuration: _prefixStyle('transitionDuration'),
|
|
transitionDelay: _prefixStyle('transitionDelay'),
|
|
transformOrigin: _prefixStyle('transformOrigin'),
|
|
transitionProperty: _prefixStyle('transitionProperty')
|
|
});
|
|
|
|
|
|
me.offset = function (el) {
|
|
var left = -el.offsetLeft,
|
|
top = -el.offsetTop;
|
|
|
|
while (el = el.offsetParent) {
|
|
left -= el.offsetLeft;
|
|
top -= el.offsetTop;
|
|
}
|
|
return {
|
|
left: left,
|
|
top: top
|
|
};
|
|
};
|
|
|
|
|
|
/*
|
|
* 配合 config 里面的 preventDefaultException 属性
|
|
* 不对匹配到的 element 使用 e.preventDefault()
|
|
* 默认阻止所有事件的冒泡，包括 click 或 tap
|
|
*/
|
|
me.preventDefaultException = function (el, exceptions) {
|
|
for ( var i in exceptions ) {
|
|
if ( exceptions[i].test(el[i]) ) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|
|
|
|
me.extend(me.eventType = {}, {
|
|
touchstart: 1,
|
|
touchmove: 1,
|
|
touchend: 1,
|
|
|
|
mousedown: 2,
|
|
mousemove: 2,
|
|
mouseup: 2,
|
|
|
|
pointerdown: 3,
|
|
pointermove: 3,
|
|
pointerup: 3,
|
|
|
|
MSPointerDown: 3,
|
|
MSPointerMove: 3,
|
|
MSPointerUp: 3
|
|
});
|
|
|
|
|
|
me.extend(me.ease = {}, {
|
|
quadratic: {
|
|
style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
|
fn: function (k) {
|
|
return k * ( 2 - k );
|
|
}
|
|
},
|
|
circular: {
|
|
style: 'cubic-bezier(0.1, 0.57, 0.1, 1)', // Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 1)
|
|
fn: function (k) {
|
|
return Math.sqrt( 1 - ( --k * k ) );
|
|
}
|
|
},
|
|
back: {
|
|
style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
|
|
fn: function (k) {
|
|
var b = 4;
|
|
return ( k = k - 1 ) * k * ( ( b + 1 ) * k + b ) + 1;
|
|
}
|
|
},
|
|
bounce: {
|
|
style: '',
|
|
fn: function (k) {
|
|
if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {
|
|
return 7.5625 * k * k;
|
|
} else if ( k < ( 2 / 2.75 ) ) {
|
|
return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
|
|
} else if ( k < ( 2.5 / 2.75 ) ) {
|
|
return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
|
|
} else {
|
|
return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
|
|
}
|
|
}
|
|
},
|
|
elastic: {
|
|
style: '',
|
|
fn: function (k) {
|
|
var f = 0.22,
|
|
e = 0.4;
|
|
|
|
if ( k === 0 ) { return 0; }
|
|
if ( k == 1 ) { return 1; }
|
|
|
|
return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 );
|
|
}
|
|
}
|
|
});
|
|
|
|
me.tap = function (e, eventName) {
|
|
var ev = document.createEvent('Event');
|
|
ev.initEvent(eventName, true, true);
|
|
ev.pageX = e.pageX;
|
|
ev.pageY = e.pageY;
|
|
e.target.dispatchEvent(ev);
|
|
};
|
|
|
|
me.click = function (e) {
|
|
var target = e.target,
|
|
ev;
|
|
if ( !(/(SELECT|INPUT|TEXTAREA)/i).test(target.tagName) ) {
|
|
ev = document.createEvent('MouseEvents');
|
|
ev.initMouseEvent('click', true, true, e.view, 1,
|
|
target.screenX, target.screenY, target.clientX, target.clientY,
|
|
e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
|
|
0, null);
|
|
|
|
ev._constructed = true;
|
|
target.dispatchEvent(ev);
|
|
}
|
|
};
|
|
|
|
return me;
|
|
})();
|
|
|
|
|
|
|
|
/*
|
|
* 构造函数
|
|
*/
|
|
function Scroll(el, options) {
|
|
|
|
this.wrapper = typeof el == 'string' ? $(el)[0] : el;
|
|
|
|
this.options = {
|
|
startX: 0, // 初始化 X 坐标
|
|
startY: 0, // 初始化 Y 坐标
|
|
scrollY: true, // 竖向滚动
|
|
scrollX: false, // 默认非水平
|
|
directionLockThreshold: 5, // 确定滚动方向的阈值
|
|
momentum: true, // 是否开启惯性滚动
|
|
|
|
duration: 300, // transition 过渡时间
|
|
|
|
bounce: true, // 是否有反弹动画
|
|
bounceTime: 600, // 反弹动画时间
|
|
bounceEasing: '', // 反弹动画类型：'circular'(default), 'quadratic', 'back', 'bounce', 'elastic'
|
|
|
|
preventDefault: true, // 是否阻止默认滚动事件（和冒泡有区别）
|
|
eventPassthrough: true, // 穿透，是否触发原生滑动（取值 true、false、vertical、horizental）
|
|
|
|
freeScroll: false, // 任意方向的滚动。若 scrollX 和 scrollY 同时开启，则相当于 freeScroll
|
|
|
|
bindToWrapper : true, // 事件是否绑定到 wrapper 元素上，否则大部分绑定到 window（若存在嵌套，则绑定在元素上最好）
|
|
resizePolling : 60, // resize 时候隔 60ms 就执行 refresh 方法重新获取位置信息(事件节流)
|
|
|
|
disableMouse : false, // 是否禁用鼠标
|
|
disableTouch : false, // 是否禁用touch事件
|
|
disablePointer : false, // 是否禁用win系统的pointer事件
|
|
|
|
tap: true, // 是否模拟 tap 事件
|
|
click: false, // 是否模拟点击事件（false 则使用原生click事件）
|
|
|
|
preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }, // 当遇到正则内的元素则不阻止冒泡
|
|
|
|
HWCompositing: true, // Hardware acceleration
|
|
useTransition: true, // Transition || requestAnimationFrame
|
|
useTransform: true // Translate || Left/Top
|
|
};
|
|
|
|
|
|
for ( var i in options ) {
|
|
this.options[i] = options[i];
|
|
}
|
|
|
|
|
|
// scroller
|
|
// ==================================
|
|
|
|
if (!this.options.role && this.options.scrollX === false) {
|
|
this.options.eventPassthrough = 'horizontal'; // 竖直滚动的 scroller 不拦截横向原生滚动
|
|
}
|
|
|
|
// slide
|
|
// ==================================
|
|
|
|
if (this.options.role === 'slider') {
|
|
|
|
this.options.scrollX = true;
|
|
this.options.scrollY = false;
|
|
this.options.momentum = false;
|
|
|
|
this.scroller = $('.ui-slider-content')[0];
|
|
$(this.scroller.children[0]).addClass('current');
|
|
|
|
this.currentPage = 0;
|
|
this.count = this.scroller.children.length;
|
|
|
|
this.scroller.style.width = this.count+"00%";
|
|
|
|
this.itemWidth = this.scroller.children[0].clientWidth;
|
|
this.scrollWidth = this.itemWidth * this.count;
|
|
|
|
|
|
|
|
if (this.options.indicator) {
|
|
var temp = '<ul class="ui-slider-indicators">';
|
|
|
|
for (var i=1; i<=this.count; i++) {
|
|
if (i===1) {
|
|
temp += '<li class="current">'+i+'</li>';
|
|
}
|
|
else {
|
|
temp += '<li>'+i+'</li>';
|
|
}
|
|
}
|
|
temp += '</ul>';
|
|
$(this.wrapper).append(temp);
|
|
this.indicator = $('.ui-slider-indicators')[0];
|
|
}
|
|
}
|
|
|
|
|
|
// tab
|
|
// ==================================
|
|
|
|
else if (this.options.role === 'tab') {
|
|
|
|
this.options.scrollX = true;
|
|
this.options.scrollY = false;
|
|
this.options.momentum = false;
|
|
|
|
this.scroller = $('.ui-tab-content')[0];
|
|
this.nav = $('.ui-tab-nav')[0];
|
|
|
|
$(this.scroller.children[0]).addClass('current');
|
|
$(this.nav.children[0]).addClass('current');
|
|
|
|
this.currentPage = 0;
|
|
this.count = this.scroller.children.length;
|
|
|
|
this.scroller.style.width = this.count+"00%";
|
|
|
|
this.itemWidth = this.scroller.children[0].clientWidth;
|
|
this.scrollWidth = this.itemWidth * this.count;
|
|
|
|
|
|
}
|
|
else {
|
|
this.scroller = this.wrapper.children[0];
|
|
}
|
|
this.scrollerStyle = this.scroller.style;
|
|
|
|
|
|
this.translateZ = utils.hasPerspective && this.options.HWCompositing ? ' translateZ(0)' : '';
|
|
this.options.useTransition = utils.hasTransition && this.options.useTransition;
|
|
this.options.useTransform = utils.hasTransform && this.options.useTransform;
|
|
this.options.eventPassthrough = this.options.eventPassthrough === true ? 'vertical' : this.options.eventPassthrough;
|
|
this.options.preventDefault = !this.options.eventPassthrough && this.options.preventDefault;
|
|
// If you want eventPassthrough I have to lock one of the axes
|
|
this.options.scrollX = this.options.eventPassthrough == 'horizontal' ? false : this.options.scrollX;
|
|
this.options.scrollY = this.options.eventPassthrough == 'vertical' ? false : this.options.scrollY;
|
|
// With eventPassthrough we also need lockDirection mechanism
|
|
this.options.freeScroll = this.options.freeScroll && !this.options.eventPassthrough;
|
|
this.options.directionLockThreshold = this.options.eventPassthrough ? 0 : this.options.directionLockThreshold;
|
|
this.options.bounceEasing = typeof this.options.bounceEasing == 'string' ? utils.ease[this.options.bounceEasing] || utils.ease.circular : this.options.bounceEasing;
|
|
this.options.resizePolling = this.options.resizePolling === undefined ? 60 : this.options.resizePolling;
|
|
|
|
if (this.options.tap === true) {
|
|
this.options.tap = 'tap';
|
|
}
|
|
if (this.options.useTransform === false) {
|
|
this.scroller.style.position = 'relative';
|
|
}
|
|
|
|
// Some defaults
|
|
this.x = 0;
|
|
this.y = 0;
|
|
this.directionX = 0;
|
|
this.directionY = 0;
|
|
this._events = {};
|
|
|
|
this._init(); // 绑定各种事件
|
|
this.refresh();
|
|
|
|
this.scrollTo(this.options.startX, this.options.startY);
|
|
this.enable();
|
|
|
|
// 自动播放
|
|
if (this.options.autoplay) {
|
|
var context = this;
|
|
this.options.interval = this.options.interval || 2000;
|
|
this.options.flag = setTimeout(function(){
|
|
context._autoplay.apply(context)
|
|
}, context.options.interval);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
Scroll.prototype = {
|
|
|
|
_init: function () {
|
|
this._initEvents();
|
|
},
|
|
|
|
_initEvents: function (remove) {
|
|
var eventType = remove ? utils.removeEvent : utils.addEvent,
|
|
target = this.options.bindToWrapper ? this.wrapper : window;
|
|
|
|
/*
|
|
* 给 addEventListener 传递 this
|
|
* 程序会自动找到 handleEvent 方法作为回调函数
|
|
*/
|
|
eventType(window, 'orientationchange', this);
|
|
eventType(window, 'resize', this);
|
|
|
|
if ( this.options.click ) {
|
|
eventType(this.wrapper, 'click', this, true);
|
|
}
|
|
|
|
if ( !this.options.disableMouse ) {
|
|
eventType(this.wrapper, 'mousedown', this);
|
|
eventType(target, 'mousemove', this);
|
|
eventType(target, 'mousecancel', this);
|
|
eventType(target, 'mouseup', this);
|
|
}
|
|
|
|
if ( utils.hasPointer && !this.options.disablePointer ) {
|
|
eventType(this.wrapper, utils.prefixPointerEvent('pointerdown'), this);
|
|
eventType(target, utils.prefixPointerEvent('pointermove'), this);
|
|
eventType(target, utils.prefixPointerEvent('pointercancel'), this);
|
|
eventType(target, utils.prefixPointerEvent('pointerup'), this);
|
|
}
|
|
|
|
if ( utils.hasTouch && !this.options.disableTouch ) {
|
|
eventType(this.wrapper, 'touchstart', this);
|
|
eventType(target, 'touchmove', this);
|
|
eventType(target, 'touchcancel', this);
|
|
eventType(target, 'touchend', this);
|
|
}
|
|
|
|
eventType(this.scroller, 'transitionend', this);
|
|
eventType(this.scroller, 'webkitTransitionEnd', this);
|
|
eventType(this.scroller, 'oTransitionEnd', this);
|
|
eventType(this.scroller, 'MSTransitionEnd', this);
|
|
|
|
// tab
|
|
// =============================
|
|
if (this.options.role === 'tab') {
|
|
eventType(this.nav, 'touchend', this);
|
|
eventType(this.nav, 'mouseup', this);
|
|
eventType(this.nav, 'pointerup', this);
|
|
}
|
|
},
|
|
|
|
|
|
refresh: function () {
|
|
var rf = this.wrapper.offsetHeight; // Force reflow
|
|
|
|
// http://jsfiddle.net/y8Y32/25/
|
|
// clientWidth = content + padding
|
|
this.wrapperWidth = this.wrapper.clientWidth;
|
|
this.wrapperHeight = this.wrapper.clientHeight;
|
|
|
|
|
|
// 添加 wrapper 的 padding 值到 scroller 身上，更符合使用预期
|
|
var matrix = window.getComputedStyle(this.wrapper, null);
|
|
var pt = matrix['padding-top'].replace(/[^-\d.]/g, ''),
|
|
pb = matrix['padding-bottom'].replace(/[^-\d.]/g, ''),
|
|
pl = matrix['padding-left'].replace(/[^-\d.]/g, ''),
|
|
pr = matrix['padding-right'].replace(/[^-\d.]/g, '');
|
|
|
|
var matrix2 = window.getComputedStyle(this.scroller, null);
|
|
var mt2 = matrix2['margin-top'].replace(/[^-\d.]/g, ''),
|
|
mb2 = matrix2['margin-bottom'].replace(/[^-\d.]/g, ''),
|
|
ml2 = matrix2['margin-left'].replace(/[^-\d.]/g, ''),
|
|
mr2 = matrix2['margin-right'].replace(/[^-\d.]/g, '');
|
|
|
|
|
|
// offsetWidth = content + padding + border
|
|
this.scrollerWidth = this.scroller.offsetWidth+parseInt(pl)+parseInt(pr)+parseInt(ml2)+parseInt(mr2);
|
|
this.scrollerHeight = this.scroller.offsetHeight+parseInt(pt)+parseInt(pb)+parseInt(mt2)+parseInt(mb2);
|
|
|
|
|
|
// slide
|
|
// ==================================
|
|
if (this.options.role === 'slider' || this.options.role === 'tab') {
|
|
this.itemWidth = this.scroller.children[0].clientWidth;
|
|
this.scrollWidth = this.itemWidth * this.count;
|
|
this.scrollerWidth = this.scrollWidth;
|
|
}
|
|
|
|
this.maxScrollX = this.wrapperWidth - this.scrollerWidth;
|
|
this.maxScrollY = this.wrapperHeight - this.scrollerHeight;
|
|
|
|
this.hasHorizontalScroll = this.options.scrollX && this.maxScrollX < 0;
|
|
this.hasVerticalScroll = this.options.scrollY && this.maxScrollY < 0;
|
|
|
|
if ( !this.hasHorizontalScroll ) {
|
|
this.maxScrollX = 0;
|
|
this.scrollerWidth = this.wrapperWidth;
|
|
}
|
|
|
|
if ( !this.hasVerticalScroll ) {
|
|
this.maxScrollY = 0;
|
|
this.scrollerHeight = this.wrapperHeight;
|
|
}
|
|
|
|
this.endTime = 0;
|
|
this.directionX = 0;
|
|
this.directionY = 0;
|
|
|
|
this.wrapperOffset = utils.offset(this.wrapper);
|
|
this.resetPosition();
|
|
},
|
|
|
|
|
|
handleEvent: function (e) {
|
|
switch ( e.type ) {
|
|
case 'touchstart':
|
|
case 'pointerdown':
|
|
case 'MSPointerDown':
|
|
case 'mousedown':
|
|
this._start(e);
|
|
break;
|
|
case 'touchmove':
|
|
case 'pointermove':
|
|
case 'MSPointerMove':
|
|
case 'mousemove':
|
|
this._move(e);
|
|
break;
|
|
case 'touchend':
|
|
case 'pointerup':
|
|
case 'MSPointerUp':
|
|
case 'mouseup':
|
|
case 'touchcancel':
|
|
case 'pointercancel':
|
|
case 'MSPointerCancel':
|
|
case 'mousecancel':
|
|
this._end(e);
|
|
break;
|
|
case 'orientationchange':
|
|
case 'resize':
|
|
this._resize();
|
|
break;
|
|
case 'transitionend':
|
|
case 'webkitTransitionEnd':
|
|
case 'oTransitionEnd':
|
|
case 'MSTransitionEnd':
|
|
this._transitionEnd(e);
|
|
break;
|
|
case 'wheel':
|
|
case 'DOMMouseScroll':
|
|
case 'mousewheel':
|
|
this._wheel(e);
|
|
break;
|
|
case 'keydown':
|
|
this._key(e);
|
|
break;
|
|
case 'click':
|
|
if ( !e._constructed ) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
break;
|
|
}
|
|
},
|
|
|
|
|
|
|
|
_start: function (e) {
|
|
|
|
if ( utils.eventType[e.type] != 1 ) { // 如果是鼠标点击，则只响应鼠标左键
|
|
if ( e.button !== 0 ) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
if ( !this.enabled || (this.initiated && utils.eventType[e.type] !== this.initiated) ) {
|
|
return;
|
|
}
|
|
|
|
// 如果 preventDefault === true 且 不是落后的安卓版本 且 不是需要过滤的 target 就阻止默认的行为
|
|
if ( this.options.preventDefault && !utils.isBadAndroid && !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
var point = e.touches ? e.touches[0] : e, // 检验是触摸事件对象还是鼠标事件对象
|
|
pos;
|
|
|
|
this.initiated = utils.eventType[e.type]; // 初始化事件类型（1：触摸，2：鼠标，3：pointer）
|
|
this.moved = false;
|
|
this.distX = 0;
|
|
this.distY = 0;
|
|
this.directionX = 0;
|
|
this.directionY = 0;
|
|
this.directionLocked = 0;
|
|
|
|
this._transitionTime();
|
|
this.startTime = utils.getTime();
|
|
|
|
// 定住正在滑动的 scroller，slider/tab 不这么做
|
|
if ( this.options.useTransition && this.isInTransition && this.options.role !== 'slider' && this.options.role !== 'tab') {
|
|
this.isInTransition = false;
|
|
pos = this.getComputedPosition();
|
|
this._translate(Math.round(pos.x), Math.round(pos.y));
|
|
}
|
|
// 场景：（没有使用 Transition 属性）
|
|
else if ( !this.options.useTransition && this.isAnimating ) {
|
|
this.isAnimating = false;
|
|
}
|
|
|
|
this.startX = this.x;
|
|
this.startY = this.y;
|
|
this.absStartX = this.x;
|
|
this.absStartY = this.y;
|
|
this.pointX = point.pageX;
|
|
this.pointY = point.pageY;
|
|
|
|
// throttle
|
|
// ======================
|
|
if (this.options.autoplay) {
|
|
var context = this;
|
|
|
|
clearTimeout(this.options.flag);
|
|
this.options.flag = setTimeout(function() {
|
|
context._autoplay.apply(context);
|
|
}, context.options.interval);
|
|
}
|
|
|
|
event.stopPropagation();
|
|
},
|
|
|
|
|
|
|
|
_move: function (e) {
|
|
|
|
if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) { // 如果事件类型和 touchstart 初始化的事件类型不一致，退出
|
|
return;
|
|
}
|
|
if ( this.options.preventDefault ) { // 这么做才能确保 Android 下 touchend 能被正常触发（需测试）
|
|
e.preventDefault();
|
|
}
|
|
var point = e.touches ? e.touches[0] : e,
|
|
deltaX = point.pageX - this.pointX,
|
|
deltaY = point.pageY - this.pointY,
|
|
timestamp = utils.getTime(),
|
|
newX, newY,
|
|
absDistX, absDistY;
|
|
|
|
this.pointX = point.pageX;
|
|
this.pointY = point.pageY;
|
|
|
|
this.distX += deltaX;
|
|
this.distY += deltaY;
|
|
absDistX = Math.abs(this.distX);
|
|
absDistY = Math.abs(this.distY);
|
|
|
|
|
|
// 如果在很长的时间内只移动了少于 10 像素的距离，那么不会触发惯性滚动
|
|
if ( timestamp - this.endTime > 300 && (absDistX < 10 && absDistY < 10) ) {
|
|
return;
|
|
}
|
|
|
|
// 屏蔽滚动方向的另外一个方向（可配置）
|
|
if ( !this.directionLocked && !this.options.freeScroll ) {
|
|
if ( absDistX > absDistY + this.options.directionLockThreshold ) {
|
|
this.directionLocked = 'h'; // lock horizontally
|
|
} else if ( absDistY >= absDistX + this.options.directionLockThreshold ) {
|
|
this.directionLocked = 'v'; // lock vertically
|
|
} else {
|
|
this.directionLocked = 'n'; // no lock
|
|
}
|
|
}
|
|
if ( this.directionLocked == 'h' ) {
|
|
// slider/tab 外层高度自适应
|
|
if (this.options.role === 'tab') {
|
|
$(this.scroller).children('li').height('auto');
|
|
}
|
|
if ( this.options.eventPassthrough == 'vertical' ) {
|
|
e.preventDefault();
|
|
} else if ( this.options.eventPassthrough == 'horizontal' ) {
|
|
this.initiated = false;
|
|
return;
|
|
}
|
|
deltaY = 0; // 不断重置垂直偏移量为 0
|
|
}
|
|
else if ( this.directionLocked == 'v' ) {
|
|
if ( this.options.eventPassthrough == 'horizontal' ) {
|
|
e.preventDefault();
|
|
} else if ( this.options.eventPassthrough == 'vertical' ) {
|
|
this.initiated = false;
|
|
return;
|
|
}
|
|
deltaX = 0; // 不断重置水平偏移量为 0
|
|
}
|
|
|
|
deltaX = this.hasHorizontalScroll ? deltaX : 0;
|
|
deltaY = this.hasVerticalScroll ? deltaY : 0;
|
|
|
|
newX = this.x + deltaX;
|
|
newY = this.y + deltaY;
|
|
|
|
// Slow down if outside of the boundaries
|
|
if ( newX > 0 || newX < this.maxScrollX ) {
|
|
newX = this.options.bounce ? this.x + deltaX / 3 : newX > 0 ? 0 : this.maxScrollX;
|
|
}
|
|
if ( newY > 0 || newY < this.maxScrollY ) {
|
|
newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
|
|
}
|
|
|
|
this.directionX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
|
|
this.directionY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
|
|
|
|
this.moved = true; // 滚动开始
|
|
this._translate(newX, newY);
|
|
|
|
if ( timestamp - this.startTime > 300 ) { // 每 300 毫秒重置一次初始值
|
|
this.startTime = timestamp;
|
|
this.startX = this.x;
|
|
this.startY = this.y;
|
|
}
|
|
},
|
|
|
|
|
|
|
|
_end: function (e) {
|
|
|
|
if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
|
|
return;
|
|
}
|
|
|
|
if ( this.options.preventDefault && !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
var point = e.changedTouches ? e.changedTouches[0] : e, // 移开屏幕的那个触摸点，只会包含在 changedTouches 列表中，而不会包含在 touches 或 targetTouches 列表中
|
|
momentumX,
|
|
momentumY,
|
|
duration = utils.getTime() - this.startTime,
|
|
newX = Math.round(this.x),
|
|
newY = Math.round(this.y),
|
|
distanceX = Math.abs(newX - this.startX),
|
|
distanceY = Math.abs(newY - this.startY),
|
|
time = 0,
|
|
easing = '';
|
|
|
|
this.isInTransition = 0;
|
|
this.initiated = 0;
|
|
this.endTime = utils.getTime();
|
|
|
|
|
|
if ( this.resetPosition(this.options.bounceTime) ) { // reset if we are outside of the boundaries
|
|
if (this.options.role === 'tab') {
|
|
$(this.scroller.children[this.currentPage]).siblings('li').height(0);
|
|
}
|
|
return;
|
|
}
|
|
|
|
this.scrollTo(newX, newY); // ensures that the last position is rounded
|
|
|
|
if (!this.moved) { // we scrolled less than 10 pixels
|
|
if (this.options.tap && utils.eventType[e.type] === 1) {
|
|
utils.tap(e, this.options.tap);
|
|
}
|
|
if ( this.options.click) {
|
|
utils.click(e);
|
|
}
|
|
}
|
|
|
|
// 300ms 内的滑动要启动惯性滚动
|
|
if ( this.options.momentum && duration < 300 ) {
|
|
momentumX = this.hasHorizontalScroll ? utils.momentum(this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options.deceleration) : { destination: newX, duration: 0 };
|
|
momentumY = this.hasVerticalScroll ? utils.momentum(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options.deceleration) : { destination: newY, duration: 0 };
|
|
newX = momentumX.destination;
|
|
newY = momentumY.destination;
|
|
time = Math.max(momentumX.duration, momentumY.duration);
|
|
this.isInTransition = 1;
|
|
}
|
|
|
|
if ( newX != this.x || newY != this.y ) {
|
|
// change easing function when scroller goes out of the boundaries
|
|
if ( newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY ) {
|
|
easing = utils.ease.quadratic;
|
|
}
|
|
this.scrollTo(newX, newY, time, easing);
|
|
return;
|
|
}
|
|
|
|
|
|
// tab
|
|
// ==========================
|
|
if (this.options.role === 'tab' && $(event.target).closest('ul').hasClass('ui-tab-nav')) {
|
|
$(this.nav).children().removeClass('current');
|
|
$(event.target).addClass('current');
|
|
var tempCurrentPage = this.currentPage;
|
|
this.currentPage = $(event.target).index();
|
|
|
|
$(this.scroller).children().height('auto'); // tab 外层高度自适应
|
|
this._execEvent('beforeScrollStart', tempCurrentPage, this.currentPage);
|
|
}
|
|
|
|
|
|
|
|
// slider & tab
|
|
// ==============================
|
|
if (this.options.role === 'slider' || this.options.role === 'tab') {
|
|
|
|
if (distanceX < 30) {
|
|
this.scrollTo(-this.itemWidth*this.currentPage, 0, this.options.bounceTime, this.options.bounceEasing);
|
|
}
|
|
else if (newX-this.startX<0) { // 向前
|
|
this._execEvent('beforeScrollStart', this.currentPage, this.currentPage+1);
|
|
this.scrollTo(-this.itemWidth*++this.currentPage, 0, this.options.bounceTime, this.options.bounceEasing);
|
|
}
|
|
else if (newX-this.startX>=0) { // 向后
|
|
this._execEvent('beforeScrollStart', this.currentPage, this.currentPage-1);
|
|
this.scrollTo(-this.itemWidth*--this.currentPage, 0, this.options.bounceTime, this.options.bounceEasing);
|
|
}
|
|
|
|
// tab 外层高度自适应
|
|
if (this.options.role === 'tab') {
|
|
$(this.scroller.children[this.currentPage]).siblings('li').height(0);
|
|
}
|
|
|
|
if (this.indicator && distanceX >= 30) {
|
|
$(this.indicator).children().removeClass('current');
|
|
$(this.indicator.children[this.currentPage]).addClass('current');
|
|
}
|
|
else if (this.nav && distanceX >= 30) {
|
|
$(this.nav).children().removeClass('current');
|
|
$(this.nav.children[this.currentPage]).addClass('current');
|
|
}
|
|
|
|
$(this.scroller).children().removeClass('current');
|
|
$(this.scroller.children[this.currentPage]).addClass('current');
|
|
}
|
|
},
|
|
|
|
|
|
_resize: function () {
|
|
var that = this;
|
|
clearTimeout(this.resizeTimeout);
|
|
this.resizeTimeout = setTimeout(function () {
|
|
that.refresh();
|
|
}, this.options.resizePolling);
|
|
},
|
|
|
|
|
|
_transitionEnd: function (e) {
|
|
if ( e.target != this.scroller || !this.isInTransition ) {
|
|
return;
|
|
}
|
|
this._transitionTime();
|
|
|
|
if ( !this.resetPosition(this.options.bounceTime) ) {
|
|
this.isInTransition = false;
|
|
this._execEvent('scrollEnd', this.currentPage);
|
|
}
|
|
},
|
|
|
|
|
|
destroy: function () {
|
|
this._initEvents(true); // 去除事件绑定
|
|
},
|
|
|
|
|
|
resetPosition: function (time) {
|
|
var x = this.x,
|
|
y = this.y;
|
|
|
|
time = time || 0;
|
|
|
|
if ( !this.hasHorizontalScroll || this.x > 0 ) {
|
|
x = 0;
|
|
} else if ( this.x < this.maxScrollX ) {
|
|
x = this.maxScrollX;
|
|
}
|
|
|
|
if ( !this.hasVerticalScroll || this.y > 0 ) {
|
|
y = 0;
|
|
} else if ( this.y < this.maxScrollY ) {
|
|
y = this.maxScrollY;
|
|
}
|
|
|
|
if ( x == this.x && y == this.y ) {
|
|
return false;
|
|
}
|
|
this.scrollTo(x, y, time, this.options.bounceEasing);
|
|
return true;
|
|
},
|
|
|
|
|
|
|
|
disable: function () {
|
|
this.enabled = false;
|
|
},
|
|
|
|
enable: function () {
|
|
this.enabled = true;
|
|
},
|
|
|
|
|
|
|
|
on: function (type, fn) {
|
|
if ( !this._events[type] ) {
|
|
this._events[type] = [];
|
|
}
|
|
this._events[type].push(fn);
|
|
},
|
|
off: function (type, fn) {
|
|
if ( !this._events[type] ) {
|
|
return;
|
|
}
|
|
|
|
var index = this._events[type].indexOf(fn);
|
|
|
|
if ( index > -1 ) {
|
|
this._events[type].splice(index, 1);
|
|
}
|
|
},
|
|
|
|
|
|
_execEvent: function (type) {
|
|
if ( !this._events[type] ) {
|
|
return;
|
|
}
|
|
var i = 0,
|
|
l = this._events[type].length;
|
|
|
|
if ( !l ) {
|
|
return;
|
|
}
|
|
for ( ; i < l; i++ ) {
|
|
this._events[type][i].apply(this, [].slice.call(arguments, 1));
|
|
}
|
|
},
|
|
|
|
|
|
scrollTo: function (x, y, time, easing) {
|
|
easing = easing || utils.ease.circular;
|
|
|
|
this.isInTransition = this.options.useTransition && time > 0;
|
|
|
|
if ( !time || (this.options.useTransition && easing.style) ) {
|
|
|
|
if (this.options.role === 'slider' || this.options.role === 'tab') { // 不添加判断会影响 left/top 的过渡
|
|
time = this.options.duration;
|
|
this.scrollerStyle[utils.style.transitionProperty] = utils.style.transform;
|
|
}
|
|
this.scrollerStyle[utils.style.transitionTimingFunction] = easing.style;
|
|
this._transitionTime(time);
|
|
this._translate(x, y);
|
|
} else {
|
|
this._animate(x, y, time, easing.fn);
|
|
}
|
|
},
|
|
|
|
|
|
scrollToElement: function (el, time, offsetX, offsetY, easing) {
|
|
el = el.nodeType ? el : this.scroller.querySelector(el);
|
|
|
|
if ( !el ) {
|
|
return;
|
|
}
|
|
var pos = utils.offset(el);
|
|
pos.left -= this.wrapperOffset.left;
|
|
pos.top -= this.wrapperOffset.top;
|
|
|
|
// if offsetX/Y are true we center the element to the screen
|
|
// 若 offsetX/Y 都是 true，则会滚动到元素在屏幕中间的位置
|
|
if ( offsetX === true ) {
|
|
offsetX = Math.round(el.offsetWidth / 2 - this.wrapper.offsetWidth / 2);
|
|
}
|
|
if ( offsetY === true ) {
|
|
offsetY = Math.round(el.offsetHeight / 2 - this.wrapper.offsetHeight / 2);
|
|
}
|
|
pos.left -= offsetX || 0;
|
|
pos.top -= offsetY || 0;
|
|
pos.left = pos.left > 0 ? 0 : pos.left < this.maxScrollX ? this.maxScrollX : pos.left;
|
|
pos.top = pos.top > 0 ? 0 : pos.top < this.maxScrollY ? this.maxScrollY : pos.top;
|
|
|
|
time = time === undefined || time === null || time === 'auto' ? Math.max(Math.abs(this.x-pos.left), Math.abs(this.y-pos.top)) : time;
|
|
|
|
this.scrollTo(pos.left, pos.top, time, easing);
|
|
},
|
|
|
|
|
|
_transitionTime: function (time) {
|
|
time = time || 0;
|
|
this.scrollerStyle[utils.style.transitionDuration] = time + 'ms';
|
|
|
|
if ( !time && utils.isBadAndroid ) {
|
|
this.scrollerStyle[utils.style.transitionDuration] = '0.001s';
|
|
}
|
|
},
|
|
|
|
|
|
_translate: function (x, y) {
|
|
if ( this.options.useTransform ) {
|
|
this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;
|
|
} else {
|
|
x = Math.round(x);
|
|
y = Math.round(y);
|
|
this.scrollerStyle.left = x + 'px';
|
|
this.scrollerStyle.top = y + 'px';
|
|
}
|
|
this.x = x;
|
|
this.y = y;
|
|
},
|
|
|
|
|
|
getComputedPosition: function () {
|
|
var matrix = window.getComputedStyle(this.scroller, null),
|
|
x, y;
|
|
|
|
if ( this.options.useTransform ) {
|
|
matrix = matrix[utils.style.transform].split(')')[0].split(', ');
|
|
x = +(matrix[12] || matrix[4]);
|
|
y = +(matrix[13] || matrix[5]);
|
|
} else {
|
|
x = +matrix.left.replace(/[^-\d.]/g, '');
|
|
y = +matrix.top.replace(/[^-\d.]/g, '');
|
|
}
|
|
|
|
return { x: x, y: y };
|
|
},
|
|
|
|
|
|
_animate: function (destX, destY, duration, easingFn) { // 当浏览器不支持 transition 时提供的退化方案 requestAnimationFrame
|
|
var that = this,
|
|
startX = this.x,
|
|
startY = this.y,
|
|
startTime = utils.getTime(),
|
|
destTime = startTime + duration;
|
|
|
|
function step () {
|
|
var now = utils.getTime(),
|
|
newX, newY,
|
|
easing;
|
|
|
|
if ( now >= destTime ) {
|
|
that.isAnimating = false;
|
|
that._translate(destX, destY);
|
|
|
|
if ( !that.resetPosition(that.options.bounceTime) ) {
|
|
that._execEvent('scrollEnd', this.currentPage);
|
|
}
|
|
return;
|
|
}
|
|
|
|
now = ( now - startTime ) / duration;
|
|
easing = easingFn(now);
|
|
newX = ( destX - startX ) * easing + startX;
|
|
newY = ( destY - startY ) * easing + startY;
|
|
that._translate(newX, newY);
|
|
|
|
if ( that.isAnimating ) {
|
|
rAF(step);
|
|
}
|
|
}
|
|
this.isAnimating = true;
|
|
step();
|
|
},
|
|
|
|
|
|
_autoplay: function() {
|
|
var self = this,
|
|
curPage = self.currentPage;
|
|
|
|
self.currentPage = self.currentPage >= self.count-1 ? 0 : ++self.currentPage;
|
|
self._execEvent('beforeScrollStart', curPage, self.currentPage); // 对于自动播放的 slider/tab，这个时机就是 beforeScrollStart
|
|
|
|
// tab 外层高度自适应
|
|
if (this.options.role === 'tab') {
|
|
$(this.scroller).children().height('auto');
|
|
document.body.scrollTop = 0;
|
|
}
|
|
self.scrollTo(-self.itemWidth*self.currentPage, 0, self.options.bounceTime, self.options.bounceEasing);
|
|
|
|
if (self.indicator) {
|
|
$(self.indicator).children().removeClass('current');
|
|
$(self.indicator.children[self.currentPage]).addClass('current');
|
|
$(self.scroller).children().removeClass('current');
|
|
$(self.scroller.children[self.currentPage]).addClass('current');
|
|
}
|
|
else if (self.nav) {
|
|
$(self.nav).children().removeClass('current');
|
|
$(self.nav.children[self.currentPage]).addClass('current');
|
|
$(self.scroller).children().removeClass('current');
|
|
$(self.scroller.children[self.currentPage]).addClass('current');
|
|
}
|
|
|
|
self.options.flag = setTimeout(function() {
|
|
self._autoplay.apply(self);
|
|
}, self.options.interval);
|
|
}
|
|
|
|
|
|
};
|
|
|
|
// Scroll.utils = utils;
|
|
window.fz = window.fz || {};
|
|
window.frozen = window.frozen || {};
|
|
window.fz.Scroll = window.frozen.Scroll = Scroll;
|
|
|
|
/*
|
|
* 兼容 RequireJS 和 Sea.js
|
|
*/
|
|
if (typeof define === "function") {
|
|
define(function(require, exports, module) {
|
|
module.exports = Scroll;
|
|
})
|
|
}
|
|
|
|
})(window.Zepto);
|
|
/**
|
|
* User: jeakeyliang
|
|
* Date: 14-11-07
|
|
* Time: 下午9:20
|
|
*/
|
|
|
|
!function($){
|
|
|
|
// 默认模板
|
|
var _tipsTpl='<div class="ui-poptips ui-poptips-<%=type%>">'+
|
|
'<div class="ui-poptips-cnt">'+
|
|
'<i></i><%=content%>'+
|
|
'</div>'+
|
|
'</div>';
|
|
|
|
// 默认参数
|
|
var defaults={
|
|
content:'',
|
|
stayTime:1000,
|
|
type:'info',
|
|
callback:function(){}
|
|
}
|
|
// 构造函数
|
|
var Tips = function (el,option,isFromTpl) {
|
|
var self=this;
|
|
this.element=$(el);
|
|
this._isFromTpl=isFromTpl;
|
|
this.elementHeight=$(el).height();
|
|
|
|
this.option=$.extend(defaults,option);
|
|
$(el).css({
|
|
"-webkit-transform":"translateY(-"+this.elementHeight+"px)"
|
|
});
|
|
setTimeout(function(){
|
|
$(el).css({
|
|
"-webkit-transition":"all .5s"
|
|
});
|
|
self.show();
|
|
},20);
|
|
|
|
}
|
|
Tips.prototype={
|
|
show:function(){
|
|
var self=this;
|
|
// self.option.callback("show");
|
|
self.element.trigger($.Event("tips:show"));
|
|
this.element.css({
|
|
"-webkit-transform":"translateY(0px)"
|
|
});
|
|
if(self.option.stayTime>0){
|
|
setTimeout(function(){
|
|
self.hide();
|
|
},self.option.stayTime)
|
|
}
|
|
},
|
|
hide :function () {
|
|
var self=this;
|
|
self.element.trigger($.Event("tips:hide"));
|
|
this.element.css({
|
|
"-webkit-transform":"translateY(-"+this.elementHeight+"px)"
|
|
});
|
|
setTimeout(function(){
|
|
self._isFromTpl&&self.element.remove();
|
|
},500)
|
|
|
|
|
|
}
|
|
}
|
|
function Plugin(option) {
|
|
|
|
return $.adaptObject(this, defaults, option,_tipsTpl,Tips,"tips");
|
|
}
|
|
$.fn.tips=$.tips= Plugin;
|
|
}(window.Zepto)
|
|
|
|
|