今天时间比较紧, 做个小的笔记。主要是用来判断页面是在PC端还是在移动端,以应对不同的事件处理。当然,这里是应对简单的singlePage,大型移动端项目,繁琐触屏滑动逻辑还是需要插件支持。
废话不啰嗦,直接上干货。
(function($){
window.appUtils = function(){
var app = this;
app.touchEvents = {
start: app.support.touch ? 'touchstart' : 'mousedown',
move: app.support.touch ? 'touchmove' : 'mousemove',
end: app.support.touch ? 'touchend' : 'mouseup'
};
}
appUtils.prototype.support = (function () {
var support = {
touch: !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch)
}; //重点就是判断打开文档设备是PC 还是 移动设备
return support;
})();
window.utils = new appUtils();
})(jQuery)
唉,下班时间到了不回家的人,都有病!!需要治疗。
附赠下午写的小工具
$.fn.autoTab = function(options){
var defaults = {
tabTitle: '',
tabCont:'',
tabActive:'',
tabNumber:0,
tabClick:true,
autoPlay:true,
autoTime:1500
},
opt = $.extend({}, defaults, options),
Showder = function(index){
$(opt.tabTitle).eq(index).addClass(opt.tabActive).siblings(opt.tabTitle).removeClass(opt.tabActive);
$(opt.tabCont).eq(index).show().siblings(opt.tabCont).hide();
},
timer;
Showder(opt.tabNumber);
$(document).on(utils.touchEvents.end,opt.tabTitle,function(){
if(!opt.tabClick)return false;
var index = $(this).index();
opt.tabNumber = index;
Showder(index);
});
if(opt.autoPlay){
function autoPlay(){
opt.tabNumber++;
if(opt.tabNumber>=$(opt.tabTitle).length)opt.tabNumber = 0;
Showder(opt.tabNumber);
}
timer = setInterval(autoPlay,opt.autoTime);
$(this).on("mouseenter",function(){
clearInterval(timer);
})
$(this).on("mouseleave",function(){
timer = setInterval(autoPlay,opt.autoTime);
})
}
}