Tab Content documentation and examples
The below explains all the methods of Tab Content script at your disposal:
Constructor | Description |
---|---|
new ddtabcontent(tabcontainerID) Required |
Main ddtabcontent() constructor function to
create a new instance of Tab Content script.Parameter:
Example: var myflowers=new ddtabcontent("flowertabs") |
Method |
Description |
instance.setpersist(true/false) |
Tells the script whether to persist the tabs' state for
the duration of the browser session. If enabled, the last clicked on tab
is remembered and recalled upon the visitor's return. Parameter:
|
instance.setselectedClassTarget(target) |
Changes the element the script sifts through to locate a
class="selected" declaration (which tells the script to
select that tab by default). By default the script expects the
declaration to be inserted directly inside the tab's link ("A ")
element:<li><a href="#" rel="tcontent1">Tab
1</a></li> If you insert Based on the way your tabs are styled, you may want to
add <div><a href="#" rel="tcontent1">Tab
1</a></div> To inform the script to search each tab's parent container for this CSS classname, you would invoke: instance.setselectedClassTarget("linkparent") The two keywords supported for the lone parameter are " Parameter:
|
instance.init(optional_integer) Required |
Call this function at the very end to initialize this
instance of the Tab Content script. You can pass it an optional integer
parameter to put the script into slideshow mode, so the tabs are
automatically rotated when the page loads based on a time interval until
the user clicks on a tab. Parameter:
Examples: myflowers.init()
//Just start up the script for this tab instance |
Description |
|
instance.expandit(tabid_or_position) |
This method lets you dynamically select any tab based on
either its ID attribute (you need to first assign one to that tab), or
position relative to its peer tab links. The method can be called
anywhere on the page, such as inside a link on the page. Parameter:
Example: Based on the following sample tabs layout: <ul id="flowertabs"
class="shadetabs"> Here is how to dynamically select two of its tabs anywhere on the page: <!--Selects 2nd tab
within Tab instance "myflowers" --> |
instance.cycleit("next/prev")
v2.1 method |
This method lets you move back or forth between tabs.
It's very useful for creating "Next" and "Previous" pagination links. The method can be called
anywhere on the page, such as inside a link on the page. Parameter:
Example: Based on the following sample tabs layout: <ul id="flowertabs"
class="shadetabs"> Here's how to create "forward" and "back" pagination links: <a href="javascript:myflowers.cycleit('prev')">Back</a> | <a href="javascript:myflowers.cycleit('next')">Forward</a> |
As a reminder, before calling this script, make sure you've added the prerequisite codes to the HEAD section of your page:
<link rel="stylesheet" type="text/css"
href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.js">
/***********************************************
* Tab Content script v2.0- (c) Dynamic Drive DHTML code library
(www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
Lets see 4 examples now that highlight different features of this script:
Example #1- Basic implementation
Tab content 1 here
Tab content 2 here
Tab content 3 here
Tab content 4 here
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding:
10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<p><b><a href="javascript:countries.expandit(3)">Click here to select last
tab</a></b></p>
Example #2- Expanding of arbitrary DIVs on the page enabled
A tab can not only manipulate the visibility of the sub content it's assigned
to, but also additional, arbitrary DIVs on the page if you wish. This is done using the "rev
" attribute
inside the tab link, and
setting them to the ID(s) of the arbitrary DIVs on the page to also
expand/contract:
Tab content 1 here
Tab content 2 here
Tab content 3 here
Tab content 4 here
<div id="flowernote" style="display:none;
position:absolute; right: 30px; width:150px; height:150px; background-color:red;
color:white">
Arbitrary DIV 1
</div>
<div id="flowernote2" style="display:none; position:absolute; right: 200px;
width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>
<div id="flowernote3" style="display:none; position:absolute; right: 30px;
width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>
<ul id="flowertabs" class="shadetabs">
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2"
rev="flowernote, flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4"
rev="flowernote3">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm">Tab
Content script</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding:
10px">
<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
<script type="text/javascript">
var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
</script>
<p><b><a href="javascript:myflowers.expandit(2)">Click here to select 3rd
tab</a></b></p>
Within the same "rev
" attribute, separate multiple IDs with a
comma (ie: rev="flowernote, flowernote2"
). With the above code, clicking on Tab 2 will not only display the Tab sub
content with ID "tcontent2
", but also the two arbitrary DIVs
anywhere on the page called "flowernote
" and "flowernote2
".
Clicking on Tab 4 will display "flowernote3
" while also hiding "flowernote
"
and "flowernote2
". In other words, the DIVs specified using the "rev
"
attribute are interlinked.
Make sure the code to intialize the Tab Content script appears
after all DIVs specified using both the "rel
"
and "rev
" attributes within the page source! Otherwise, an error
will be thrown with the script complaining one of the DIVs specified doesn't
exist.
Example #3- Using images for the tabs
You can completely customize the look of the tabs, such as changing them to
image links. The script treats every link ("A
") within the specified tab
container as a potential tab link, so as long as your tabs are some form of
links, it will work. For example:
<div id="photogallery">
<a href="#" rel="tcontent1" class="selected"><img
src="tab1.gif" /></a>
<a href="#" rel="tcontent2"><img src="tab2.gif" /></a></li>
<a href="#" rel="tcontent3"><img src="tab3.gif" /></a>
<a href="#" rel="tcontent4"><img src="tab4.gif" /></a>
</div>
Example #4- Changing the location the script looks for a class="selected" declaration
By default, if you wish a tab to be automatically selected when the page
loads, you add a class="selected"
attribute inside that tab link ("A
").
However, sometimes your CSS for the tabs may be structured in a way that would
make things a lot easier for you if you can add class="selected"
to
the parent of the tab link, and still have the "default selected" feature work. An example would be
tab links that are each wrapped around a DIV, and styling to the selected tab in
your CSS is on the DIV element, not the link:
<div id="whatsnew" class="someclass">
<div class="selected"><a href="#"
rel="tcontent1">Tab 1</a></div>
<div><a href="#" rel="tcontent2">Tab 2</a></div>
<div><a href="#" rel="tcontent3">Tab 3</a></div>
<div><a href="#" rel="tcontent4">Tab 4</a></div>
To tell the script to look for class="selected"
on each tab
link's parent container, you would call setselectedClassTarget()
with the string parameter in red:
<script type="text/javascript">
var newcontent=new ddtabcontent("whatsnew")
newcontent.setselectedClassTarget("linkparent") //"link" or "linkparent"
newcontent.init()
</script>
Example #5- Customizing the look of your Tabs
If it's not already clear after reading examples #3 and #4, you have full
flexibility
in customizing the look of your tabs, as long as you remember that every link
within your tab container will be scanned by the script for any special meaning
(ie: does it have a "rel
" attribute?), so don't put any
non relevant links in there. Using the codes for
Inverted Shift down menu in our
CSS
Horizontal Menus section, here is the result:
Tab content 2 here
Tab content 3 here
Tab content 4 here
Table Of Contents
This script consists of an index page plus a supplementary page: