This demonstrates how to build a TabView from markup.
Tab One Content
Tab Two Content
Tab Three Content
One way you can build a YUI TabView widget is by including the required markup in your page. This is the most accessible way to provide tabbed content, because without script or styling, the tab links function as jump links to the associated content.
We will create a <div>
called demo
and include the TabView markup, which includes a list of navigational links that are anchored to a div in the yui-content
container:
1 | <div id="demo" class="yui-navset"> |
2 | <ul class="yui-nav"> |
3 | <li><a href="#tab1"><em>Tab One Label</em></a></li> |
4 | <li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li> |
5 | <li><a href="#tab3"><em>Tab Three Label</em></a></li> |
6 | </ul> |
7 | <div class="yui-content"> |
8 | <div id="tab1"><p>Tab One Content</p></div> |
9 | <div id="tab2"><p>Tab Two Content</p></div> |
10 | <div id="tab3"><p>Tab Three Content</p></div> |
11 | </div> |
12 | </div> |
view plain | print | ? |
All that is left is to create an instance of TabView from our demo
element:
1 | <script type="text/javascript"> |
2 | var tabView = new YAHOO.widget.TabView('demo'); |
3 | </script> |
view plain | print | ? |
This is a basic example of how to build a TabView from markup.
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings