User:Locke/common.js: Difference between revisions
Jump to navigation
Jump to search
Want an adless experience? Log in or Create an account.
(deselect tabs in all tabsets sharing selector, not just in the current tabset) |
m (update doc) |
||
Line 3: | Line 3: | ||
First, create a target out of any element (usually a div): | First, create a target out of any element (usually a div): | ||
-add class " | -add class "zdw-tabcontainer" | ||
-add a unique id | -add a unique id | ||
Next, add content to the target: | Next, add content to the target: | ||
-each must be a div and a direct child to the target | -each must be a div and a direct child to the target | ||
-add class " | -add class "zdw-tabcontent" | ||
-add attribute "data-tab-content" to hold the unique (for this target) identifying string | -add attribute "data-tab-content" to hold the unique (for this target) identifying string | ||
--for multiple selectors, | --for multiple selectors, use multiple "data-tab-content-selectorname" attributes | ||
Then, add selectors: | Then, add selectors: | ||
-they can go anywhere, inside or outside of the target | -they can go anywhere, inside or outside of the target | ||
-add class "tabset" | -add class "zdw-tabset" | ||
-set attribute "data-tab-target" to the target's id | -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 | -set attribute "data-tab-type" to "click" or "hover" to control how the tabs are activated | ||
-optional: set attribute "data-tab-selector" to | -optional: set attribute "data-tab-selector" to some string if you wish to have more than one tabset for the same selector | ||
Finally, add tabs: | Finally, add tabs: | ||
-they must be descendants of their respective tabsets | -they must be descendants of their respective tabsets | ||
-add class " | -add class "zdw-tab" | ||
-set attribute "data-tab-selection" to a unique (for this selector) identifying string | -optional: set attribute "data-tab-selection" to a unique (for this selector) identifying string | ||
--this will | --this will be compared to "data-tab-content-selectorname" in the target | ||
*/ | */ | ||
Revision as of 08:23, 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 "zdw-tabcontainer" -add a unique id Next, add content to the target: -each must be a div and a direct child to the target -add class "zdw-tabcontent" -add attribute "data-tab-content" to hold the unique (for this target) identifying string --for multiple selectors, use multiple "data-tab-content-selectorname" attributes Then, add selectors: -they can go anywhere, inside or outside of the target -add class "zdw-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 some string if you wish to have more than one tabset for the same selector Finally, add tabs: -they must be descendants of their respective tabsets -add class "zdw-tab" -optional: set attribute "data-tab-selection" to a unique (for this selector) identifying string --this will be compared to "data-tab-content-selectorname" in the target */ $( 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(); } ); } );