[bobster65]

Additional Enhancements

** Coming Soon ** (Adding on the fly lol)

Different Tab Layout Styles

The attached CSS file contains CSS for 3 different layout styles. To change the inverted style that is preset with the sample, edit the adv_portal_TAB_BLOCK_MAIN template (or what ever you named it) to one of the below samples.. both samples below have the tabs on the top.

This layout is for the shadetabs CSS

<ul id="tabs" class="shadetabs">
<li><a href="tabexternal.php" rel="tabcontainer" class="selected">Tab 1</a></li>
<li><a href="tabexternal2.php" rel="tabcontainer">Tab 2</a></li>
<li><a href="tabexternal3.php" rel="tabcontainer">Tab 3</a></li>
<li><a href="tabexternal4.php" rel="tabcontainer">Tab 4</a></li>
</ul>

<div id="divcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
</div>

<script type="text/javascript">

var mytabs=new ddajaxtabs("tabs", "divcontainer")
mytabs.setpersist(true)
mytabs.setselectedClassTarget("link") //"link" or "linkparent"
mytabs.init()

</script>

This layout is for the indentmenu CSS

<div id="tabs" class="indentmenu">
<ul>
<li><a href="tabexternal.php" rel="tabcontainer" class="selected">Tab 1</a></li>
<li><a href="tabexternal2.php" rel="tabcontainer">Tab 2</a></li>
<li><a href="tabexternal3.php" rel="tabcontainer">Tab 3</a></li>
<li><a href="tabexternal4.php" rel="tabcontainer">Tab 4</a></li>
</ul>
<br style="clear: left" />
</div>

<div id="divcontainer" style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">
</div>


<script type="text/javascript">

var mytabs=new ddajaxtabs("tabs", "divcontainer")
mytabs.setpersist(false)
mytabs.setselectedClassTarget("link")
mytabs.init()


</script>

Dynamically selecting a tab anywhere on your page

After your Ajax Tab script is initialized and displayed, you can dynamically select any of its tabs either based the tab's position relative to its peers, or its ID attribute (you have to assign it one first). The method to call is the following:

instance.expandit(tabid_or_position)

The parameter entered should either a string representing the tab link's ID attribute (you need to first assign one to that tab), 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). For example:

<p><a href="javascript: countries.expandit(2)">Select 3rd Tab</a></p>
<p><a href="javascript: countries.expandit('favorite')">Select Tab with ID "favorite"</a></p>

Dynamically loading an external page using Ajax

You can dynamically load an external page into the Ajax Tabs content container via Ajax, such as by using a link on the page. It's done with the below method:

instance.loadajaxpage(pageurl)

"pageurl" should be the full URL or path to the external file on your server. You cannot use this method to load a page from an outside domain, due to Ajax domain restrictions:

<p><a href="javascript: countries.loadajaxpage('external5.htm')">Load "external5.htm" into content container via Ajax</a></p>
<p><a href="javascript: countries.loadajaxpage('http://www.mysite.com/content/external5.htm')">Load into "external5.htm" content container via Ajax</a></p>

The selected tab in this case doesn't change when you load a new page directly into the content container using this method.

Dynamically loading an external page using IFRAME

You can also load an external page into the Ajax Tabs content container via IFRAME. What this does is erase whatever previous content was inside the content container, add an IFRAME tag into it, and load the desired page into the IFRAME:

instance.loadiframepage(pageurl)

"pageurl" should be the full URL or path to the external file on your server or beyond. Since the external page is loaded via IFRAME, the page can be either from your domain or outside as well (ie: http://www.google.com):

<p><a href="javascript: countries.loadiframepage('external5.htm')">Load "external5.htm" into content container via IFRAME</a></p>
<p><a href="javascript: countries.loadiframepage('http://www.google.com')">Load Google Homepage into content container via IFRAME</a></p>

In case you're wondering, the IFRAME tag that's added to the content container always carries the CSS class name "tabcontentiframe" and a name attribute of "_ddajaxtabsiframe-contentdivid", where "contentdivid" is the ID of the content container (ie: "countrydivcontainer"). You can further use this information to either style the IFRAME using CSS, or manipulate it somehow by directly accessing it via its name attribute.

Nesting Tabs..

It's possible to have nested Ajax Tabs. That is to say, the external page fetched by one of the tabs can in itself contain a new Ajax Tabs Content instance that loads other content when clicked on. The key is to enlist the help of the custom event handler "instance.onajaxpageload" on your main page to initialize the tabs that are on the external page.

Main Tab Template:

<ul id="countrytabs" class="shadetabs">
<li><a href="external1.htm" rel="countrycontainer" 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>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
</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){
var provinces=new ddajaxtabs("provincetabs", "provincedivcontainer")
provinces.setpersist(true)
provinces.setselectedClassTarget("link") //"link" or "linkparent"
provinces.init()
}

}

</script>

Nested Template:

<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="external3.htm" rel="provincedivcontainer">Tab 3</a></li>
</ul>

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

Notice the code in red- this is code that originally should appear inside "nested template", but since the tabs in question are on an external page and being called dynamically via Ajax as nested tabs, the code to invoke it needs to be moved to the main page instead and called via the "onajaxpageload" event handler. This event handler basically fires whenever a tab fetching Ajax content has completed loading the external page in question:

instance.onajaxpageload=function(pageurl){
//if (pageurl=="href_attribute_value_of_tab"){
//run custom code
}

Use the parameter "pageurl" to determine which tab exactly is being clicked on based on its href attribute value, and only fire your custom code for the correct tab. In this case, since I only want to call my custom code to initialize the nested tabs when the 3rd tab is clicked on, I'm testing for:

if (pageurl.indexOf("externalnested.htm")!=-1){
"
"
}

here, or the "href" attribute of the 3rd tab.

Use the above technique to set up nested tabs whenever the nested tabs are contained in an external page and fetched via the Ajax option. If the external page is fetched via IFRAME, the above will not work and is unnecessary anyhow, as the nested tab's invocation code should simply appear within the external page itself.