Ajax Lessons|Simple Ajax Tutorials and News

DOM Dynamic Tabs allows you to easily create tabbed content on the fly without creating any HTML.

Examples

View examples

Installation

To install copy the dynamicTabs.js into your project directory and ensure that you have included prototype.js and dynamicTabs.js in your page.

Usage

DOM Dynamic Tabs is a very easy simple to use, it can be used right out of the box with little code. The first thing that you need to do is create an instance of the Dynamic Tab object. To do this simply insert the following code into a JavaScript block.

var tabs = new dynamicTabs;

You have now created an instance of the dynamicTabs object. Now you are ready to set the data and properties of your new tab object. To start lets add some data. To do this we must access the tab property of dynamicTabs.

tabs.tab = [
    {'name':'Tab 1','color':'red','content':'This is content for the tab 1.'},
    {'name':'Tab 2','color':'blue','content':'This is content for the tab 2.'},
    {'name':'Tab 3','color':'green','content':'This is content for the tab 3.'}
];

We provide the tab data using JSON, you do not need to know JSON to use the dynamic tab creator. The first parameter name will be the text that shows on the tab. The second parameter color will be the color of the tab and by default the color of the content area. The third parameter, content will provide data to the content area. This can easily be generated by serverside and a database for easy modification/addition to your dynamic tabs.

Now it’s time to display the tabs and the content area. We need to add the following one line of code.

tabs.init();

What this does is tell the object that the data has been provided and that the properties are set. You can now view the dynamic tabs and content on your site.

Note: If you plan on using more than one tabbed content area on one page you must give the object a seperate instance.

tabs.instance = ‘newInstance’;

Properties

You can change many of the properties of the dynamic tab creator such as the width, height, borders, high light colors etc. Below is a full list of all of the properties.

totalWidth

This is the total width of the container

tabWidth

Width of tabs, if not set will default to number of tabs/width

tabHeight

Height of tabs

tabPadding

Padding of tabs

tabText

Color of tab text

activeTabText

Color of tab text when selected/active

tabMsOverTabColor

Color of tab on mouse over, when mouse out will return to previous color

tabMsOverColor

Color of tab text on mouse over

tabMsOutColor

Color of text on mouse out

hiliteTabColor

Color of tab while selected/active

marginBetweenTabs

Margin to the right of the tabs

contentHeight

Height of the content viewing area

contentPadding

Padding of the content viewing area

contentText

Color of the content text

contentColor

Color of the content background, will default to tab color if not set

border

Set CSS border properties here, applies to tab and content area

You can change many of the properties of the dynamic tab creator such as the width, height, borders, high light colors etc. Below is a full list of all of the properties.

Examples

View examples

Download

Download dynamicTabs.js here

Support

Visit Ajax Lessons Disscussion Boards

Technorati Tags: Tabs, DOM, JavaScript, Tutorial, Ajax Lessons