In this example, let's suppose that we're making a website for a computer hardware retailer; on pages that display items for sale we'll use a tabbed interface to provide extended product information displayed on a series of tabs.
We'll just create one page of this imaginary site, and as the data for the products would probably come out of a database, we'll also look at adding content to tabs dynamically using the Connection Manager. The finished page should end up looking something like this:
 |
For this example we'll need to include the indispensable yahoo-dom-events.js, TabView dependencies: element-min.js and, as we'll do dynamic loading, connection-min.js and, finally, tabview-min.js and its CSS file tabview.css. Next we can add the underlying HTML for the page.
This will form the foundation of the TabView control:
<body class="yui-skin-sam"> <div id="productTabs" class="yui-navset"> <ul class="yui-nav"> <li class="selected"> <a...