Resources

Resources » BLW Tab Viewer

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 consistent, 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.

Some notes on the HTML

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.

Some notes on the CSS

The JavaScript

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

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

Full Working Example

  • View One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  • View Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  • View Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  • View Four.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Aliquam tincidunt mauris eu risus.
    • Vestibulum auctor dapibus neque.
  • View Five. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.