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.
Хочу представить вам свою Библиотеку Художественной Литературысайтов