Tabbed User Interface
Tab links are generally used to toggle display of content in the page but they can also navigate to new pages.
Tab Interface Features
- Tab component styles are easily customized using CSS.
- Tabs can toggle display of in-page content or navigate to external pages.
- 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
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.
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.
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.
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.