Last active
December 14, 2015 09:39
-
-
Save CableGuy67/5066602 to your computer and use it in GitHub Desktop.
1. open page, tabs are created and show correctly. Both tab containers have the data-easytabs="true" added to them. Each tab and subtab can be navigated to. Reopen page with no hashes to start.
2. click link in TAB1 that will go to the paragraph in SUBTAB2 in TAB3
3. The panel elements now contain, TAB1 - class="" style="display: none;" TAB2 - s…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>nested demo</title> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> | |
<script src="jquery.hashchange.min.js"></script> | |
<script src="jquery.easytabs.mroth.js"></script> | |
<style> | |
/* Example Styles for Demo */ | |
.etabs, .sub-etabs { margin: 0; padding: 0; } | |
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; } | |
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; } | |
.tab a:hover { text-decoration: underline; } | |
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; } | |
.tab a.active { font-weight: bold; } | |
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; } | |
.panel-container { margin-bottom: 10px; } | |
</style> | |
<script type="text/javascript"> | |
$(document).ready( function() { | |
$('#tab-container,#subtab-container').easytabs(); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="tab-container" class='tab-container'> | |
<ul class='etabs'> | |
<li class='tab'><a href="#tab1">Tab 1</a></li> | |
<li class='tab'><a href="#tab2">Tab 2</a></li> | |
<li class='tab'><a href="#tab3">Tab 3</a></li> | |
</ul> | |
<div class='panel-container'> | |
<div id="tab1"> | |
<h2>Heading of Tab 1</h2> | |
<a href="#onsubtab">goto subtab 2</a> | |
</div> | |
<div id="tab2"> | |
<h2>Heading of Tab 2</h2> | |
</div> | |
<div id="tab3"> | |
<h2>Heading of Tab 3</h2> | |
<div id="subtab-container" class="tab-container"> | |
<ul class="sub-etabs"> | |
<li class="tab"><a href="#subtab1">Subtab 1</a></li> | |
<li class="tab"><a href="#subtab2">Subtab 2</a></li> | |
<li class="tab"><a href="#subtab3">Subtab 3</a></li> | |
</ul> | |
<div class="panel-container"> | |
<div id="subtab1"> | |
<h2>Heading of Subtab 1</h2> | |
</div> | |
<div id="subtab2"> | |
<h2>Heading of Subtab 2</h2> | |
<p id="onsubtab">Just a paragraph on subtab 2.</p> | |
</div> | |
<div id="subtab3"> | |
<h2>Heading of Subtab 3</h2> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* jQuery EasyTabs plugin 3.1.1 | |
* | |
* Copyright (c) 2010-2011 Steve Schwartz (JangoSteve) | |
* | |
* Dual licensed under the MIT and GPL licenses: | |
* http://www.opensource.org/licenses/mit-license.php | |
* http://www.gnu.org/licenses/gpl.html | |
* | |
* Date: Tue Jan 26 16:30:00 2012 -0500 | |
*/ | |
( function($) { | |
$.easytabs = function(container, options) { | |
// Attach to plugin anything that should be available via | |
// the $container.data('easytabs') object | |
var plugin = this, | |
$container = $(container), | |
defaults = { | |
animate: true, | |
panelActiveClass: "active", | |
tabActiveClass: "active", | |
defaultTab: "li:first-child", | |
animationSpeed: "normal", | |
tabs: "> ul > li", | |
updateHash: true, | |
cycle: false, | |
collapsible: false, | |
collapsedClass: "collapsed", | |
collapsedByDefault: true, | |
uiTabs: false, | |
transitionIn: 'fadeIn', | |
transitionOut: 'fadeOut', | |
transitionInEasing: 'swing', | |
transitionOutEasing: 'swing', | |
transitionCollapse: 'slideUp', | |
transitionUncollapse: 'slideDown', | |
transitionCollapseEasing: 'swing', | |
transitionUncollapseEasing: 'swing', | |
containerClass: "", | |
tabsClass: "", | |
tabClass: "", | |
panelClass: "", | |
cache: true, | |
panelContext: $container | |
}, | |
// Internal instance variables | |
// (not available via easytabs object) | |
$defaultTab, | |
$defaultTabLink, | |
transitions, | |
lastHash, | |
skipUpdateToHash, | |
animationSpeeds = { | |
fast: 200, | |
normal: 400, | |
slow: 600 | |
}, | |
// Shorthand variable so that we don't need to call | |
// plugin.settings throughout the plugin code | |
settings; | |
// ============================================================= | |
// Functions available via easytabs object | |
// ============================================================= | |
plugin.init = function() { | |
plugin.settings = settings = $.extend({}, defaults, options); | |
// Add jQuery UI's crazy class names to markup, | |
// so that markup will match theme CSS | |
if ( settings.uiTabs ) { | |
settings.tabActiveClass = 'ui-tabs-selected'; | |
settings.containerClass = 'ui-tabs ui-widget ui-widget-content ui-corner-all'; | |
settings.tabsClass = 'ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all'; | |
settings.tabClass = 'ui-state-default ui-corner-top'; | |
settings.panelClass = 'ui-tabs-panel ui-widget-content ui-corner-bottom'; | |
} | |
// If collapsible is true and defaultTab specified, assume user wants defaultTab showing (not collapsed) | |
if ( settings.collapsible && options.defaultTab !== undefined && options.collpasedByDefault === undefined ) { | |
settings.collapsedByDefault = false; | |
} | |
// Convert 'normal', 'fast', and 'slow' animation speed settings to their respective speed in milliseconds | |
if ( typeof(settings.animationSpeed) === 'string' ) { | |
settings.animationSpeed = animationSpeeds[settings.animationSpeed]; | |
} | |
$('a.anchor').remove().prependTo('body'); | |
// Store easytabs object on container so we can easily set | |
// properties throughout | |
$container.data('easytabs', {}); | |
plugin.setTransitions(); | |
plugin.getTabs(); | |
addClasses(); | |
setDefaultTab(); | |
bindToTabClicks(); | |
initHashChange(); | |
initCycle(); | |
// Append data-easytabs HTML attribute to make easy to query for | |
// easytabs instances via CSS pseudo-selector | |
$container.attr('data-easytabs', true); | |
}; | |
// Set transitions for switching between tabs based on options. | |
// Could be used to update transitions if settings are changes. | |
plugin.setTransitions = function() { | |
transitions = ( settings.animate ) ? { | |
show: settings.transitionIn, | |
hide: settings.transitionOut, | |
speed: settings.animationSpeed, | |
collapse: settings.transitionCollapse, | |
uncollapse: settings.transitionUncollapse, | |
halfSpeed: settings.animationSpeed / 2 | |
} : | |
{ | |
show: "show", | |
hide: "hide", | |
speed: 0, | |
collapse: "hide", | |
uncollapse: "show", | |
halfSpeed: 0 | |
}; | |
}; | |
// Find and instantiate tabs and panels. | |
// Could be used to reset tab and panel collection if markup is | |
// modified. | |
plugin.getTabs = function() { | |
var $matchingPanel; | |
// Find the initial set of elements matching the setting.tabs | |
// CSS selector within the container | |
plugin.tabs = $container.find(settings.tabs), | |
// Instantiate panels as empty jquery object | |
plugin.panels = $(), | |
plugin.tabs.each(function(){ | |
var $tab = $(this), | |
$a = $tab.children('a'), | |
// targetId is the ID of the panel, which is either the | |
// `href` attribute for non-ajax tabs, or in the | |
// `data-target` attribute for ajax tabs since the `href` is | |
// the ajax URL | |
targetId = $tab.children('a').data('target'); | |
$tab.data('easytabs', {}); | |
// If the tab has a `data-target` attribute, and is thus an ajax tab | |
if ( targetId !== undefined && targetId !== null ) { | |
$tab.data('easytabs').ajax = $a.attr('href'); | |
} else { | |
targetId = $a.attr('href'); | |
} | |
targetId = targetId.match(/#([^\?]+)/)[0].substr(1); | |
$matchingPanel = settings.panelContext.find("#" + targetId); | |
// If tab has a matching panel, add it to panels | |
if ( $matchingPanel.length ) { | |
// Store panel height before hiding | |
$matchingPanel.data('easytabs', { | |
position: $matchingPanel.css('position'), | |
visibility: $matchingPanel.css('visibility') | |
}); | |
// Don't hide panel if it's active (allows `getTabs` to be called manually to re-instantiate tab collection) | |
$matchingPanel.not(settings.panelActiveClass).hide(); | |
plugin.panels = plugin.panels.add($matchingPanel); | |
$tab.data('easytabs').panel = $matchingPanel; | |
// Otherwise, remove tab from tabs collection | |
} else { | |
plugin.tabs = plugin.tabs.not($tab); | |
} | |
}); | |
}; | |
// Select tab and fire callback | |
plugin.selectTab = function($clicked, callback) { | |
var url = window.location, | |
hash = url.hash.match(/^[^\?]*/)[0], | |
$targetPanel = $clicked.parent().data('easytabs').panel, | |
ajaxUrl = $clicked.parent().data('easytabs').ajax; | |
// Tab is collapsible and active => toggle collapsed state | |
if( settings.collapsible && ! skipUpdateToHash && ($clicked.hasClass(settings.tabActiveClass) || $clicked.hasClass(settings.collapsedClass)) ) { | |
plugin.toggleTabCollapse($clicked, $targetPanel, ajaxUrl, callback); | |
// Tab is not active and panel is not active => select tab | |
} else if( ! $clicked.hasClass(settings.tabActiveClass) || ! $targetPanel.hasClass(settings.panelActiveClass) ){ | |
activateTab($clicked, $targetPanel, ajaxUrl, callback); | |
// Cache is disabled => reload (e.g reload an ajax tab). | |
} else if ( ! settings.cache ){ | |
activateTab($clicked, $targetPanel, ajaxUrl, callback); | |
} | |
}; | |
// Toggle tab collapsed state and fire callback | |
plugin.toggleTabCollapse = function($clicked, $targetPanel, ajaxUrl, callback) { | |
plugin.panels.stop(true,true); | |
if( fire($container,"easytabs:before", [$clicked, $targetPanel, settings]) ){ | |
plugin.tabs.filter("." + settings.tabActiveClass).removeClass(settings.tabActiveClass).children().removeClass(settings.tabActiveClass); | |
// If panel is collapsed, uncollapse it | |
if( $clicked.hasClass(settings.collapsedClass) ){ | |
// If ajax panel and not already cached | |
if( ajaxUrl && (!settings.cache || !$clicked.parent().data('easytabs').cached) ) { | |
$container.trigger('easytabs:ajax:beforeSend', [$clicked, $targetPanel]); | |
$targetPanel.load(ajaxUrl, function(response, status, xhr){ | |
$clicked.parent().data('easytabs').cached = true; | |
$container.trigger('easytabs:ajax:complete', [$clicked, $targetPanel, response, status, xhr]); | |
}); | |
} | |
// Update CSS classes of tab and panel | |
$clicked.parent() | |
.removeClass(settings.collapsedClass) | |
.addClass(settings.tabActiveClass) | |
.children() | |
.removeClass(settings.collapsedClass) | |
.addClass(settings.tabActiveClass); | |
$targetPanel | |
.addClass(settings.panelActiveClass) | |
[transitions.uncollapse](transitions.speed, settings.transitionUncollapseEasing, function(){ | |
$container.trigger('easytabs:midTransition', [$clicked, $targetPanel, settings]); | |
if(typeof callback == 'function') callback(); | |
}); | |
// Otherwise, collapse it | |
} else { | |
// Update CSS classes of tab and panel | |
$clicked.addClass(settings.collapsedClass) | |
.parent() | |
.addClass(settings.collapsedClass); | |
$targetPanel | |
.removeClass(settings.panelActiveClass) | |
[transitions.collapse](transitions.speed, settings.transitionCollapseEasing, function(){ | |
$container.trigger("easytabs:midTransition", [$clicked, $targetPanel, settings]); | |
if(typeof callback == 'function') callback(); | |
}); | |
} | |
} | |
}; | |
// Find tab with target panel matching value | |
plugin.matchTab = function(hash) { | |
return plugin.tabs.find("[href='" + hash + "'],[data-target='" + hash + "']").first(); | |
}; | |
// Find panel with `id` matching value | |
plugin.matchInPanel = function(hash) { | |
return ( hash && plugin.validId(hash) ? plugin.panels.filter(':has(' + hash + ')').first() : [] ); | |
}; | |
// Make sure hash is a valid id value (admittedly strict in that HTML5 allows almost anything without a space) | |
// but jQuery has issues with such id values anyway, so we can afford to be strict here. | |
plugin.validId = function(id) { | |
return id.substr(1).match(/^[A-Za-z]+[A-Za-z0-9\-_:\.]*$/);//MROTH | |
}; | |
// Select matching tab when URL hash changes | |
plugin.selectTabFromHashChange = function() { | |
var hash = window.location.hash.match(/^[^\?]*/)[0], | |
$tab = plugin.matchTab(hash), | |
$panel; | |
if ( settings.updateHash ) { | |
// If hash directly matches tab | |
if( $tab.length ){ | |
skipUpdateToHash = true; | |
plugin.selectTab( $tab ); | |
} else { | |
$panel = plugin.matchInPanel(hash); | |
// If panel contains element matching hash | |
if ( $panel.length ) { | |
hash = '#' + $panel.attr('id'); | |
$tab = plugin.matchTab(hash); | |
skipUpdateToHash = true; | |
plugin.selectTab( $tab ); | |
// If default tab is not active... | |
} else if ( ! $defaultTab.hasClass(settings.tabActiveClass) && ! settings.cycle ) { | |
// ...and hash is blank or matches a parent of the tab container or | |
// if the last tab (before the hash updated) was one of the other tabs in this container. | |
//console.log("$container name = "+$container.attr('id'), "\nhash = "+hash, "\nlastHash = "+lastHash, "\n$container.closest(hash).length = "+$container.closest(hash).length, "\nplugin.matchTab(lastHash).length = "+plugin.matchTab(lastHash).length); | |
if ( hash === '' || plugin.matchTab(lastHash).length || $container.closest(hash).length ) { | |
skipUpdateToHash = false; | |
if(hash==='' || plugin.matchTab(lastHash).length ){ | |
skipUpdateToHash = true; | |
plugin.selectTab( $defaultTabLink ); | |
} | |
} | |
} | |
} | |
} | |
}; | |
// Cycle through tabs | |
plugin.cycleTabs = function(tabNumber){ | |
if(settings.cycle){ | |
tabNumber = tabNumber % plugin.tabs.length; | |
$tab = $( plugin.tabs[tabNumber] ).children("a").first(); | |
skipUpdateToHash = true; | |
plugin.selectTab( $tab, function() { | |
setTimeout(function(){ plugin.cycleTabs(tabNumber + 1); }, settings.cycle); | |
}); | |
} | |
}; | |
// Convenient public methods | |
plugin.publicMethods = { | |
select: function(tabSelector){ | |
var $tab; | |
// Find tab container that matches selector (like 'li#tab-one' which contains tab link) | |
if ( ($tab = plugin.tabs.filter(tabSelector)).length === 0 ) { | |
// Find direct tab link that matches href (like 'a[href="#panel-1"]') | |
if ( ($tab = plugin.tabs.find("a[href='" + tabSelector + "']")).length === 0 ) { | |
// Find direct tab link that matches selector (like 'a#tab-1') | |
if ( ($tab = plugin.tabs.find("a" + tabSelector)).length === 0 ) { | |
// Find direct tab link that matches data-target (lik 'a[data-target="#panel-1"]') | |
if ( ($tab = plugin.tabs.find("[data-target='" + tabSelector + "']")).length === 0 ) { | |
// Find direct tab link that ends in the matching href (like 'a[href$="#panel-1"]', which would also match http://example.com/currentpage/#panel-1) | |
if ( ($tab = plugin.tabs.find("a[href$='" + tabSelector + "']")).length === 0 ) { | |
$.error('Tab \'' + tabSelector + '\' does not exist in tab set'); | |
} | |
} | |
} | |
} | |
} else { | |
// Select the child tab link, since the first option finds the tab container (like <li>) | |
$tab = $tab.children("a").first(); | |
} | |
plugin.selectTab($tab); | |
} | |
}; | |
// ============================================================= | |
// Private functions | |
// ============================================================= | |
// Triggers an event on an element and returns the event result | |
var fire = function(obj, name, data) { | |
var event = $.Event(name); | |
obj.trigger(event, data); | |
return event.result !== false; | |
} | |
// Add CSS classes to markup (if specified), called by init | |
var addClasses = function() { | |
$container.addClass(settings.containerClass); | |
plugin.tabs.parent().addClass(settings.tabsClass); | |
plugin.tabs.addClass(settings.tabClass); | |
plugin.panels.addClass(settings.panelClass); | |
}; | |
// Set the default tab, whether from hash (bookmarked) or option, | |
// called by init | |
var setDefaultTab = function(){ | |
var hash = window.location.hash.match(/^[^\?]*/)[0], | |
$selectedTab = plugin.matchTab(hash).parent(), | |
$panel; | |
// If hash directly matches one of the tabs, active on page-load | |
if( $selectedTab.length === 1 ){ | |
$defaultTab = $selectedTab; | |
settings.cycle = false; | |
} else { | |
$panel = plugin.matchInPanel(hash); | |
// If one of the panels contains the element matching the hash, | |
// make it active on page-load | |
if ( $panel.length ) { | |
hash = '#' + $panel.attr('id'); | |
$defaultTab = plugin.matchTab(hash).parent(); | |
// Otherwise, make the default tab the one that's active on page-load | |
} else { | |
$defaultTab = plugin.tabs.parent().find(settings.defaultTab); | |
if ( $defaultTab.length === 0 ) { | |
$.error("The specified default tab ('" + settings.defaultTab + "') could not be found in the tab set."); | |
} | |
} | |
} | |
$defaultTabLink = $defaultTab.children("a").first(); | |
activateDefaultTab($selectedTab); | |
}; | |
// Activate defaultTab (or collapse by default), called by setDefaultTab | |
var activateDefaultTab = function($selectedTab) { | |
var defaultPanel, | |
defaultAjaxUrl; | |
if ( settings.collapsible && $selectedTab.length === 0 && settings.collapsedByDefault ) { | |
$defaultTab | |
.addClass(settings.collapsedClass) | |
.children() | |
.addClass(settings.collapsedClass); | |
} else { | |
defaultPanel = $( $defaultTab.data('easytabs').panel ); | |
defaultAjaxUrl = $defaultTab.data('easytabs').ajax; | |
if ( defaultAjaxUrl && (!settings.cache || !$defaultTab.data('easytabs').cached) ) { | |
$container.trigger('easytabs:ajax:beforeSend', [$defaultTabLink, defaultPanel]); | |
defaultPanel.load(defaultAjaxUrl, function(response, status, xhr){ | |
$defaultTab.data('easytabs').cached = true; | |
$container.trigger('easytabs:ajax:complete', [$defaultTabLink, defaultPanel, response, status, xhr]); | |
}); | |
} | |
$defaultTab.data('easytabs').panel | |
.show() | |
.addClass(settings.panelActiveClass); | |
$defaultTab | |
.addClass(settings.tabActiveClass) | |
.children() | |
.addClass(settings.tabActiveClass); | |
} | |
}; | |
// Bind tab-select funtionality to namespaced click event, called by | |
// init | |
var bindToTabClicks = function() { | |
plugin.tabs.children("a").bind("click.easytabs", function(e) { | |
// Stop cycling when a tab is clicked | |
settings.cycle = false; | |
// Hash will be updated when tab is clicked, | |
// don't cause tab to re-select when hash-change event is fired | |
skipUpdateToHash = false; | |
// Select the panel for the clicked tab | |
plugin.selectTab( $(this) ); | |
// Don't follow the link to the anchor | |
e.preventDefault(); | |
}); | |
}; | |
// Activate a given tab/panel, called from plugin.selectTab: | |
// | |
// * fire `easytabs:before` hook | |
// * get ajax if new tab is an uncached ajax tab | |
// * animate out previously-active panel | |
// * fire `easytabs:midTransition` hook | |
// * update URL hash | |
// * animate in newly-active panel | |
// * update CSS classes for inactive and active tabs/panels | |
// | |
// TODO: This could probably be broken out into many more modular | |
// functions | |
var activateTab = function($clicked, $targetPanel, ajaxUrl, callback) { | |
plugin.panels.stop(true,true); | |
if( fire($container,"easytabs:before", [$clicked, $targetPanel, settings]) ){ | |
var $visiblePanel = plugin.panels.filter(":visible"), | |
$panelContainer = $targetPanel.parent(), | |
targetHeight, | |
visibleHeight, | |
heightDifference, | |
showPanel, | |
hash = window.location.hash.match(/^[^\?]*/)[0]; | |
if (settings.animate) { | |
targetHeight = getHeightForHidden($targetPanel); | |
visibleHeight = $visiblePanel.length ? setAndReturnHeight($visiblePanel) : 0; | |
heightDifference = targetHeight - visibleHeight; | |
} | |
// Set lastHash to help indicate if defaultTab should be | |
// activated across multiple tab instances. | |
lastHash = hash; | |
// TODO: Move this function elsewhere | |
showPanel = function() { | |
// At this point, the previous panel is hidden, and the new one will be selected | |
$container.trigger("easytabs:midTransition", [$clicked, $targetPanel, settings]); | |
// Gracefully animate between panels of differing heights, start height change animation *after* panel change if panel needs to contract, | |
// so that there is no chance of making the visible panel overflowing the height of the target panel | |
if (settings.animate && settings.transitionIn == 'fadeIn') { | |
if (heightDifference < 0) | |
$panelContainer.animate({ | |
height: $panelContainer.height() + heightDifference | |
}, transitions.halfSpeed ).css({ 'min-height': '' }); | |
} | |
if ( settings.updateHash && ! skipUpdateToHash ) { | |
//window.location = url.toString().replace((url.pathname + hash), (url.pathname + $clicked.attr("href"))); | |
// Not sure why this behaves so differently, but it's more straight forward and seems to have less side-effects | |
window.location.hash = '#' + $targetPanel.attr('id'); | |
} else { | |
skipUpdateToHash = false; | |
} | |
$targetPanel | |
[transitions.show](transitions.speed, settings.transitionInEasing, function(){ | |
$panelContainer.css({height: '', 'min-height': ''}); // After the transition, unset the height | |
$container.trigger("easytabs:after", [$clicked, $targetPanel, settings]); | |
// callback only gets called if selectTab actually does something, since it's inside the if block | |
if(typeof callback == 'function'){ | |
callback(); | |
} | |
}); | |
}; | |
if ( ajaxUrl && (!settings.cache || !$clicked.parent().data('easytabs').cached) ) { | |
$container.trigger('easytabs:ajax:beforeSend', [$clicked, $targetPanel]); | |
$targetPanel.load(ajaxUrl, function(response, status, xhr){ | |
$clicked.parent().data('easytabs').cached = true; | |
$container.trigger('easytabs:ajax:complete', [$clicked, $targetPanel, response, status, xhr]); | |
}); | |
} | |
// Gracefully animate between panels of differing heights, start height change animation *before* panel change if panel needs to expand, | |
// so that there is no chance of making the target panel overflowing the height of the visible panel | |
if( settings.animate && settings.transitionOut == 'fadeOut' ) { | |
if( heightDifference > 0 ) { | |
$panelContainer.animate({ | |
height: ( $panelContainer.height() + heightDifference ) | |
}, transitions.halfSpeed ); | |
} else { | |
// Prevent height jumping before height transition is triggered at midTransition | |
$panelContainer.css({ 'min-height': $panelContainer.height() }); | |
} | |
} | |
// Change the active tab *first* to provide immediate feedback when the user clicks | |
plugin.tabs.filter("." + settings.tabActiveClass).removeClass(settings.tabActiveClass).children().removeClass(settings.tabActiveClass); | |
plugin.tabs.filter("." + settings.collapsedClass).removeClass(settings.collapsedClass).children().removeClass(settings.collapsedClass); | |
$clicked.parent().addClass(settings.tabActiveClass).children().addClass(settings.tabActiveClass); | |
plugin.panels.filter("." + settings.panelActiveClass).hide();//MROTH | |
plugin.panels.filter("." + settings.panelActiveClass).removeClass(settings.panelActiveClass); | |
$targetPanel.addClass(settings.panelActiveClass); | |
if( $visiblePanel.length ) { | |
$visiblePanel | |
[transitions.hide](transitions.speed, settings.transitionOutEasing, showPanel); | |
} else { | |
$targetPanel | |
[transitions.uncollapse](transitions.speed, settings.transitionUncollapseEasing, showPanel); | |
} | |
} | |
}; | |
// Get heights of panels to enable animation between panels of | |
// differing heights, called by activateTab | |
var getHeightForHidden = function($targetPanel){ | |
if ( $targetPanel.data('easytabs') && $targetPanel.data('easytabs').lastHeight ) { | |
return $targetPanel.data('easytabs').lastHeight; | |
} | |
// this is the only property easytabs changes, so we need to grab its value on each tab change | |
var display = $targetPanel.css('display'), | |
// Workaround, because firefox returns wrong height if element itself has absolute positioning | |
height = $targetPanel | |
.wrap($('<div>', {position: 'absolute', 'visibility': 'hidden', 'overflow': 'hidden'})) | |
.css({'position':'relative','visibility':'hidden','display':'block'}) | |
.outerHeight(); | |
$targetPanel.unwrap(); | |
// Return element to previous state | |
$targetPanel.css({ | |
position: $targetPanel.data('easytabs').position, | |
visibility: $targetPanel.data('easytabs').visibility, | |
display: display | |
}); | |
// Cache height | |
$targetPanel.data('easytabs').lastHeight = height; | |
return height; | |
}; | |
// Since the height of the visible panel may have been manipulated due to interaction, | |
// we want to re-cache the visible height on each tab change, called | |
// by activateTab | |
var setAndReturnHeight = function($visiblePanel) { | |
var height = $visiblePanel.outerHeight(); | |
if( $visiblePanel.data('easytabs') ) { | |
$visiblePanel.data('easytabs').lastHeight = height; | |
} else { | |
$visiblePanel.data('easytabs', {lastHeight: height}); | |
} | |
return height; | |
}; | |
// Setup hash-change callback for forward- and back-button | |
// functionality, called by init | |
var initHashChange = function(){ | |
// enabling back-button with jquery.hashchange plugin | |
// http://benalman.com/projects/jquery-hashchange-plugin/ | |
if(typeof $(window).hashchange === 'function'){ | |
$(window).hashchange( function(){ | |
plugin.selectTabFromHashChange(); | |
}); | |
} else if ($.address && typeof $.address.change === 'function') { // back-button with jquery.address plugin http://www.asual.com/jquery/address/docs/ | |
$.address.change( function(){ | |
plugin.selectTabFromHashChange(); | |
}); | |
} | |
}; | |
// Begin cycling if set in options, called by init | |
var initCycle = function(){ | |
var tabNumber; | |
if (settings.cycle) { | |
tabNumber = plugin.tabs.index($defaultTab); | |
setTimeout( function(){ plugin.cycleTabs(tabNumber + 1); }, settings.cycle); | |
} | |
}; | |
plugin.init(); | |
}; | |
$.fn.easytabs = function(options) { | |
var args = arguments; | |
return this.each(function() { | |
var $this = $(this), | |
plugin = $this.data('easytabs'); | |
// Initialization was called with $(el).easytabs( { options } ); | |
if (undefined === plugin) { | |
plugin = new $.easytabs(this, options); | |
$this.data('easytabs', plugin); | |
} | |
// User called public method | |
if ( plugin.publicMethods[options] ){ | |
return plugin.publicMethods[options](Array.prototype.slice.call( args, 1 )); | |
} | |
}); | |
}; | |
})(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* jQuery hashchange event - v1.3 - 7/21/2010 | |
* http://benalman.com/projects/jquery-hashchange-plugin/ | |
* | |
* Copyright (c) 2010 "Cowboy" Ben Alman | |
* Dual licensed under the MIT and GPL licenses. | |
* http://benalman.com/about/license/ | |
*/ | |
(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this); |
around line 316 I changed the logic to,
if ( hash === '' || plugin.matchTab(lastHash).length || $container.closest(hash).length ) {
skipUpdateToHash = false;
if(hash==='' || plugin.matchTab(lastHash).length ){
skipUpdateToHash = true;
plugin.selectTab( $defaultTabLink );
}
}
This allows for navigation both by the forward and back browser buttons as well as the tabs maintaining their state when clicking on the tabs. I may still be getting some extra parent tabs in the history but since I can't manage to figure out a better way this is going to have to do.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
so lose this,
&& ! plugin.panels.filter("." + settings.panelActiveClass).length
at line 316 restoring it to
else if ( ! $defaultTab.hasClass(settings.tabActiveClass) && ! settings.cycle )
and figure out why the default tab is overwhelming the group even if there is another active tab.