标签:width efi display == doc switch lis defaults window
html
<div class="tab" js-tab="1"> <div class="tab-title fr"> <a href="javascript:;" class="item col-xs-4 item-cur">产业基本情况</a> <a href="javascript:;" class="item col-xs-4 ">失效原因分析</a> <a href="javascript:;" class="item col-xs-4 ">产业区域分布</a> </div> <div class="tab-cont tab-content"> <div class="tab-cont__wrap"> <div class="item tab-pane"> <!-- 密集型产业有效失效分析--> </div> <div class="item tab-pane"></div> <div class="item tab-pane"></div> </div> </div> </div>
JS
;(function ($, window, document, undefined) { var Plugin = function (elem, options) { this.$wrapper = elem; this.$tab_list = this.$wrapper.find(‘.tab-title‘).find(‘.item‘); this.$tabCont_wrap = this.$wrapper.find(‘.tab-cont__wrap‘); this.$tab_cont = this.$tabCont_wrap.find(‘.item‘); this.timer = null; this.playTimer = null this.iNow = 0; this.defaults = { curDisplay: 1, mouse: ‘click‘, changeMethod: ‘default‘, autoPlay: false }; this.opts = $.extend({}, this.defaults, options); }; Plugin.prototype = { inital: function () { var self = this; this.setData(); this.tabInital(); if (this.opts.mouse === ‘click‘) { this.$tab_list.click(function () { self.changeTab($(this).index()); self.iNow = $(this).index(); }); } else if (this.opts.mouse === ‘over‘) { this.$tab_list.hover(function () { var cur_obj = this; clearTimeout(self.timer); self.timer = setTimeout(function () { self.changeTab($(cur_obj).index()); }, 30); self.iNow = $(this).index(); }, function () { clearTimeout(self.timer); }); } else { this.$tab_list.click(function () { self.changeTab($(this).index()); self.iNow = $(this).index(); }); } if (this.opts.autoPlay) { clearInterval(this.playTimer); this.playTimer = setInterval(function () { self.autoPlay(); }, 1000); this.$wrapper.hover(function () { clearInterval(self.playTimer); }, function () { self.playTimer = setInterval(function () { self.autoPlay(); }, 1000); }); } }, setData: function () { // 设置样式 var tabCont_w = this.$tab_cont.width(); var tabCont_h = this.$tab_cont.height(); var tabCont_len = this.$tab_cont.length; switch(this.opts.changeMethod) { case ‘default‘ : this.$tab_cont.css({display: ‘none‘}); break; case ‘horizontal‘ : this.$tabCont_wrap.css({width: tabCont_w * tabCont_len}); this.$tab_cont.css({float: ‘left‘}); break; case ‘vertical‘ : this.$tabCont_wrap.css({height: tabCont_h * tabCont_len}); break; case ‘opacity‘ : this.$tab_cont.css({display: ‘none‘}); break; default : this.$tab_cont.css({display: ‘none‘}); break; } }, tabInital: function () { // 初始化当前显示 var curNum = this.opts.curDisplay - 1; this.$tab_list.removeClass(‘item-cur‘); this.$tab_list.eq(curNum).addClass(‘item-cur‘); if (this.opts.changeMethod === ‘default‘ || this.opts.changeMethod === ‘opacity‘) { this.$tab_cont.eq(curNum).css({display: ‘block‘}); } else if (this.opts.changeMethod === ‘horizontal‘) { this.$tabCont_wrap.css({left: -curNum * this.$tab_cont.width()}); } else if (this.opts.changeMethod === ‘vertical‘) { this.$tabCont_wrap.css({top: -curNum * this.$tab_cont.height()}); } else { this.$tab_cont.eq(curNum).css({display: ‘block‘}); } this.iNow = this.opts.curDisplay - 1; }, changeTab: function (index) { // 选项卡切换 this.$tab_list.removeClass(‘item-cur‘); this.$tab_list.eq(index).addClass(‘item-cur‘); switch(this.opts.changeMethod) { case ‘default‘ : this.$tab_cont.css({display: ‘none‘}); this.$tab_cont.eq(index).css({display: ‘block‘}); break; case ‘horizontal‘ : this.$tabCont_wrap.stop().animate({left: this.$tab_cont.width() * -index}); break; case ‘vertical‘ : this.$tabCont_wrap.stop().animate({top: this.$tab_cont.height() * -index}); break; case ‘opacity‘ : this.$tab_cont.stop().fadeOut(); this.$tab_cont.eq(index).stop().fadeIn() break; default : this.$tab_cont.css({display: ‘none‘}); this.$tab_cont.eq(index).css({display: ‘block‘}); break; } }, autoPlay: function () { // 自动播放 if (this.iNow === this.$tab_list.length - 1) { this.iNow = 0; } else { this.iNow ++; } this.changeTab(this.iNow); }, constructor: Plugin }; $.fn.tab = function (options) { var plugin = new Plugin(this, options); return plugin.inital(); }; })(window.jQuery, window, document);
调用
$(‘[js-tab=1]‘).tab();
标签:width efi display == doc switch lis defaults window
原文地址:http://www.cnblogs.com/guanguan-/p/7904328.html