jquery.mjs.nestedSortable.js
1 week ago
jquery.ui.touch-punch.min.js
1 week ago
nestedpages-factory.js
1 week ago
nestedpages.bulk-actions.js
1 week ago
nestedpages.check-all.js
1 week ago
nestedpages.clone.js
1 week ago
nestedpages.confirm-delete.js
1 week ago
nestedpages.dropdowns.js
1 week ago
nestedpages.formatter.js
1 week ago
nestedpages.hidden-item-count.js
1 week ago
nestedpages.manual-sync.js
1 week ago
nestedpages.menu-links.js
1 week ago
nestedpages.menu-search.js
1 week ago
nestedpages.menu-toggle.js
1 week ago
nestedpages.modals.js
1 week ago
nestedpages.move-post.js
1 week ago
nestedpages.nesting.js
1 week ago
nestedpages.new-post.js
1 week ago
nestedpages.page-toggle.js
1 week ago
nestedpages.post-search.js
1 week ago
nestedpages.quickedit-link.js
1 week ago
nestedpages.quickedit-post.js
1 week ago
nestedpages.settings-admin-customization.js
1 week ago
nestedpages.settings-reset.js
1 week ago
nestedpages.settings.js
1 week ago
nestedpages.sync-menu-setting.js
1 week ago
nestedpages.tabs.js
1 week ago
nestedpages.trash-with-children.js
1 week ago
nestedpages.trash.js
1 week ago
nestedpages.userprefs-reset.js
1 week ago
nestedpages.wpml.js
1 week ago
nestedpages.tabs.js
64 lines
| 1 | /** |
| 2 | * Tabs |
| 3 | * |
| 4 | * @author Kyle Phillips |
| 5 | * |
| 6 | * To use, include links with a data-tab-toggle attribute which matches the tab pane's data-tab-pane attribute |
| 7 | * The tabs and panes should all the same data-tab-group attribute value |
| 8 | * Add a CSS selector of .tab-pane to panes to hide them |
| 9 | */ |
| 10 | var NestedPages = NestedPages || {}; |
| 11 | NestedPages.Tabs = function() |
| 12 | { |
| 13 | var self = this; |
| 14 | var $ = jQuery; |
| 15 | |
| 16 | self.selectors = { |
| 17 | tabToggle : 'data-np-tab-toggle', |
| 18 | tabPane : 'data-np-tab-pane', |
| 19 | tabGroup : 'data-np-tab-group' |
| 20 | } |
| 21 | |
| 22 | self.bindEvents = function() |
| 23 | { |
| 24 | $(document).on('click', '[' + self.selectors.tabToggle + ']', function(e){ |
| 25 | e.preventDefault(); |
| 26 | self.toggleTabs($(this)); |
| 27 | }); |
| 28 | } |
| 29 | |
| 30 | /** |
| 31 | * Toggle the Tabs |
| 32 | */ |
| 33 | self.toggleTabs = function(tab) |
| 34 | { |
| 35 | var tabGroup = $(tab).attr(self.selectors.tabGroup); |
| 36 | var tabPanes = $('*[' + self.selectors.tabGroup + '=' + tabGroup + '][' + self.selectors.tabPane + ']'); |
| 37 | var activeTab = $(tab).attr(self.selectors.tabToggle); |
| 38 | var buttons = $('*[' + self.selectors.tabGroup + '=' + tabGroup + '][' + self.selectors.tabToggle + ']'); |
| 39 | var listItems = []; |
| 40 | |
| 41 | for ( var i = 0; i < buttons.length; i++ ){ |
| 42 | listItems[i] = $(buttons[i]).parent('li')[0]; |
| 43 | } |
| 44 | |
| 45 | $(tabPanes).hide(); |
| 46 | $(buttons).removeClass('active'); |
| 47 | $(listItems).removeClass('active'); |
| 48 | |
| 49 | $.each(tabPanes, function(){ |
| 50 | if ( $(this).attr(self.selectors.tabPane) == activeTab ) $(this).show(); |
| 51 | }); |
| 52 | |
| 53 | $.each(buttons, function(){ |
| 54 | if ( $(this).attr(self.selectors.tabToggle) == activeTab ) { |
| 55 | $(this).addClass('active'); |
| 56 | $(this).parent('li').addClass('active'); |
| 57 | } |
| 58 | }); |
| 59 | |
| 60 | $(document).trigger('tabs-changed', [activeTab, tabGroup, tab]); |
| 61 | } |
| 62 | |
| 63 | return self.bindEvents(); |
| 64 | } |