Tab Panel Examples

Note that the js and css is not minified so it is readable. See tabs-example.js for the tab creation code and tabs-example.css for the css.

Tabs without fixed height that resize to the content. Built from existing markup.

Here's my script:

var tabs = new Roo.TabPanel('tabs1');
tabs.addTab('script', "View Script");
tabs.addTab('markup', "View Markup");
tabs.activate('script');

<div id="tabs1">
    <div id="script" class="tab-content">
        (Content goes here)
    </div>
    <div id="markup" class="tab-content">
        (Content goes here)
    </div>
</div>

Tabs with fixed height that scroll the content. Built entirely with javascript.

Tab 1 is a normal tab with content passed when adding it.
Tab 2 is loaded via Ajax. It was set up using the standard UpdateManager functionality. It reloads it's content every time it's activated.
Tab 3 is loaded via Ajax too. It was set up using setUrl() a convenience method that will do everything done on tab 2 and also has the ability to set it to load only once.
Tab 4 has an event listener attached.
Tab 5 is disabled.