h5-cli
Version:
hello
327 lines (264 loc) • 9.44 kB
JavaScript
"use strict";
/**
\u4f9d\u8d56\u56fa\u5b9a\u7684DEMO\u7ed3\u6784\uff0c\u8bf7\u67e5\u8003demo/app.html
#id
--.J_In
--.J_Silder
@param tab \u5bb9\u5668$element zepto\u5bf9\u8c61
@param options \u5176\u4ed6\u914d\u7f6e\u53c2\u6570
{
gap:0//tab\u4e4b\u95f4\u7684\u95f4\u8ddd
time:0 //\u5728PC\u4e2d\u9047\u5230\u8fc7tab\u6ed1\u52a8\u9875\u9762\u6e32\u67d3\u4e0d\u5b8c\u6210\u7684\u73b0\u8c61\uff0c\u53ef\u914d\u7f6e time \u8981\u5ef6\u8fdf\u6e32\u67d3\u89e3\u51b3(time:300)
}
*/
define("mods/muliteTab/index", function (require, exports, module) {
module.exports = MulitpeTab;
function MulitpeTab(tab, options) {
this.tab = tab;
this.tabs = this.tab.find("li"); //.slice(0, -1);
this.silder = this.tab.find(".J_Slider");
this.tabIn = this.tab.find(".J_In");
this.maxWidth = 0;
this.widthSum = 0;
this.offsets = [];
this.currentIndex = 0;
this.maxMarginLeft = 0;
//\u652f\u6301\u7684\u4e8b\u5217\u8868\u4ef6lie'b
this.eventName = ["onChange"];
this.eventHandle = {};
this.options = {
gap: 0,
time: 0
};
options && $.extend(this.options, options);
this.init();
};
MulitpeTab.prototype = {
constructor: MulitpeTab,
init: function init() {
for (var i = 0; i < this.eventName.length; i++) {
this.eventHandle[this.eventName] = [];
}
this.initMaxWidth();
this.initOffsets();
//\u91cd\u7ed8
this.render();
this.regEvent();
//andriod 2.3 \u65e0\u6cd5\u6ed1\u52a8bug
this.touchScroll && this.touchScroll(this.tabIn);
},
initMaxWidth: function initMaxWidth() {
this.maxWidth = this.tabIn.width();
},
initOffsets: function initOffsets() {
var gap = this.options.gap;
var sum = gap;
var lis = this.tabs;
var width = 0;
var gapLeft = 0; //this.offsets[0].left;
this.offsets = [];
for (var i = 0; i < lis.length; i++) {
// {left: top: width: height:}
lis.eq(i).attr("data-tabnavindex", i);
this.offsets.push({
left: lis[i].offsetLeft + gap * (i + 1),
width: lis[i].offsetWidth
});
sum += lis[i].offsetWidth;
}
sum += gap;
this.widthSum = sum;
this.maxMarginLeft = sum - this.maxWidth / 2;
},
render: function render() {
var gap = this.options.gap;
console.log(this.isHaveScroll());
if (this.isHaveScroll()) {
//\u9700\u8981\u6ed1\u52a8
this.tabs.css("margin-left", gap + "px");
this.tabs.eq(this.tabs.length - 1).css("margin-right", gap + "px");
} else {
//\u76f4\u63a5\u5c45\u4e2d
this.options.gap = 0;
this.tab.addClass("center");
this.initOffsets();
}
},
//\u662f\u5426\u9700\u8981\u6eda\u52a8
isHaveScroll: function isHaveScroll() {
console.log(this.offsets.length, this.options.gap, this.widthSum, this.maxWidth);
return this.offsets.length * this.options.gap + this.widthSum > this.maxWidth;
},
//\u4e8b\u4ef6\u7ed1\u5b9a
regEvent: function regEvent() {
var self = this;
this.prevTime = 0;
this.tabs.click(function () {
var index = parseInt($(this).attr("data-tabnavindex"));
self.go(index);
});
},
//\u6839\u636e\u5bfc\u822a\u5bb9\u5668\u5927\u5c0f\u8ba1\u7b97\u51fa\u5f53\u524d\u6700\u5408\u9002\u79fb\u52a8\u7684\u8ddd\u79bb
//index \u9009\u4e2d\u7684\u5143\u7d20
//dir \u79fb\u52a8\u65b9\u5411 -1<--- --->1
movePosition: function movePosition(index, dir) {
var gap = this.options.gap;
var offset = this.offsets[index];
var len = this.offsets.length;
var centerPosition = this.maxWidth / 2;
var lastOffset = this.offsets[this.offsets.length - 1];
//\u524d\u9762\u51e0\u4e2a\u7684\u4f4d\u7f6e\u6ca1\u8fc7\u4e2d\u70b9
if (offset.left < centerPosition) {
return 0;
}
//\u6700\u5927\u79fb\u52a8\u8ddd\u79bb \u5185\u5bb9\u6700\u5927\u5bbd\u5ea6 - \u5bb9\u5668\u5927\u5c0f\u7684\u4e00\u534a
var maxPosition = lastOffset.left + lastOffset.width + gap - centerPosition;
//\u540e\u9762\u51e0\u4e2a\u6700\u5927\u79fb\u52a8\u8fd4\u56de\u6700\u5927\u79fb\u52a8\u8ddd\u79bb
if (offset.left > maxPosition) {
return centerPosition - maxPosition;
}
//\u79fb\u52a8\u5230\u6700\u4e2d\u95f4\u9700\u8981\u7684\u8ddd\u79bb \u8d1f\u6570
var distance = centerPosition - offset.left;
//\u6700\u5927\u79fb\u52a8\u8ddd\u79bb
var maxDistance = centerPosition - maxPosition;
var patch = 0;
//\u5bb9\u5668\u5f53\u524d\u7ec8\u70b9
var finishPosition = -distance + this.maxWidth;
//\u5bb9\u5668\u5f53\u524d\u8d77\u70b9
var startPosition = -distance;
var itemOffset = null;
if (dir == 1) {
//\u5411\u540e\u79fb\u52a8\uff0c\u5c3d\u91cf\u907f\u514d\u51fa\u73b0\u4e00\u4e2atab\u663e\u793a\u4e00\u534a\u7684\u60c5\u51b5
for (var i = index, len = this.offsets.length; i < len; i++) {
itemOffset = this.offsets[i];
if (finishPosition >= itemOffset.left && finishPosition < itemOffset.left + itemOffset.width + gap) {
patch = finishPosition - (itemOffset.left + itemOffset.width + gap);
break;
}
}
//\u5411\u524d\u79fb\u52a8
} else {
for (var i = index - 1; i >= 0; i--) {
itemOffset = this.offsets[i];
if (startPosition >= itemOffset.left - gap && startPosition < itemOffset.left + itemOffset.width) {
patch = startPosition - (itemOffset.left - gap);
break;
}
}
}
return distance + patch;
},
//\u8bbe\u7f6e\u6ed1\u52a8\u6761\u7684\u5bbd\u5ea6\u4e0e\u4f4d\u7f6e
setSilder: function setSilder(width, left) {
this.silder.css("width", width + "px");
this.silder[0].style.webkitTransform = "translateX(" + left + "px)";
//.scrollTo(left, 0)
},
//\u9ad8\u4eae\u5f53\u524dtab\u5e76\u89e6\u53d1\u4e8b\u4ef6
updateCurrentIndex: function updateCurrentIndex(index) {
var currentIndex = this.currentIndex;
this.tabs.eq(this.currentIndex).removeClass("on");
this.tabs.eq(index).addClass("on");
this.currentIndex = index;
this.fire("onChange", [index, currentIndex, this.tabs.eq(index)]);
},
go: function go(index) {
//\u5f53\u524d\u5143\u7d20\u5bbd\u5ea6\u4e0eoffsetleft\u503c
var self = this;
var width = this.offsets[index].width;
var left = this.offsets[index].left; // - gapLeft;
//\u8ba1\u7b97\u6700\u4f73\u79fb\u52a8\u8ddd\u79bb\u907f\u514d\u51fa\u73b0\u534a\u4e2a
var xx = this.movePosition(index, index >= this.currentIndex ? 1 : -1);
//$("#J_NavtabIn ul").css("-webkit-transform","translateX("+ (xx) +"px)")
// 18 = 300/16
// \u6309\u7167 webkitRequestAnimationFrame 16\u6beb\u79d2\u8c03\u7528\u4e00\u6b21\uff0c300\u6beb\u79d2\u7684\u52a8\u753b\uff0c\u4fdd\u6301\u572818\u6b65\u5b8c\u6210\uff0c\u8f83\u4e3a\u6d41\u7545
this.scrollTo(this.tabIn[0], -xx, 18); // 18 = 300/16
//pc chrome\u6e32\u67d3\u6709\u95ee\u9898
setTimeout(function () {
self.setSilder(width, left);
}, this.options.time);
setTimeout(function () {
self.updateCurrentIndex(index);
}, this.options.time);
},
next: function next() {
var index = this.currentIndex + 1;
//console.log(index)
if (index < this.tabs.length) {
this.go(index);
}
},
prev: function prev() {
var index = this.currentIndex - 1;
if (index >= 0) {
this.go(index);
}
},
scrollTo: function scrollTo(ele, x, time) {
var current = ele.scrollLeft;
var duration = x;
var t = 0;
var webkitRequestAnimationFrame = this.webkitRequestAnimationFrame;
//\u53d8\u5316\u6570\u5b57\u7edd\u5bf9\u503c\u5c0f\u4e8e10\u76f4\u63a5\u8bbe\u7f6e\u5230\u7ec8\u70b9
if (Math.abs(duration - current) < 10) {
time = 1;
}
function run() {
var c = easeOut(t += 1, current, duration - current, time);
if (c != duration) {
ele.scrollLeft = c;
webkitRequestAnimationFrame(run);
}
};
function easeOut(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
}
run();
},
//\u4e8b\u4ef6\u6d3e\u53d1
fire: function fire(type, arg) {
var handles = this.eventHandle[type];
for (var i = 0; i < handles.length; i++) {
try {
handles[i].apply(this, arg);
} catch (e) {
console.log(e);
}
}
},
webkitRequestAnimationFrame: function () {
return (window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame) ? window.requestAnimationFrame : function (run) {
setTimeout(function () {
run();
}, 20);
};
}(),
addEventListener: function addEventListener(type, handle) {
if (this.eventName.indexOf(type)) {
throw "\u4e0d\u652f\u6301\u76d1\u542c+" + type + "\u4e8b\u4ef6";
return;
}
this.eventHandle[type].push(handle);
}
};
//andriod 2.3 overflow:scroll \u65e0\u6548\u5904\u7406 \u653e\u5f03\u6ed1\u52a8\u7f13\u52a8
//alert(navigator.userAgent)
//alert(navigator.userAgent.indexOf("Android 2."))
// if(navigator.userAgent.indexOf("Android 2.") != -1){
// MulitpeTab.prototype.touchScroll = function( elem ){
// var el=elem[0]
// var scrollStartPos=0;
// function scroll(){
// el.addEventListener("touchstart", function(event) {
// scrollStartPos=this.scrollLeft+event.touches[0].pageX;
// event.preventDefault();
// },false);
// el.addEventListener("touchmove", function(event) {
// this.scrollLeft=scrollStartPos-event.touches[0].pageX;
// event.preventDefault();
// },false);
// }
// scroll();
// }
// }
});