YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: TabView Control: Build from Markup

# TabView Control: Build from Markup

This demonstrates how to build a TabView from markup.

View example in new window.

Tab One Content

Tab Two Content

Tab Three Content

## TabView From Markup

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:

<div id="demo" class="yui-navset"> <ul class="yui-nav"> <li><a href="#tab1"><em>Tab One Label</em></a></li> <li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li> <li><a href="#tab3"><em>Tab Three Label</em></a></li> </ul> <div class="yui-content"> <div id="tab1"><p>Tab One Content</p></div> <div id="tab2"><p>Tab Two Content</p></div> <div id="tab3"><p>Tab Three Content</p></div> </div> </div>

All that is left is to create an instance of TabView from our `demo` element:

<script type="text/javascript"> var tabView = new YAHOO.widget.TabView('demo'); </script>

This is a basic example of how to build a TabView from markup.

## Configuration for This Example

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.

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### TabView Control Examples:

- Build from Markup
- Build from Script
- Adding Tabs
- Removing Tabs
- Getting Content from an External Source
- Skinning TabView
- Using the TabView ARIA Plugin
- Editor inside a Tabview Control (included with examples for Rich Text Editor)
- ImageLoader with TabView (included with examples for ImageLoader Utility)
- TabView Integration (included with examples for DataTable Control)
- Complex Application (included with examples for Layout Manager)

### More TabView Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings