PDA

View Full Version : How to add content tab to Ajax Tabs Content Script (v 2.2)



bobth1019
05-16-2008, 11:55 AM
1) Script Title: Ajax Tabs Content Script (v 2.2)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

3) Describe problem: Simple question, I would think but I'm new so please excuse....

I want to configure a tab to for script that would replicate tab one on the URL above in "Demo #1" as in "The default content is added inline on the page and not fetched via Ajax, to avoid unnecessary fetching of external pages." So content within another tab that is not being called externally. So 3 tabs-there would a default content tab, a page called by Ajax tab, and another tab that is "static" for lack of a better word.

I've tried various alterations as in adding another div id besides "countrydivcontainer" as in "countrydivcontainer2" but no luck and similar attempts.

How do I do this? code below. Thank you very much for your help.

<ul id="countrytabs" class="shadetabs" style=" margin-left: 10px;">
<li><a href="#" rel="#default" class="selected">History/Overview</a></li>
<li><a href="/apps/pbcs.dll/section?Category=cityoverview2" rel="countrycontainer">City Information</a></li>
<li><a href="#" rel="#default" >Map</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px #ccc solid; width:470px; margin-bottom: 1em; padding: 10px; padding-top:0px; margin-left: 10px;">
<p><%ParagraphItems%></p>
</div>

<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>

ddadmin
05-17-2008, 01:17 AM
If you mean the ability to have more than 1 tab show inline content (ie: rel="#default"), try the below modified ajaxtabs.js. Then in your HTML, you'd do something like:


<ul id="countrytabs" class="shadetabs">
<li><a href="#1" rel="#default1" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="#2" rel="#default2">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<p id="default1">I like puppies</p>
<p id="default2">I like kittens</p>
</div>

The first tab in this case shows the content "I like puppies", while the 3rd tab shows "I like kittens."

bobth1019
05-19-2008, 05:41 PM
Thank you very much for your help...

Foundas
07-04-2009, 05:20 AM
Hi,


how can you implement nested tabs using the modified version of AjaxTabs??

Thanks in advance

stylusss
04-22-2014, 02:54 AM
If you mean the ability to have more than 1 tab show inline content (ie: rel="#default"), try the below modified ajaxtabs.js. Then in your HTML, you'd do something like:


<ul id="countrytabs" class="shadetabs">
<li><a href="#1" rel="#default1" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="#2" rel="#default2">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<p id="default1">I like puppies</p>
<p id="default2">I like kittens</p>
</div>

The first tab in this case shows the content "I like puppies", while the 3rd tab shows "I like kittens."

Where is the modified version?