User:Locke/common.js
Want an adless experience? Log in or Create an account.
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl+F5 or Ctrl+R (Command+R on a Mac)
- Google Chrome: press Ctrl+Shift+R (Command+Shift+R on a Mac)
- Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl+F5
- Konqueror: click Reload or press F5
- Opera: clear the cache in Tools → Preferences
/* Tabs script based on data attributes for arbitrary target selection and limited structure restrictions First, create a target out of any element (usually a div): -add class "tabtarget" -add a unique id Next, add content to the target: -each must be a div and a direct child to the target -add class "tabcontent2" -add attribute "data-tab-content" to hold the unique (for this target) identifying string --for multiple selectors, this string is an ordered, space-separated list of selections for each selector --otherwise, it can be anything Then, add selectors: -they can go anywhere, inside or outside of the target -add class "tabset" -set attribute "data-tab-target" to the target's id -set attribute "data-tab-type" to "click" or "hover" to control how the tabs are activated -optional: set attribute "data-tab-selector" to an integer if you wish to have more than one tabset for the same selector --by default, tabsets start at 0 and increment by 1 for each subsequent definition Finally, add tabs: -they must be descendants of their respective tabsets -add class "tab2" -set attribute "data-tab-selection" to a unique (for this selector) identifying string --this will get combined with the selections of other selectors to form the string found in "data-tab-content" in the target --for example, data-tab-selection="April" in selector 0 plus data-tab-selection="1st" in selector 1 will match data-tab-content="April 1st" */ $( function() { var tabstate = {}; var autoTargetCtr = 0; $( 'body' ).on( 'mouseover click', '.zdw-tab', function( e ) { var tab = $( this ); var tabset = tab.closest( '.zdw-tabset' ); // first check if we care about this event if ( (tabset.data( 'tabType' ) || '').split( ' ' ).indexOf( e.type ) == -1 ) { return; } // get or set target tabcontainer var target = tabset.data( 'tabTarget' ); if ( !target ) { // target wasn't specified, so use the nearest container var container = tabset.closest( '.zdw-tabcontainer' ) if ( !container ) { console.err( 'Tabset did not specify a target, and no parent tab container was found' ); return; } target = container.attr( 'id' ); if ( !target ) { // container didn't specify an id, so generate a new one target = 'tabtarget-' + ++autoTargetCtr; container.attr( 'id', target ); } // otherwise it was specified or another tabset generated it already tabset.attr( 'data-tab-target', target ); } tabstate[ target ] = tabstate[ target ] || []; // get or set tabset selector var selector = tabset.data( 'tabSelector' ); if ( selector == undefined ) { // 0 is okay selector = tabstate[ target ].length; tabset.attr( 'data-tab-selector', selector ); } // get tab selection var selection = tab.data( 'tabSelection' ); // deselect and hide everything tabset.find( '.zdw-tab' ).removeClass( 'active' ); $( '#' + target + ' .zdw-tabcontent' ).not( '#' + target + ' .zdw-tabs .zdw-tabcontent' ).hide(); // don't hide nested contents // show the selected content and activate the tab tabstate[ target ][ selector ] = selection; var content = tabstate[ target ].join( ' ' ); $( '#' + target + ' div[data-tab-content="' + content + '"]' ).show(); tab.addClass( 'active' ); } ); } );