/* * responsive.tabs v1.0.1 * yu, 2015-12-27 * more info : https://github.com/sufangyu/responsive.tabs.js */ ;(function($){ $.fn.resptabs = function(options){ var defaults = { startindex : 0, // 默认显示第几个 activeclass : 'active', // 当前高亮的标识clss model : 'tabs', // 插件模式: tabs 或 accordions responsive : true, // 开启响应式,只在tabs模式有效 responsiveclass : 'responsive-tabs', // 响应式tab的标识class fnevent : 'click', // 触发事件的类型,click 或 mouseover toggles : false, // 隐藏自身的切换,只在accordions模式有效 hidencontent : false // 默认隐藏accordions内容,只在accordions模式有效 } var options = $.extend(defaults, options); //核心部分代码 return this.each(function() { var self = $(this); var tablist = self.find('.tabs-list'); var tablistitem = tablist.find('li'); var tabcontent = ''; var accordionhandle = ''; var firstload = true; switch(options.model){ case 'tabs': tabcontent = self.children().children('.tab-content'); break; case 'accordions': tabcontent = self.children('.accordion-content'); break; } //开启响应式tab var addrepsaccording = function(){ self.addclass(options.responsiveclass); tablistitem.each(function(){ var currentindex = tablistitem.index($(this)); var accordionactiveclass = $(this).hasclass(options.activeclass)? options.activeclass : ''; tabcontent.eq(currentindex).before('

'+ $(this).text() +'

'); }); //accordionhandle = self.find('.accordion-handle'); }, showtabs = function(index){ tablistitem.eq(index).addclass(options.activeclass).siblings('li').removeclass('active '+options.activeclass); tabcontent.eq(index).show().siblings('.tab-content').hide(); //高亮响应式tab当前点击 if( options.responsive ){ accordionhandle = self.children().children('.accordion-handle'); accordionhandle.eq(index).addclass(options.activeclass).siblings('.accordion-handle').removeclass('active '+options.activeclass); } }, showaccording = function(index){ accordionhandle = options.model == 'accordions' ? self.children('.accordion-handle') : self.children().children('.accordion-handle'); accordionhandle.eq(index).addclass(options.activeclass).siblings('.accordion-handle').removeclass('active '+options.activeclass); tabcontent.eq(index).slidedown().siblings('.tab-content, .accordion-content').slideup(); //高亮响应式tab当前点击 if( options.responsive && tablistitem.length ){ tablistitem.eq(index).addclass(options.activeclass).siblings('li').removeclass('active '+options.activeclass); } }, toggleaccording = function(index){ accordionhandle = self.find('.accordion-handle'); if( firstload ){ accordionhandle.eq(index).addclass(options.activeclass).siblings('.accordion-handle').removeclass('active '+options.activeclass); tabcontent.eq(index).slidedown().siblings('.tab-content, .accordion-content').slideup('fast'); firstload = false; }else{ if( tabcontent.eq(index).is(':hidden') ){ tabcontent.eq(index).slidedown(); accordionhandle.eq(index).addclass(options.activeclass); }else{ tabcontent.eq(index).slideup(); accordionhandle.eq(index).removeclass('active '+options.activeclass); } } }, //隐藏according的内容 hideaccordingcontent = function(){ tabcontent.hide(); accordionhandle.removeclass('active '+options.activeclass); } //初始化函数 _init = function(){ if( options.model == 'tabs' ){ if( options.responsive ) addrepsaccording(); showtabs(options.startindex); showaccording(options.startindex); }else{ if( options.toggles ){ toggleaccording(options.startindex); }else{ showaccording(options.startindex); } if( options.hidencontent ) hideaccordingcontent(); } } _init(); tablistitem.bind( options.fnevent, function(){ var currentindex = tablistitem.index($(this)); showtabs(currentindex); }); accordionhandle.bind( 'click', function(){ var currentindex = accordionhandle.index($(this)); if( options.toggles && options.model == 'accordions' ){ toggleaccording(currentindex); }else{ showaccording(currentindex); } }); });//end this.each } })(jquery);