Tab Content documentation and
examples
The below explains all the methods of Tab Content script at your disposal:
ddtabcontent() constructor function and methods
| Constructor |
Description |
new ddtabcontent(tabcontainerID)Required |
Main ddtabcontent() constructor function to
create a new instance of Tab Content script.
Parameter:
- tabcontainerID: ID of the container that
surrounds your tab links. Typically a
DIV or a UL
element.
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:
- true/false: Boolean value (true or false
without quotes around it!).
|
instance.setselectedClassTarget(targetstring) |
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>
<li><a href="#" rel="tcontent2" class="selected">Tab
2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
If you insert class="selected" elsewhere in the tab's
hierarchy (ie: the "LI" element instead), the script will no
longer select that tab by default, as it doesn't know to look for the
declaration there.
Based on the way your tabs are styled, you may want to
add class="selected" to the parent container of each
tab link instead. For example, this may be appropriate for the below sample tab links which are each contained in a DIV tag:
<div><a href="#" rel="tcontent1">Tab
1</a></div>
<div class="selected"><a href="#"
rel="tcontent2">Tab 2</a></div>
<div><a href="#" rel="tcontent3">Tab 3</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 "link"
or "linkparent".
Parameter:
- targetstring: A string with two possible
values: "
link" or "linkparent". The
default is the former, telling the script to look for
class="selected" inside each tab's link itself. The
later tells the script to look for this CSS class in each of the
tab's parent container instead.
|
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:
- optional_integer: An optional parameter that if defined
puts the tabs in slideshow mode (so they auto rotate). The valid
value is an integer in milliseconds (ie: 3000 means 3 seconds), to
set the delay between rotation.
Examples:
myflowers.init()
//Just start up the script for this tab instance
mypets.init(4500) //Auto rotate through the tabs every 4.5 seconds for
this tab instance |
|
Additional method(s) |
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:
- tabid_or_position: Either a string representing the tab
link's ID, or an integer corresponding to that tab's position
relative to its peers, to select. For the later, the counting starts
at 0 (ie: 0=1st tab).
Example:
Based on the following sample tabs layout:
<ul id="flowertabs"
class="shadetabs">
<li><a href="#" rel="tcontent1" class="selected">Tab
1</a></li>
<li><a href="#" rel="tcontent2"
id="roses">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
</ul>
Here is how to dynamically select two of its tabs anywhere on the
page:
<!--Selects 2nd tab
within Tab instance "myflowers" -->
<a href="javascript:myflowers.expandit(1)">Select 2nd Tab</a>
<!--Selects tab with ID="roses" within Tab instance "myflowers" -->
<a href="javascript:myflowers.expandit('roses')">Select "Roses" tab</a> |
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:
- "next/prev": Enter either "
next" or "prev"
as its lone parameter.
Example:
Based on the following sample tabs layout:
<ul id="flowertabs"
class="shadetabs">
<li><a href="#" rel="tcontent1" class="selected">Tab
1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
</ul>
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- © Dynamic Drive DHTML code library
(www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* 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 1 here
Tab content 2 here
Tab content 2 here
Tab content 3 here
Tab content 3 here
Tab content 4 here
Tab content 4 here
Click here to select last tab
<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:
Arbitrary DIV 1
Arbitrary DIV 2
Arbitrary DIV 3
Tab content 1 here
Tab content 1 here
Tab content 2 here
Tab content 2 here
Tab content 3 here
Tab content 3 here
Tab content 4 here
Tab content 4 here
Click here to select 3rd tab
<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 2 here
Tab content 3 here
Tab content 3 here
Tab content 4 here
Tab content 4 here
This script consists of an index page plus a supplementary page:
|
Dynamic Content
