Class: HashTabs
Defined in: | src\jquery.hash-tabs.coffee |
Overview
Class for creating accessible tabs with jQuery $(".myTabContainer").hashTabs();
Variables Summary
- defaults =
-
{ /* @property [String] jQuery selector for individual tab panes (or tab content) */ tabPanelSelector: "section", /* @property [String] jQuery selector for main navigation element, with tab buttons or links */ tabNavSelector: "nav", /* @property [String] jQuery selector for anchor tags or links contained within the main navigation element */ tabButtonSelector: "a", /* @property [Integer] initial tab's index to show when the tabs are initialized @note Initial tab will default to first tab, or index of 0 @note You must provide a non-negative Integer within the range of the current active tabs */ initialTabIndex: 0, /* @property [String] (optional) initial tab's `id` or hash to show when tabs are initialized @example tab2 @note You must provide a non-negative Integer within the range of the current active tabs */ initialTabId: null, /* @property [String] class to append to initialized hash tabs @note Styles are applied using the `.hash-tabs` class. Expect unexpected output if you override this setting */ tabContainerClass: "hash-tabs", /* @property [Boolean] whether keyboard navigation is enabled @note anchor tag tab element must be selected (using tab) in order for keyboard navigation to work @note keyboard navigation binds to the left and right arrow keys on the keyboard */ keyboard: true, /* @property [Boolean] whether to apply smooth scrolling, in which the screen scrolls up to the top of the tab navigation panel when any tab is clicked @note Enabling smooth scrolling will override the default browser behaviour, in which the browser "jumps" to the top of an anchor */ smoothScroll: false, /* @property [Boolean] whether to enable debugging logging statements from within the console. Enable this if you are having trouble identifying an error */ debug: false }
Instance Method Summary
- # (void) generateTabs($tabContainer) Generate tabs based off of a selector
- # (*jQuery) listenClick($tabButtons) Listen to click events on the tab anchor elements, showing the corresponding tab, and adding WAI-ARIA attributes
- # (void) updateHash() Update the document's current URL to match that of the initially-configured and selected tab
-
#
(void)
triggerTab(url)
Trigger a given tab, provided its
id
$(".myTabs").hashTabs("triggerTab", "chocolates") // triggers tab with id #chocolates
-
#
(void)
triggerTabByIndex(index)
Trigger a given tab, provided its index
$(".myTabs").hashTabs("triggerTabByIndex", 3) // triggers tab with index 3
- # (void) listenKeyboard() Listen to keypress events of the left and right arrow keys, to enable keyboard tab navigation
-
#
(void)
selectPrevious()
Select and trigger clicking of the left-most tab of the currently-active tab
$(".myTabs").hashTabs("selectPrevious") // triggers left-most tab to current tab
-
#
(void)
selectNext()
Select and trigger clicking of the right-most tab of the currently-active tab
$(".myTabs").hashTabs("selectNext") // triggers right-most tab to current tab
Constructor Details
#
(void)
constructor(el, options)
Construct a new instance of HashTabs
Instance Method Details
#
(void)
generateTabs($tabContainer)
Generate tabs based off of a selector
#
(*jQuery)
listenClick($tabButtons)
Listen to click events on the tab anchor elements, showing the corresponding tab, and adding WAI-ARIA attributes
#
(void)
updateHash()
Update the document's current URL to match that of the initially-configured and selected tab
#
(void)
triggerTab(url)
<a>
) tag with the corresponding hash must be present in the tab navigation element
Trigger a given tab, provided its id
$(".myTabs").hashTabs("triggerTab", "chocolates") // triggers tab with id #chocolates
#
(void)
triggerTabByIndex(index)
<a>
) tag with the corresponding hash must be present in the tab navigation element
Trigger a given tab, provided its index
$(".myTabs").hashTabs("triggerTabByIndex", 3) // triggers tab with index 3
#
(void)
listenKeyboard()
Listen to keypress events of the left and right arrow keys, to enable keyboard tab navigation
#
(void)
selectPrevious()
Select and trigger clicking of the left-most tab of the currently-active tab
$(".myTabs").hashTabs("selectPrevious") // triggers left-most tab to current tab
#
(void)
selectNext()
Select and trigger clicking of the right-most tab of the currently-active tab
$(".myTabs").hashTabs("selectNext") // triggers right-most tab to current tab