DHTML goodies Tab Control
(No Ratings Yet)
Loading ...Files in package
* tab-view.html = Main html file
* tab-view-demo2.html = Main html file(with two tab sets)
* js/ajax.js = Ajax (Library from http://twilightuniverse.com/projects/sack).
* js/tab-view.js = Main js file for this script
* css/tab-view.css = Cascading style sheet for the script
* externalfile.html = Sample file loaded by Ajax as content of dynamic created tab
* images/* = Images used in the script
Configuration
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>
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:
1. Title of tab, example: “Menu scripts”
2. Relative path to external file, example: “includes/external.inc”
Example:
<a href="#" onclick="addAjaxContentToTab('Menu scripts','includes/external.inc');return false">Add content</a><a></a>
Doctype?
There’s also a variable you have to modify if you’re not using a valid doctype in your document. This is needed for the tabs to display correctly in Internet Explorer. The doctype is specified in the first line of your code. Example:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
If no doctype is specified in your document, change the variable strictDocType from true to false. I.e.:
var strictDocType = false;
Demo: http://www.dhtmlgoodies.com/scripts/tab-view/tab-view.html
Download:http://www.dhtmlgoodies.com/scripts/tab-view/tab-view.zip
Source: http://www.dhtmlgoodies.com/index.html?whichScript=tab-view
Related Listings:
- Ajax Dynamic Tab Panes The latest two versions of Tab Panes by DHTMLGoodies, with...
- DHTML Window with Tab Support – AJAX Script Configuration You need to include one css file and one...
- Tab Menu There is a brand new Version of the Tab Menu...
- DHTML Rounded Corners Configuration Include files First, you need to include the js...
Do you like this post?
Tags:
4 Comments »
RSS feed for comments on this post. TrackBack URL
Leave a comment
|
|
August 26th, 2009 at 11:22 pm
how to call a tab manually.
August 26th, 2009 at 11:32 pm
You can call the tab manually by calling Javascript Function defined in tab-view.js
showTab();
requires tab index.
Index of active tab(0 = first tab, 1 = second tab…)
hopes it will help, for more details you may read the tab-view.js in detail
September 11th, 2009 at 11:29 am
Hello,
In file tab-views.js, Function tabClick(), is it possible to retrieve the tabTitle the active tab ?
I wish refresh the active tab on the click, but with addAjaxContentToTab, I need the tabTitle…
October 1st, 2009 at 8:13 pm
How will i know if the tab to be added is just the same and already added. So for example i click Menu scripts and i click again it will not add new Tab coz it already exist just turn the focus on the tab selected.