It's easy to configure this
script. You put your content into separate <DIV>s and then
call a javascript function which creates the tabs dynamically.
Example:
<div id="dhtmlgoodies_tabView1">
<div class="dhtmlgoodies_aTab">
Content of tab 1
</div>
<div class="dhtmlgoodies_aTab">
Content of tab 2
</div>
<div class="dhtmlgoodies_aTab">
Content of tab 3
</div>
<div class="dhtmlgoodies_aTab">
Content of tab 4
</div>
</div>
<script type="text/javascript">
initTabs(Array('Menu scripts','Calender',
'Menus','About us'),1,500,400);
</script>
<div id="dhtmlgoodies_tabView1">
is parent to the content of all your tabs. Inside it, you have
one <div class="dhtmlgoodies_aTab"> for each tab window. Put the
content of your tabs inside them.
You initialize the script by
calling the initTabs() function. Arguments sent to this are:
- ID of parent element,
example: dhtmlgoodies_tabView1
- Array('Menu
scripts','Calender','Menus','About us') = An array of tab
labels
- 1 = Index of active tab(0 =
first tab, 1 = second tab...)
- 500 = Width of tab pane
- 400 = Height of tab
pane(Use empty string("") if you want dynamic height)
- Array(false,true,true,true)
= Array of close button visibility. One item for each tab.
When set to true, a close button will appear at the top
right corner of the tab
Create new tab dynamically
You can call the function
createNewTab() when you need to create a new tab dynamically.
Arguments to this functions are:
- Tab title = Tab title as
string
- Content = Tab content as
string(optional)
- Url to content = Url to
file(optional). The content of this file will be loaded
dynamically by Ajax
Remove a tab
You can remove a tab by calling
the function deleteTab(tabTitle). Input to this function is the
label of the tab you want to remove, example:
deleteTab('Menu scripts');
Add content dynamically to one
of the tabs
You can use the function
addAjaxContentToTab to add content from an external file
dynamically to one of the tabs. This function takes two
arguments:
- Title of tab, example:
"Menu scripts"
- Relative path to external
file, example: "includes/external.inc"
Example:
<a href="http://freeajaxscripts.net/#"
onclick="addAjaxContentToTab('Menu scripts','includes/external.inc');return
false">Add content<A>