Tabs Binding

The tabs binding is a simple implementation of the ubiquitous javascript tabs.

Useful in template binding scenarios where you need tabs in a more complex Knockout interface.

If the jquery cookie plugin is included the tabs will remember which one was selected.

Note: This feature will not work in chrome from a local file version of this example due to a restriction on writing local cookies.

Usage

Markup

Javascript

Results

Options

Tab Set

Name Description Default
idAn id for the tab set, used to identify the the tab state in the cookie
tabsAn array of tab definitions.
rememberWhether the state of the tabs is saved in a cookiefalse

Tab Definitions

Name Description Default
nameThe name that appears in the tab itself. Also used as the unique identifier.'folder'
bodyCssClassThe css class applied to be inner tab body div.
createFunction used to create the tab body. This can be a function definition or the string name of the function. The tabs will try to evaluate the string if a function type is not detected (useful when the configuration is passed via json).
iconCssClassA cssClass applied to a span inside each tab, can be used to add an icon.
isActiveWhether the is selected initially.

Dependencies