James Linden

~# data ninja / linux guru / web dev geek / robotics nerd / idea machine / N6NRD

Code / Sidebar Tab Control jQuery Plugin

Sidebar Tab Control jQuery Plugin

Overview

The Sidebar Tab Control jQuery Plugin is a plugin to render a navigation tab control as a sidebar.

See the demo

Current version is 0.3.3

 
Screenshots of rendered plugin

Environment

  • jQuery 1.7.1 +
  • Chrome, Firefox 4 +, IE 8 +

Notes

  • This plugin is not multi-instance safe -- you can only use it once in a page.

Features

  • Positioning is controlled by a user-defined container DOM element.
  • Content is loaded via ajax, not embedded in hidden DOM elements.
  • Control may be assigned a user-defined ID value for external manipulation.

Howto

Using the plugin is simple:

Download jquery.sidebartabs.zip and relocate the CSS and JS files wherever you want them in your project.

Load the plugin CSS in the head tag of your page:

<link rel="stylesheet" type="text/css" href="jquery.sidebartabs.css">

Load the plugin JS at the end of your body tag:

<script src="jquery.sidebartabs.js"></script>

Add the initialization code to your onReady handler:

$( function() {

$('#container').sidebarTabs( {
containerid: 'sbtab',
tabs: [
{ label: 'Tab 1', url: 'content1.html', default: true },
{ label: 'Tab 2', url: 'content2.html' },
{ label: 'Tab 3', url: 'content3.html' },
]
} );

} );

Simply change #container to the DOM element you want to use.

The containerid configuration option is to specify the value of the generated id attribute for the plugins created DOM element.

If you want to customize the CSS, simply override the default classes:

  • Content -- div.sidebartabs div.sbtab-target
  • Tab -- div.sidebartabs li.sbtab-tab

License

This project is BSD (2 clause) licensed.

photo of James Linden
Founder / Head Geek
Digital Dock, LLC
aka kodekrash & N6NRD
Alexandria, LA USA

What I Do

Linux administration & virtualization
Data mining, storage & analysis
Web development

What I've Done

Rescued a skunk
Built Prime GNU/Linux
Contributed to Spidering Hacks