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
- Download just TabbedPane.js.
- Download the complete demo file.
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.
<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…</h3>
</div>
<div id="MyPane" class="pane"></div>
</div>
</div>
And here is the JavaScript that would make the above interface dynamic.
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.
Хочу представить вам свою Библиотеку Художественной Литературысайтов
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
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!
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……