Skip to content

Instantly share code, notes, and snippets.

@CableGuy67

CableGuy67/easytab-nest-test.html

Last active December 14, 2015 09:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CableGuy67/5066602 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CableGuy67/5066602 to your computer and use it in GitHub Desktop.
Download ZIP
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…
Raw
easytab-nest-test.html
<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>
Raw
jquery.easytabs.mroth.js
/*
* 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);
Raw
jquery.hashchange.min.js
/*
* 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);
@CableGuy67
Copy link
Author

CableGuy67 commented Mar 15, 2013

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.

@CableGuy67
Copy link
Author

CableGuy67 commented Mar 16, 2013

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...

@CableGuy67
Copy link
Author

CableGuy67 commented Mar 16, 2013

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.

@CableGuy67
Copy link
Author

CableGuy67 commented Mar 17, 2013

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