1. TabbedPane.js - Dynamic Ajax Tabs

    Description

    TabbedPane.js is a short (20-line) JavaScript class that allows the creation of a dynamic AJAX tab interface. The controls and viewport are arbitrary, so it can be used to implement other interfaces, too.

    I designed it with simplicity and flexibility in mind. Other dynamic ajax tab scripts tend to either include everything and then some or make design decisions. TabbedPane does neither.

    The latest release is 1.0.0.

    Requirements

    TabbedPane requires Prototype.js 1.5.x or 1.6.x.

    Download

    Usage

    TabbedPane assumes nothing about your page layout, so it’s up to you to style your interface.

    Here is the HTML you might use.

    <div class="tabbed-pane">
        <ol class="tabs">
            <li><a href="#" class="active" id="pane1">Pane 1</a></li>
            <li><a href="#" id="pane2">Pane 2</a></li>
        </ol>
       
        <div id="MyPane_container" class="tabbed-container">
            <div id="MyPane_overlay" class="overlay" style="display: none">
                <h3>Loading&#8230;</h3>
            </div>
            <div id="MyPane" class="pane"></div>
        </div>
    </div>

    And here is the JavaScript that would make the above interface dynamic.

    <script type="text/javascript">
    new TabbedPane(‘MyPane’,
        {
            ‘pane1′: ‘pages/pane1.html’,
            ‘pane2′: ‘pages/pane2.html’
        },
        {
            onClick: function(e) {
                $(‘MyPane_overlay’).show();
            },
           
            onSuccess: function(e) {
                $(‘MyPane_overlay’).hide();
            }
        });
    </script>

    Demo

    Visit the demo page to view a demo of this script.

    Other features

    I only call this “TabbedPane” because I can’t think of a better name, but it’s general enough that any central content pane can be updated by a click on any element on the page. The UI comes entirely from the HTML and CSS, which you are free to change.

  • Hi,
    Could you submit this to http://scripteka.com

    Thanks.
  • Claudio Franck
    Hello:

    Just wanted to add a little something. I like very much your script, very simple and esay to use, but I have found a very big gotcha with IE, as usual it does whatever it wants and caches ajax requests, so if the script your are calling with tabbedpane.js itslef uses ajax, for instance a table that you can edit inline, after you chnage something or delte something if you go to abther tab and return to that tab, the original page apears, cached, none of your modifications until you close ie and open it again. What really breaks your balls and makes you go WTF!!! is that it works everywhere else FF, Opera,... but IE.

    The fix is extremely simple and I guess some people might find this useful on tabbedpane.js line 9 change method: 'get' to method: 'post' and all will be working ok.

    Regards
  • edt
    Wonderful! Thank you!
    Question:
    I have 3 Tabs (HOME, NEWS, ABOUT). If I'm currently on the active, "HOME" page, how do I link to the ABOUT page from a TEXT link (from within the HOME page), rather than clicking on a Tab. This has been driving me nuts! Thank you!
  • jimmy
    hey I gave this s whirl and it worked great until I put an image in one of the pane but it would never show up I get the error that the file doesn't exist which seems odd as I have checked the pathways over and over. Any ideas as to why images in teh pane.html files would not be seen to exist? Great work though jsut what I was looking for
  • For Selecting a particular tab out of all the tabs.... you can use the following script

    1. Give the link to a particular pane as : link 1

    2. Keep the track of your TabbedPane object using a variable thePane like this:
    var thePane= new TabbedPane('MyPane',............

    3. Check the location and on the basis of it activate the appropriate tab:


    function setthetab(sentobject)
    {
    var speciallink = "quicklinks/mypage.htm#NamedLink";
    var sURL1 = document.location.href;
    var x1 = sURL1.substring(sURL1.length-speciallink.length,sURL1.length);
    if(x1==speciallink)
    {
    thePane.load_page('pane2');
    }
    }
    setthetab();


    I've to still work on how to activate the class of the selected tab......
  • Micheal
    There is a video tutorials on Using the ASP.NET AJAX Tabs Control at http://www.ajaxatoms.com which I found very interesting.
  • you should add this "TabbedPane.js - Dynamic Ajax Tabs" to www.bestajaxscripts.com

    thx
  • twiss
    Nice post. I'm haveing issues trying to install it though... I am running a templating engine called Smarty engine, and I tried to place the script on my website, but it kept giving me issus. Any ideas? I placed the script into a *.tpl which smarty will then use to generate HTML on the user end.

    Here is the error/

    Fatal error: Smarty error: [in home.tpl line 111]: syntax error: unrecognized tag: 'pane1':
  • tool.H
    Hey one question, How could i add a php file to the tabs instead of a html file? Thanks!
  • twiss
    OK, with regards to the Smarty Error. I figured it out. It has to do with the way smarty translates. Wrapping the javascript around {literal}{/literal} does the trick. Now I am having a second issue.I want to use an img as a link eg:



    but it will not work. It only seems to work if the contents are text. Any ideas?
  • ihtisham
    Excellent Page... I was trying to get this done since weep!

    Thumbs up!
    CEO Innovative Consulting
    http://www.groupiconsulting.com/
  • Marcel
    how can I do? when loaded the page to activate the second tab
blog comments powered by Disqus