Ajax Tabs Content documentation
The following documents Ajax Tabs Content script, from its HTML structure to the methods you can call to further manipulate it.
HTML Syntax:
<head>
<link rel="stylesheet" type="text/css"
href="ajaxtabs.css" />
<script type="text/javascript" src="ajaxtabs.js">
/***********************************************
* Ajax Tabs Content script v2.2- (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>
</head>
<body>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" class="selected"
rel="#default">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>
<div id="countrydivcontainer"
style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
//Optional default content here.
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
- id="countrytabs": Give the main container of your tab links a unique ID (ie: "
countrytabs"). All links ("A" elements) within this container will be scanned by the script for special meaning. - rel="#default|containerid|#iframe": For each tab link that should reveal content when clicked on,
add a "
rel" attribute inside its link tag with one of three possible values: "#default",id_of_container_div, or "#iframe". This in combination with the link'shrefattribute determines what external file to fetch, and how to display it. Most commonly you'll be usingcontainerid, which corresponds to the ID of the container DIV on the page in which to load the Ajax fetched content. "#default"and "#iframe" on the other hand are both special keywords. "#default"causes the tab to show no external content but instead what's embedded directly inside the container DIV, while#iframecauses the tab to show its content inside anIFRAMEtag instead of via Ajax. - rev="divid1, divid2, etc": For each tab link, you can also insert a rev attribute to simultanously toggle the visibility of arbitrary DIVs on the page. See Example #1 below.
- class="selected": If you wish a certain tab to be selected by default when the page loads,
give the tab in question a
class="selected"assignment. By default it should be added inside the link itself ("A"). However, the script can also be told to look for such as class in the link's parent container instead (in this case, "LI"). This is useful depending on how the CSS for your tabs are structured. - A tab can also just act as a regular link,
with the absence of the "
rel" attribute (ie: the "Dynamic Drive" tab at the very end).
Main script function and methods syntax:
| Constructor | Description |
|---|---|
new ddajaxtabs(CSSTabsId, contentContainerID)Required |
Main ddajaxtabs() constructor function to
create a new instance of Ajax Tabs Content.Parameter:
Example: var countries=new ddajaxtabs("countrytabs", "countrydivcontainer") |
|
Methods |
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(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> 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 Ajax Tabs Content. 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: countries.init()
//Just start up the script 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:
Example: Based on the following sample tabs layout: <ul id="countrytabs" class="shadetabs"> Here is how to dynamically select two of its tabs anywhere on the page: <!--Selects 2nd tab
within Tab instance "countries" --> |
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 via a link on the page. Parameter:
Example: Based on the following sample tabs layout: <ul id="countrytabs" class="shadetabs"> Here's how to create "forward" and "back" pagination links: <a href="javascript:countries.cycleit('prev')">Back</a> | <a href="javascript:countries.cycleit('next')">Forward</a> |
instance.loadajaxpage(pageurl) |
Use this method to directly load an external page into
the Ajax Content Container via Ajax. The method can be called anywhere
on the page, such as inside a link on the page. The page to load must be
from your own server, as the loading process is via Ajax, and
subject to Ajax in-house domain restrictions. Example: The below link loads a page into the Ajax Tabs Content instance " <!--Load
"canada.htm" into the the Ajax Tabs Content Container --> |
instance.loadiframepage(pageurl) |
Use this method to directly load an external page into
the Ajax Content Container via IFRAME. The script will replace whatever
was previously in the Content Content container with an IFRAME
tag instead, and load the specified page into the IFRAME. This method
allows you to load pages both on your server and from outside domains.<!--Load
"Google Homepage" into the the Ajax Tabs Content Container --> |
instance.onajaxpageload=function(pageurl){ |
A custom event handler you can use to execute your own code whenever a tab with content fetched via Ajax is clicked on. See the section on "Nesting Ajax Tabs" for more info. |
Example #1- Expanding of arbitrary DIVs on the page enabled
A tab can not only manipulate load an external page, but also toggle the
visibility of arbitrary DIVs on the main page itself 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:
<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>
<div id="flowerdivcontainer" style="border:1px solid gray; width:350px; height:
200px; background-color: lightyellow; padding: 5px">
</div>
<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="external1.htm" rel="flowerdivcontainer" class="selected">Tab
1</a></li>
<li><a href="external2.htm" rel="flowerdivcontainer"
rev="flowernote, flowernote2">Tab 2</a></li>
<li><a href="external3.htm" rel="flowerdivcontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="flowerdivcontainer"
rev="flowernote3">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/">Ajax
Tabs script</a></li>
</ul>
</div>
<br style="clear: left" />
<script type="text/javascript">
var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
</script>
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 fetch and load "external2.htm", but also
toggle the visibility of the two arbitrary DIVs
anywhere on the page called "flowernote" and "flowernote2".
Clicking on Tab 4 will load "external4.htm" while also hiding "flowernote"
and "flowernote2". In other words, the DIVs specified using the "rev"
attribute are interlinked.
Make sure the code to initialize Ajax Tabs 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 #2- 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="external1.htm" rel="countrydivcontainer" class="selected"><img
src="tab1.gif" /></a>
<a href="external2.htm" rel="countrydivcontainer"><img src="tab2.gif" /></a></li>
<a href="external3.htm" rel="countrydivcontainer"><img src="tab3.gif" /></a>
<a href="external4.htm" rel="countrydivcontainer"><img src="tab4.gif" /></a>
</div>
Example #3- 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="external1.htm"
rel="countrydivcontainer">Tab 1</a></div>
<div><a href="external2.htm" rel="countrydivcontainer">Tab 2</a></div>
<div><a href="external3.htm" rel="countrydivcontainer">Tab 3</a></div>
<div><a href="external4.htm" rel="countrydivcontainer">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 ddajaxtabs("whatsnew")
newcontent.setselectedClassTarget("linkparent") //"link" or "linkparent"
newcontent.init()
</script>
Example #4- 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.
Table Of Contents
This script consists of an index page plus a supplementary page: