(function($){ $.fn.agileTab = function(options) { var defaults = { trigger: 'click', neighborItem: false, animation: false, animationInteval: 5000, hoverToStop: false, animationFade: false, initialItem: 1, circulation: false, carousel: false }; var options = $.extend(defaults, options); var currentItemIndex = 0; //產生一組包含前後選項的 ul > li function agileTab_neighborItem(obj, objID, itemSum, options) { var content = '' obj.prepend(content); var lastItem = itemSum-1; if(options.animationFade) { obj.find('.tabArrow.buddy-'+objID+' > li.next').dblclick(function() { obj.find('ul.tab.buddy-'+objID+' > li.active').each(function() { currentItemIndex = obj.find('ul.tab.buddy-'+objID+' > li').index(this); }); var newOrder = currentItemIndex+1; if(newOrder < itemSum) { obj.find('ul.tab.buddy-'+objID+' > li.active').next().dblclick(); } else if(options.circulation==true) { obj.find('ul.tab.buddy-'+objID+' > li:eq(0)').dblclick(); } }); } else { obj.find('.tabArrow.buddy-'+objID+' > li').click(function() { obj.find('ul.tab.buddy-'+objID+' > li.active').each(function() { currentItemIndex = obj.find('ul.tab.buddy-'+objID+' > li').index(this); }); if($(this).hasClass('next')) { var newOrder = currentItemIndex+1; if(newOrder < itemSum) { obj.find('ul.tab.buddy-'+objID+' > li.active').next().click(); } else if(options.circulation==true) { obj.find('ul.tab.buddy-'+objID+' > li:eq(0)').click(); } }// end if .next if($(this).hasClass('prev')) { var newOrder = currentItemIndex-1; if(newOrder >= 0) { obj.find('ul.tab.buddy-'+objID+' > li.active').prev().click(); } else if(options.circulation) { obj.find('ul.tab.buddy-'+objID+' > li:eq('+lastItem+')').click(); } }// end if .prev }); } } //首先先把相關人員找出來 function agileTab_targetBuddy(obj, objID) { obj.children().addClass('buddy-'+objID); obj.children().children().addClass('buddy-'+objID); } //算出一共有多少內容item function agileTab_contentNumber(obj, objID) { return obj.find('.tabContent.buddy-'+objID+' > li').size(); } //好啦, 先把閒雜物件藏起來, 顯示第N各物件, 然後highlight對應的tab function agileTab_cssHandler(obj, options) { var item = options.initialItem-1; obj.find('.tab.buddy-'+objID+' > li:eq('+item+')').addClass('active'); obj.find('.tab.buddy-'+objID+' > li:eq('+item+')').children().addClass('active'); if(options.carousel==false) { obj.find('.tabContent.buddy-'+objID+' > li').hide(); obj.find('.tabContent.buddy-'+objID+' > li:eq('+item+')').show(); } } //做出trigger tab時的標準動作, 加上hover的話就也trigger依下 function agileTab_tabTrigger(obj, objID, options) { obj.find('.tab.buddy-'+objID+' > li > h5').hover( function(){ $(this).addClass('active'); }, function(){ if(!$(this).parent().hasClass('active')) $(this).removeClass('active'); } ); obj.find('.tab.buddy-'+objID+' > li').click(function(){ $(this).siblings().removeClass('active'); $(this).addClass('active'); $(this).siblings().children().removeClass('active'); $(this).children().addClass('active'); /*new rolloverimg*/ obj.find('.tab.buddy-'+objID+' > li').find('.hoverTab').each(function(){ var orisrcs=$(this).attr('src'); $(this).attr('src', orisrcs.replace('_h','_o')); }); var orisrc=$(this).children().children('.hoverTab').attr('src'); if(orisrc) { $(this).children().children('.hoverTab').attr('src', orisrc.replace('_o','_h')); } var currentItemIndex = obj.find('ul.tab.buddy-'+objID+' > li').index(this); if(options.carousel==false) { obj.find('.tabContent.buddy-'+objID+' > li').hide(); obj.find('.tabContent.buddy-'+objID+' > li:eq('+currentItemIndex+')').show(); } else { var unitWidth = obj.find('.tabContent.buddy-'+objID+' > li').width(); marginX = 0-currentItemIndex*unitWidth; obj.find('.tabContent.buddy-'+objID).animate({ left: marginX+"px" }, options.animationInteval ); } }); /*--這邊是一開始動畫淡入淡出的特效--*/ obj.find('.tab.buddy-'+objID+' > li').dblclick(function(){ $(this).siblings().removeClass('active'); $(this).addClass('active'); $(this).siblings().children().removeClass('active'); $(this).children().addClass('active'); /*new rolloverimg*/ obj.find('.tab.buddy-'+objID+' > li').find('.hoverTab').each(function(){ var orisrcs=$(this).attr('src'); $(this).attr('src', orisrcs.replace('_h','_o')); }); var orisrc=$(this).children().children('.hoverTab').attr('src'); if(orisrc) { $(this).children().children('.hoverTab').attr('src', orisrc.replace('_o','_h')); } var currentItemIndex = obj.find('ul.tab.buddy-'+objID+' > li').index(this); //obj.find('.tabContent.buddy-'+objID+' > li').fadeOut(); obj.find('.tabContent.buddy-'+objID+' > li').hide(); obj.find('.tabContent.buddy-'+objID+' > li:eq('+currentItemIndex+')').fadeIn(); }); /*--end 淡入淡出----*/ if(options.trigger=='hover') { obj.find('.tab.buddy-'+objID+' > li').mouseover( function(){ $(this).click(); }); } } function agileTab_animation(obj, objID, itemSum, options) { obj.find('.tab.buddy-'+objID+' > li').hover( function(){ if(!$(this).parent().hasClass('stopAnimation')) $(this).click(); $(this).parent().addClass('stopAnimation'); $(document).stopTime("tabs"+objID); }, function() { }); var timing = options.animationInteval; if(options.animationFade){ $(document).everyTime(timing, "tabs"+objID, function(i) { obj.find('.tabArrow.buddy-'+objID+' > li.next').dblclick() }, 250); } else { $(document).everyTime(timing, "tabs"+objID, function(i) { obj.find('.tabArrow.buddy-'+objID+' > li.next').click() }, 250); } } return this.each(function() { obj = $(this); objID = $(this).attr('id'); //首先先把相關人員找出來, 啟動tab的動作 agileTab_targetBuddy(obj, objID); agileTab_tabTrigger(obj, objID, options); var itemSum = agileTab_contentNumber(obj, objID); // 如果neighborItem = true, 就執行agileTab_neighborItem()去產生一組包含前後選項的 ul > li -> 就可以執行往前或後一個tab的動作 if(options.neighborItem) agileTab_neighborItem(obj, objID, itemSum, options); //先把閒雜物件藏起來, 顯示第N各物件, 然後highlight對應的tab agileTab_cssHandler(obj, options); if(options.animation) agileTab_animation(obj, objID, itemSum, options); obj.find("ul.tab.buddy-"+objID+" > li").each(function(idx){ $(this).addClass("item-"+idx); }); obj.find("ul.tabContent.buddy-"+objID+" > li").each(function(idx){ $(this).addClass("item-"+idx); }); }); }; })(jQuery);