Example - Tab Bar - JavaScript / AJAX

This example demonstrates how simple it is to implement a tab bar.


An alert has been attached to the tabbar control to indicate which tab has been selected. Tab3 has alerts attached to the onselect and ondeselect events of the tab control. These events will fire first before the onselect event of the tabbar.



Code:
<div ext="tabbar" id="tabs1" onselect="alert('You selected: ' + $gc(this.id).selectedTab().id);" style="display:none;">

 <div ext="tab" id="Tab1" selected="true">Tab1</div>

 <div ext="tab" id="Tab2">Tab2</div>

 <div ext="tab" id="Tab3" onselect="alert('Do something with ' + $gc(this.id).id);" ondeselect="alert('stop doing something with ' + $gc(this.id).id);">Tab3</div>

 <div ext="tab" id="Tab4">Tab4</div>

</div>