BLW Tab Viewer

jQuery Plugin Documentation

The BLW Tab Viewer is a jQuery plugin which requires you to follow a simple HTML pattern, along with some basic supporting CSS styles. As long as the HTML pattern as outlined below is kept consistant, any content you put inside it should work fine.

You may use the BLW Tab Viewer on whatever you want. The only stipulation is that you give credit back to me, by referencing benlwilliams.com/resources, if only in the source code. And contact me if you have anything to add/share/fix.

Download the blwtabviewer.zip

Documentation

So far, this has only been tested with jQuery version 1.5.2.
A simple working example can be found at the bottom of this page.

The HTML

Below is the bare minimum HTML.

<div class="blwTabViewer"><!-- wrapping div. Use any ID or Class you want as a target for JavaScript binding --> <div><!-- start tabs div --> <ul class="blwtabs"><!-- the blwtabs class name can be whatever you want, as long as you update it in the plugin options --> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> <li><a href="#tab4">Tab 4</a></li> <li><a href="#tab5">Tab 5</a></li> </ul> </div><!-- end tabs div --> <div><!-- start views div --> <ul class="blwviews"><!-- the blwviews class name can be whatever you want, as long as you update it in the plugin options --> <li id="tab1">tab one content</li> <li id="tab2">tab two content</li> <li id="tab3">tab three content</li> <li id="tab4">tab four content</li> <li id="tab5">tab five content</li> </ul> </div><!-- end tabs div --> </div><!-- end .blwTabViewer wrapping div -->

Some notes on the HTML

• In the above example, you'll probably want to use a class or ID on the wrapping div so that you can easily target it with the JavaScript. Although for some reason you don't want to, it can just be an un-named div and you can target it in any other way you choose.
• The <a> tags in the tabs and the IDs in the views <li> tags are optional, but I think more symantic. If javascript was not enabled, all views would be visible and clicking a tab would jump down to the correct view.
• Order matters. The first tab <li> must always match the contents of first view <li>. The second, the second. Etc.

The CSS

The following CSS code gives you just the basics, for a plain looking BLW Tab Viewer. You can use this as a starting point and fancy up with your own edits.

.blwtabs, .blwtabs > li, .blwviews, .blwviews > li { margin:0; padding:0; list-style-type:none; float:left; background-image:none; } .blwtabs { margin-top:15px; } .blwtabs a { color:#000; text-shadow:none; } .blwtabs > li { padding:0 7px; line-height:18px; text-align:center; background:#666; border:1px solid #555; border-bottom:none; color:#aaa; margin:0 5px 0 0; cursor:pointer; } .blwtabs > li.active { background:#ccc; color:#000; cursor:default; border:1px solid #aaa; border-bottom:none; position:relative; margin-top:-1px; padding-bottom:1px; top:1px; position:relative; } .blwviews { width:95%; clear:both; padding:10px; background:#ccc; border:1px solid #aaa; margin-bottom:15px; }

Some notes on the CSS

• Notice the use of the child selector, " > ". This is to prevent the styles from being applied to other nested lists that may be inside the .blwtabs or .blwviews immediate children list items.
• There's no need to hide the non-active views, as that will be taken care of by the plug-in. And if Javascript is not running, you'd want the views to be visible
• The plug-in assignes both the tabs and views <li> a class name of "active" when they are the currently selected or "active" pair.

The JavaScript

Initialize the BLW Tab Viewer by binding it to the wrapping div. In this example the " .blwTabViewer " div.

$('.blwTabViewer').blwtabviewer();

You can also set some optional values. Below are the default values, followed by the other optional values for each option in a comment.

$('.blwTabViewer').blwtabviewer({ transitionType: 'fade', // 'slide', 'none' transitionOutSpeed: 'fast', // 'normal', 'fast', or any number of milliseconds transitionInSpeed: 'normal', // 'normal', 'fast', or any number of milliseconds activeTab: 1, // Whatever tab number you want to start out as active. // If the tab doesn't exist, it defaults back to 1 tabsclass: 'blwtabs', // A custom class name of your choosing, to match your HTML viewsclass: 'blwviews' // ditto ⇧ });

Full Working Example