www.gusucode.com > 200套html5精品模板101_150 > 200套html5精品模板101_150/120/js/jquery.featurestabs.js
/* Features Tabs jQuery Plugin dedicated to Crystal Theme Created by: Arlind Nushi Date: Jun 5, 2012 */ (function($) { var self = this; var defaults = { resizeDuration: 300, fadeDuration: 100, pullTop: 25 }; var o = defaults; var showTab = function(container, tab_id, height, no_animation) { // If busy, stop animation if(container.data('featurestabs-isbusy') && ! no_animation) return; var all_tabs = container.find('.side_tab .features_tab'); var tabs_nav = container.find('td.tabs_nav'); var to_show = container.find('.side_tab .features_tab[data-id="'+tab_id+'"]'); var to_hide = all_tabs.not(to_show); var to_show_items = to_show.find('.service_entry'); var to_hide_items = to_hide.find('.service_entry'); var to_show_total_items = to_show_items.length; var to_hide_total_items = to_hide_items.length; to_show_items.add(to_hide_items).css('position', 'relative'); // Check If is current tab if(container.data('featurestabs-currenttab') == tab_id) return; // Set Current Tab container.data('featurestabs-currenttab', tab_id); // No Animation if(no_animation) { to_hide.hide(); to_show.show(); tabs_nav.css({height: height}); } // Animation Allowed else { // Make it busy! container.data('featurestabs-isbusy', true); // Hide One By One to_hide_items.each(function(i) { var $this = $(this); setTimeout(function() { $this.transit({opacity: 0, top: o.pullTop}, o.resizeDuration); }, (i * o.fadeDuration)); }); tabs_nav.transit({height: height}, o.resizeDuration); setTimeout(function() { to_hide.hide(); to_show.show(); to_show_items.fadeTo(0,0); to_show_items.each(function(i) { var $this = $(this); setTimeout(function() { $this.css({top: -o.pullTop}).transit({opacity: 1, top: 0}, o.resizeDuration); }, (i * o.fadeDuration)); }); var finish_time = to_hide_total_items * o.fadeDuration + o.fadeDuration * to_show_total_items; setTimeout(function(){ container.data('featurestabs-isbusy', false); }, finish_time) }, o.fadeDuration * to_hide_total_items) } }; var setTabHeights = function(container) { var all_tabs = container.find('.side_tab .features_tab'); var tabs_nav = container.find('td.tabs_nav'); var tab_links = container.find('td.tabs_nav a'); tab_links.each(function() { var tab_link = $(this); var tab_id = tab_link.attr('rel'); var related_tabs = all_tabs.filter('[data-id="'+tab_id+'"]'); all_tabs.hide(); related_tabs.show(); var height = tabs_nav.height(); tab_link.data('featurestabs-height', height); }); var first = tab_links.first(); showTab(container, first.attr('rel'), first.data('featurestabs-height'), true); }; var showMiniTab = function(container, tab_id, no_animation) ///sssssssss { var all_tabs = container.find('.features_tab'); var tabs_nav = container.find('.tabs_nav_small'); var to_show = container.find('.features_tab[data-id="'+tab_id+'"]'); var to_hide = all_tabs.not(to_show); // If tab is visible, don't fade it away if(container.data('featurestabs-currenttab') == tab_id) return; container.data('featurestabs-currenttab', tab_id); if(no_animation) { to_hide.hide(); to_show.show(); } else { to_hide.stop().fadeTo(o.fadeDuration * 2, 0, function() { to_hide.hide(); to_show.stop().fadeTo(o.fadeDuration * 2, 1); }); } } var generateForSmallScreens = function(container) { var small_screen_env = $('<div class="small_screen_only" />'); var all_tabs = container.find('.side_tab .features_tab'); var tabs_nav = container.find('td.tabs_nav').clone(); var tab_links = tabs_nav.find('a'); var new_tabs_nav = $('<div class="tabs_nav_small clearfix" />'); // Setup Mini Tabs var active_tab_def = tab_links.filter('[class~=active]'); var has_active_tab = active_tab_def.length > 0; tab_links.each(function(i) { var tab_link = $(this); var tab_id = tab_link.attr('rel'); // Set First Last Tab Class if(i == 0) tab_link.addClass('first'); else if(tab_links.length - 1 == i) tab_link.addClass('last'); new_tabs_nav.append(tab_link); var related_tabs = all_tabs.filter('[data-id="'+tab_id+'"]'); var tab_group = $('<div class="features_tab" data-id="'+tab_id+'" />'); // Add Tab Items related_tabs.each(function(j) { var $cloned = $(this).clone(); tab_group.append($cloned.find('.service_entry')); }); // Hide Other Tabs (just one active) if( ! has_active_tab && i == 0) { tab_link.addClass('active'); active_tab_def = tab_link; } // Add Tab Group small_screen_env.append(tab_group); // Set Click Event for Tab Link tab_link.click(function(ev) { ev.preventDefault(); tab_links.removeClass('active'); tab_link.addClass('active'); showMiniTab(small_screen_env, tab_id); }); }); small_screen_env.prepend(new_tabs_nav); // Append After Features Tabs container.after(small_screen_env); // Show Active Tab showMiniTab(small_screen_env, active_tab_def.attr('rel'), true); }; $.fn.featuresTabs = function(options) { $.extend(defaults, options); this.each(function(i) { var container = $(this); var instance = {}; generateForSmallScreens(container); setTabHeights(container); var tab_links = container.find('td.tabs_nav a'); // Setup Tab Links var total_tabs = tab_links.length; var active_tab_def = tab_links.filter('[class~=active]'); var has_active_tab = active_tab_def.length > 0; tab_links.each(function(i) { var tab_link = $(this); var class_to_add = ''; if(i == 0) { class_to_add = 'first'; if( ! has_active_tab) { class_to_add += ' active'; active_tab_def = tab_link; } } else if(i+1 == total_tabs) class_to_add = 'last'; tab_link.addClass(class_to_add); tab_link.click(function(ev) { ev.preventDefault(); if(container.data('featurestabs-isbusy')) return false; tab_links.removeClass('active'); tab_link.addClass('active'); var tab_id = tab_link.attr('rel'); showTab(container, tab_id, tab_link.data('featurestabs-height')); }); }); // Show Active Tab (At Start) showTab(container, active_tab_def.attr('rel'), active_tab_def.data('featurestabs-height'), true); container.data('featurestabsinstance', instance); }); }; })(jQuery);