Advanced Search

Results 1 to 4 of 4

Thread: How to add content tab to Ajax Tabs Content Script (v 2.2)

  1. #1
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to add content tab to Ajax Tabs Content Script (v 2.2)

    1) Script Title: Ajax Tabs Content Script (v 2.2)

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

    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>

  2. #2
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

    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:

    Code:
    <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."

  3. #3
    Join Date
    Apr 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much for your help...

  4. #4
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi,


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

    Thanks in advance

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •