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

Constructor Details

# (void) constructor(el, options)

Construct a new instance of HashTabs

Parameters:

  • el ( *jQuery ) tab container selector
  • options ( Array ) array for constructing new tabs

Instance Method Details

# (void) generateTabs($tabContainer)

Generate tabs based off of a selector

Parameters:

  • $tabContainer ( *jQuery ) tab container jQuery object

# (*jQuery) listenClick($tabButtons)

Listen to click events on the tab anchor elements, showing the corresponding tab, and adding WAI-ARIA attributes

Parameters:

  • $tabButtons ( *jQuery ) all tab anchor tags on a tabset

Returns:

  • ( *jQuery ) — $tabButtons

# (void) updateHash()

Note: Only fired once, when plugin initialized

Update the document's current URL to match that of the initially-configured and selected tab

# (void) triggerTab(url)

Note: A corresponding anchor (<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

Parameters:

  • url ( String ) the hash or id of the corresponding tab and anchor

# (void) triggerTabByIndex(index)

Note: A corresponding anchor (<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

Parameters:

  • non-negative ( Integer ) integer, corresponding to the (nth + 1) tab to display

# (void) listenKeyboard()

Note: tabs will cycle in a clockwise direction**. For example, if you are on the last tab to the right, selecting next will fold back over to the first tab (0) to the left

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

    Quickly fuzzy find classes, mixins, methods, file:

    Control the navigation frame:

    You can focus and blur the search input: