Bootstrap Tab History
Integrates HTML5 history state tracking
with bootstrap/tab.js
. This enables users to use history.forward
,
history.back
and location.reload
when navigating between tabs, as well as bookmarking specific tabs.
To enable tracking on a tab element, simply set the data-tab-history
attribute to true
(or a string denoting a tab
grouping).
Visit our GitHub Page to see it in action.
Installation
With Rails >= 3.1
Add bootstrap-tab-history-rails
to the Gemfile:
and then add the following line to app/assets/javascripts/application.js
:
//= require bootstrap-tab-history
Without Rails
Add bootstrap-tab-history.js
to your JavaScripts.
Configuration
Element options
Individual elements are configured by setting the following data attributes:
data-tab-history
- Required. Set totrue
to enable tracking on a tab. Can also be set to an arbitrary string value to support pages with multiple tab groups.data-tab-history-anchor-y-offset
- When the anchor portion of the URI is used to activate a tab, scroll down to the given offset, rather than the element with the givenid
attribute. Set to null to disable. Only relevant ifBootstrapTabHistory.options.showTabsBasedOnAnchor
is true.data-tab-history-changer
- 'push' - Use
history.pushState
to updatehistory.state
. This will allow the use ofhistory.forward
andhistory.back
as users switch tabs. - 'replace' - Use
history.replaceState
to updatehistory.state
. This will leave users on the same page w.r.t.history.forward
andhistory.back
as they switch tabs.
- 'push' - Use
data-tab-history-update-url
- Iftrue
, update the URL in the calls tohistory.pushState
andhistory.replaceState
. Whenfalse
,null
is passed as the third parameter to these calls.
For data attributes which are interpreted as "truthy" values (i.e. data-tab-history
and
data-tab-history-update-url
), an empty string is treated as equivalent to true
.
Global options
BootstrapTabHistoryoptions = // Default value corresponding to the `data-tab-history-anchor-y-offset` attribute. defaultAnchorYOffset: 0 // Default value corresponding to the `data-tab-history-changer` attribute. defaultChanger: 'replace' // Default value corresponding to the `data-tab-history-update-url` attribute. defaultUpdateURL: false // Should the anchor portion of the loaded URI be used to activate a single tab if no history was // present on page load. showTabsBasedOnAnchor: true;
Example
An extremely simple example can be found at data/example.html
, with the relevant portion
duplicated below.
Tab 1:1 Tab 1:2 Sample content for Tab 1:1. Sample content for Tab 1:2.