-
-
Save CableGuy67/5066602 to your computer and use it in GitHub Desktop.
<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> |
/* | |
* 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); |
/* | |
* 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); |
yeah....
The change at line 316 is just wrong. It seems to never allow the condition to be met breaking the back button when there is no hash in the url. I think I just missed the boat on what is supposed to be going on at this location...
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.
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.
While it may not be a perfect solution it seems to work for my purposes.
Changes:
line 288 in plugin.validId - changed the '.' to '*'
line 316 - added a check to see if there were any active panels. I have a feeling this change is not correct. It does however stop the default panel from becoming active if there is another active panel so when I browse back the panel that was active is still active. Without this going back to the tab with subtabs would always be set to the default panel.
line 576 - added a line to hide the panel before removing the active class. This was the one that was allowing multiple panels to display when using a link to go from a panel in one group to a panel in another group.
At the very least I hope this helps find some real solutions.