Skip to content

AJAX tabs

November 13, 2006

This will work in Rails too, so do not be put off by PHP. I am writing an inventory control application using Biscuit (Rails port to PHP), and I have been browsing the Rails mailing list for a nice way to do AJAX tabs, but could not find something really nice with low overhead. So here is my simple implementation using Prototype. By simple I mean it is pretty much plain old HTML+Prototype, there is no 50k file to switch tabs (other than prototype ;-D), and I have ultimate control over what happens when a tab is clicked. Let’s get started…

The concept here is simple, I have a Part Supplier, which consists of a `supplier` model with a belongs_to association to `contact`, and a has_many associaton to `parts`, and another to `notes`. I want to display the Supplier info in the first tab, and have the Contact informartion preloaded in the second tab, however since Parts and Notes can be extensive I will not preload these. I don’t want to reload Parts or Notes every time I click their respective tabs either.

The Tabs

<ul class=”tabselector” id=”tabcontrol1″>
<!– preloaded –>
<li class=”tab-selected” id=”tab1″>
<?= link_to_function(‘Supplier’, “tabselect($(‘tab1’)); paneselect($(‘pane1’));”) ?></li>
<!– preloaded –>
<li class=”tab-unselected” id=”tab2″>
<?= link_to_function(‘Contact’, “tabselect($(‘tab2’)); paneselect($(‘pane2’));”) ?></li>
<!– load on demand –>
<li class=”tab-unselected” id=”tab3″>
<?= link_to_function(‘Parts’, “if ($(‘pane3’).innerHTML==”) { ” .
remote_function(array(‘update’ = > ‘pane3’,
‘loading’ = > “$(‘pane3’).innerHTML='” .
image_tag(‘wait.gif’) . ‘ Loading…’ . “‘”,
‘url’ = > array(‘controller’ => ‘parts’,
‘action’ = > ‘listing’,
‘supplier’ = > $supplier->id))) .
“} tabselect($(‘tab3’)); paneselect($(‘pane3’))”) ?></li>
<!– load on demand –>
<li class=”tab-unselected” id=”tab4″>
<?= link_to_function(‘Notes’, “if ($(‘pane4’).innerHTML==”) { ” .
remote_function(array(‘update’ = > ‘pane4’,
‘loading’ = > “$(‘pane4’).innerHTML='” .
image_tag(‘wait.gif’) . ‘ Loading…’ . “‘”,
‘url’ = > array(‘controller’ => ‘notes’,
‘action’ = > ‘listing’,
‘supplier’ = > $supplier->id))) .
“} tabselect($(‘tab4’)); paneselect($(‘pane4’))”) ?></li></ul>
My Javascript

function tabselect(tab) {
var tablist = $(‘tabcontrol1’).getElementsByTagName(‘li’);
var nodes = $A(tablist);

nodes.each(function(node){
if (node.id == tab.id) {
tab.className=’tab-selected’;
} else {
node.className=’tab-unselected’;
};
});
}

function paneselect(pane) {
var panelist = $(‘panecontrol1’).getElementsByTagName(‘li’);
var nodes = $A(panelist);

nodes.each(function(node){
if (node.id == pane.id) {
pane.className=’pane-selected’;
} else {
node.className=’pane-unselected’;
};
});
}
My Fancy CSS

.tabselector {
width: 100%;
border-bottom: 1px solid #D6E2FF;
padding-left: 20px
}

.tab-unselected {
display: inline;
padding: 0 7px 0 7px;
background: #f0f0f0;
border: 1px solid #D6E2FF;
border-bottom: 0;
color: #c0c0c0;
}

.tab-selected {
display: inline;
padding: 0 7px 1px 7px;
background: #ffffff;
border: 1px solid #D6E2FF;
border-bottom: 0;
color: #A5CEFC;
}

.tab-unselected a {
padding: 3px;
color: #c0c0c0;
}

.tab-selected a {
padding: 3px;
}

.panes {
width: 100%;
padding-left: 10px;
}

.pane-selected {
list-style-type: none;
display: block;
}

.pane-unselected {
list-style-type: none;
display: none;
}
 

3 Comments leave one →
  1. hhnkknnab permalink
    June 5, 2007 12:33 pm

    Bests busic website i found)
    free ringtones sprint phone
    praise party

  2. kkspwynnvr permalink
    June 5, 2007 12:44 pm

    Best link for best site video and music

    header and base images
    john shuck

  3. sdfsdfff permalink
    June 12, 2007 9:15 pm

    Best link for best site video and music …

    artist photo
    virtual isolation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: