Tabbed User Interface
A tabbed user interface is a familiar pattern that can easily be applied to a web page with light-weight JavaScript and easily customized styles.
Tab links are generally used to toggle display of content in the page but they can also navigate to new pages.
Tab Interface Features
The dyn-web Tabs JavaScript supports the following features:
- Tab component styles are easily customized using CSS.
- Tab pane content is accessible for users with no JavaScript or CSS, as well as for printing.
- Tabs can toggle display of in-page content or navigate to external pages.
- The Tabs JavaScript is extensible: additional functionality can be invoked when a tab is clicked.
- A tab can be preselected and passed in the URL.
- A tab can be activated from a link elsewhere on the page.
- The selected tab can be held in a cookie for reactivation on return to the page.
- Multiple tab sets can be included on a page.
About the Code
The Tabs Interface JavaScript does not rely on a library such as jQuery. It is very lean and lightweight, yet provides a considerable range of features.
The Tabs JavaScript provides the capability to activate tabs in ways other than clicking tabs themselves. For example, click the following link to select the Scrolling tab above.
The Tabs JavaScript also provides the means of invoking other functions on_init, before_hide and on_activate. This capability is demonstrated on this page in order to combine the tabs with the Scrolling Divs JavaScript scrollbar. View the source code of this page to see how this is done.
You can also preselect a tab in the URL, and retain a user's tab selection in a cookie. The documentation shows you how to implement these features. An example in the download file demonstrates.
You are invited to view the Tabs JavaScript file.
Styles for Tab Components
Styles for the tab components are easily customizable in the style sheet. This includes background colors, borders, font specifications, height, width and more.
You can set height on the tab container or you can specify different heights for individual tab panes. If you don't specify height on the tab container or tab panes, the container will be resized according to the amount of content in the displayed tab pane.
If you set height when the content may require more, you could use overflow auto for scroll bars to appear when needed. Or you could use the Scrolling Divs JavaScript scrollbar as demonstrated and discussed in the Scrolling tab.
This example sets height differently for each tab pane to demonstrate. The Features tab pane is specified height:auto. The Code and Styles panes set the height at 320px with overflow:auto so that browser default scroll bars will appear if this height is exceeded. The Scrolling tab pane also sets height at 320px but uses the scrolling divs code to provide custom scroll bars so that you can compare.
You are invited to view the style sheet.
Tabs with JavaScript Scrollbar
Tabs JavaScript is often incompatible with Scrolling Divs JavaScript, as well as other code that needs to calculate width and/or height. The CSS display: none specification means these dimensions are 0.
Either the tabs interface styles need to be adjusted to use position off screen instead of display, or the tabs code needs to be extensible, that is, capable of calling other functions when a tab is selected.
The dyn-web Tabs JavaScript includes on_init, before_hide and on_activate hooks as a means of supplementing the basic tasks of displaying tabpanes and styling selected tabs. These functions are used in this document to coordinate the tabs and scrolling divs code. View source to see.
When a tab is clicked to display a pane that contains a Scrolling Divs custom scrollbar, its dimensions need to be recalculated. In order to emulate default scroll bars, the code also calculates and holds onto the scroll position so that it can be restored when redisplayed.
An example demonstrating with multiple tabs using the scrolling divs code is provided with a license purchase.
Download the Tabs JavaScript. It's free!