User:Locke/common.js: Difference between revisions
Jump to navigation
Jump to search
Want an adless experience? Log in or Create an account.
(don't break when selector is 0) |
(deselect tabs in all tabsets sharing selector, not just in the current tabset) |
||
Line 33: | Line 33: | ||
var tab = $( this ); | var tab = $( this ); | ||
var tabset = tab.closest( '.zdw-tabset' ); | var tabset = tab.closest( '.zdw-tabset' ); | ||
var selector = tabset.data( 'tabSelector' ); | |||
// first check if we care about this event | // first check if we care about this event | ||
Line 38: | Line 39: | ||
return; | return; | ||
} | } | ||
// get target tabcontainer | // get target tabcontainer | ||
Line 53: | Line 50: | ||
return $( this ).closest( '.zdw-tabcontainer' ).is( container ); // that aren't nested inside other containers | return $( this ).closest( '.zdw-tabcontainer' ).is( container ); // that aren't nested inside other containers | ||
} ); | } ); | ||
// activate the tab | |||
tabsets.filter( '[data-tab-selector="' + selector + '"]' ).find( '.zdw-tab' ).removeClass( 'active' ); | |||
tab.addClass( 'active' ); | |||
// get selections | // get selections | ||
Line 63: | Line 64: | ||
// make sure this tabset takes priority in case multiple tabsets use the same selector | // make sure this tabset takes priority in case multiple tabsets use the same selector | ||
selections[ selector == undefined ? '' : selector ] = tab.data( 'tabSelection' ); | selections[ selector == undefined ? '' : selector ] = tab.data( 'tabSelection' ); | ||
Line 73: | Line 73: | ||
// show the selected content | // show the selected content | ||
var selectors = Object.keys( selections ).map( function( s ) { | var selectors = Object.keys( selections ).map( function( s ) { | ||
return '[data-tab-content-' + s + '="' + selections[ s ] + '"]'; | return '[data-tab-content-' + s + '="' + selections[ s ] + '"]'; | ||
} ); | } ); | ||
container.find( '.zdw-tabcontent' + selectors.join( '' ) ).show(); | container.find( '.zdw-tabcontent' + selectors.join( '' ) ).show(); | ||
} ); | } ); | ||
} ); | } ); |
Revision as of 06:08, June 27, 2020
/* 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() { $( 'body' ).on( 'mouseover click', '.zdw-tab', function( e ) { var tab = $( this ); var tabset = tab.closest( '.zdw-tabset' ); var selector = tabset.data( 'tabSelector' ); // first check if we care about this event if ( (tabset.data( 'tabType' ) || '').split( ' ' ).indexOf( e.type ) == -1 ) { return; } // get target tabcontainer var target = tabset.data( 'tabTarget' ); var container = target ? $( '#' + target ) : tabset.closest( '.zdw-tabcontainer' ); // get all tabsets for container var tabsets = target ? $( '.zdw-tabset[data-tab-target="' + target + '"]' ) : // get all tabsets with the same target container.find( '.zdw-tabset' ).filter( function() { // get all child tabsets return $( this ).closest( '.zdw-tabcontainer' ).is( container ); // that aren't nested inside other containers } ); // activate the tab tabsets.filter( '[data-tab-selector="' + selector + '"]' ).find( '.zdw-tab' ).removeClass( 'active' ); tab.addClass( 'active' ); // get selections var selections = {} tabsets.each( function() { var ts = $( this ); var s = ts.data( 'tabSelector' ); selections[ s == undefined ? '' : s ] = ts.find( '.active' ).data( 'tabSelection' ); } ); // make sure this tabset takes priority in case multiple tabsets use the same selector selections[ selector == undefined ? '' : selector ] = tab.data( 'tabSelection' ); // hide contents (except nested contents) container.find( '.zdw-tabcontent' ).filter( function() { return $( this ).closest( '.zdw-tabcontainer' ).is( container ); } ).hide(); // show the selected content var selectors = Object.keys( selections ).map( function( s ) { return '[data-tab-content-' + s + '="' + selections[ s ] + '"]'; } ); container.find( '.zdw-tabcontent' + selectors.join( '' ) ).show(); } ); } );