Maximum nesting AJAX tabs??

**dd8081** · 05-04-2009, 12:12 PM

1) Script Title: Nesting Ajax Tabs

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uppliment2.htm

3) Describe problem:
just curious, how many ajax tabs can i used to nesting ajax tabs?

on the example, only use ajax tabs inside once more?? can i add ajax tabs on inside again? making another level inside?

like:

Code:

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("externalnested.htm")!=-1){
provinces=new ddajaxtabs("provincetabs", "provincedivcontainer")
provinces.setpersist(true)
provinces.setselectedClassTarget("link") //"link" or "linkparent"
provinces.init()
}

}

provinces.onajaxpageload=function(pageurl){
if (pageurl.indexOf("externalnested1.htm")!=-2){
cities=new ddajaxtabs("citytabs", "citydivcontainer")
cities.setpersist(true)
cities.setselectedClassTarget("link") //"link" or "linkparent"
cities.init()
}

}

</script>

Can i do that?? becoz isn't working on my test!!!
Please Help??

Thx
Dimas

**ddadmin** · 05-05-2009, 05:50 AM

Yep, you can have multiple levels of nested tabs- for each level of nested tabs, the invocation code needs to be nested as well. Here's a full working example:

demo.htm:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />

<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">

/***********************************************
* Ajax Tabs Content script v2.2- © 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>

</head>

<body>

<h3><a href="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/">Ajax Tabs Content script Instructions</a></h3>

<h3>Demo #1- Basic implementation</h3>

<p>
- First tab shows default, inline content directly added inside container DIV<br />
- 2nd and 3rd tabs show external pages fetched via <b>Ajax</b><br />
- 4th tab shows an external page fetched via <b>IFRAME</b><br />
</p>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="externalnested.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">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

countries.onajaxpageload=function(pageurl){
	if (pageurl.indexOf("externalnested.htm")!=-1){
		provinces=new ddajaxtabs("provincetabs", "provincedivcontainer")
		provinces.setpersist(true)
		provinces.setselectedClassTarget("link") //"link" or "linkparent"
		provinces.init()
		provinces.onajaxpageload=function(pageurl){
		if (pageurl.indexOf("externalnested2.htm")!=-1){
			cities=new ddajaxtabs("citytabs", "citydivcontainer")
			cities.setpersist(true)
			cities.setselectedClassTarget("link") //"link" or "linkparent"
			cities.init()
		}
		}


	}
}

</script>

Contents of externalnested.htm:

Code:

<ul id="provincetabs" class="shadetabs">
<li><a href="external1.htm" rel="provincedivcontainer">Tab 1</a></li>
<li><a href="external2.htm" rel="provincedivcontainer">Tab 2</a></li>
<li><a href="externalnested2.htm" rel="provincedivcontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="provincedivcontainer">Tab 4</a></li>
</ul>

<div id="provincedivcontainer" style="padding: 10px; border-top: 1px solid gray;">
</div>

Contents of externalnested2.htm:

Code:

<ul id="citytabs" class="shadetabs">
<li><a href="external1.htm" rel="citydivcontainer">Tab 1x</a></li>
<li><a href="external2.htm" rel="citydivcontainer">Tab 2x</a></li>
<li><a href="external3.htm" rel="citydivcontainer">Tab 3x</a></li>
<li><a href="external4.htm" rel="citydivcontainer">Tab 4x</a></li>
</ul>

<div id="citydivcontainer" style="padding: 10px; border-top: 1px solid gray;">
</div>

Thread: Maximum nesting AJAX tabs??

Thread Tools

Search Thread

Maximum nesting AJAX tabs??

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions