|
|
| (4 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /*
| |
| 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();
| |
| } );
| |
| } );
| |
