YUI Library Examples: TabView Control: Build from Markup

TabView Control: Build from Markup

This demonstrates how to build a TabView from markup.

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.

The first thing we need to do is load the TabView source files and dependencies:

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:

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

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

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.

More TabView Control Resources:

Copyright © 2007 Yahoo! Inc. All rights reserved.

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