|
|
| (10 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"
| |
| */
| |
| console.log('outside function');
| |
| $( function() {
| |
| console.log('inside 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
| |
| console.log( e.type, tabset.data( 'tabTarget' ) );
| |
| if ( !$.inArray( e.type, (tabset.data( 'tabTarget' ) || '').split( ' ' ) ) ) {
| |
| console.log( 'dont care' );
| |
| 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' );
| |
| } );
| |
| } );
| |
