JSTabbedPane: Simple Tabbed Pane for Javascript

There are a number of tabbed pane components out there in Javascript world. But most of the tabbed panes out there are provided just as a javascript library, and have been minified/obfuscated making tweaks difficult.

JSTabbedPane is a slick and simple little javascript component. You are free to modify it as you wish.

cheese

To use the component in your javascript code, have a look at the code snippet below. You basically need to define your <div>s and associated string titles, after which you then pass into the component. The tabbed panel component does the rest.

In the above code sample our three arbitrary divisions are passed into the addElementsToTabbedPane method. Then we append the view of the tabbed pane (the HTMLElement), onto the body of the HTML document using the line:

document.body.appendChild(this.tabbedPane.tpView);

Finally we select the first page (aka. pane) on our tabbed pane by calling this method :

this.tabbedPane.selectPage(0);

Here is the code for JSTabbedPane :

 

You will need this CSS :

JsFIddle :

fiddle

Notes on JSTabbedPane

  • JSTabbedPane: The main object. Simple accessability methods.
  • JSTabbedPaneMenu: Contains an array of the menu items.
  • JSTabbedPaneMenuItem: An item is a user defined DIV connected with a title. When the setActive method is called, the old page is removed and the new page is added.
  • There is no CSS file associated with this. All CSS stylings are in the code. Its up to you to do what you want with that.
  • The menu item view object is painted with a slight offset when it is active. You can remove this feature if you wish. You can also change the colour of the tab object it is selected.Hope you like it!Maren Muckenthaler

Posted in JavaScript | Tagged , , , | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

THREE_COLUMN_PAGE