YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: TabView: TabView from Existing Markup

## TabView: TabView from Existing Markup

This example shows how to create a `TabView` widget from existing HTML on the page.

View example in new window.

- foo
- bar
- baz

foo content

bar content

baz content

### Creating A TabView From Existing Markup

A `TabView` can be created easily from existing markup, supporting a progressive enhancement approach to development.

#### The Markup

The only markup requirements are an unordered list of items and a corresponding group of divs.

    <div id="demo">    <ul>        <li><a href="#foo">foo</a></li>        <li><a href="#bar">bar</a></li>        <li><a href="#baz">baz</a></li>    </ul></div><div>    <div id="foo">        <p>foo content</p>    </div>    <div id="bar">        <p>bar content</p>    </div>    <div id="baz">        <p>baz content</p>    </div></div>

    <div id="demo">
        <ul>
            <li><a href="#foo">foo</a></li>
            <li><a href="#bar">bar</a></li>
            <li><a href="#baz">baz</a></li>
        </ul>
    </div>
    <div>
        <div id="foo">
            <p>foo content</p>
        </div>
        <div id="bar">
            <p>bar content</p>
        </div>
        <div id="baz">
            <p>baz content</p>
        </div>
    </div>

<div id="demo"> <ul> <li><a href="#foo">foo</a></li> <li><a href="#bar">bar</a></li> <li><a href="#baz">baz</a></li> </ul> </div> <div> <div id="foo"> <p>foo content</p> </div> <div id="bar"> <p>bar content</p> </div> <div id="baz"> <p>baz content</p> </div> </div>

#### The JavaScript

`TabView` extends `Widget`, and the `srcNode` becomes the `contentBox`. This is the minimal requirement to create a `Tabview` instance for the markup, and can be assigned using a selector. Calling render enlivens the `TabView` making it usable.

        var tabview = new Y.TabView({srcNode:'#demo'});    tabview.render();

        var tabview = new Y.TabView({srcNode:'#demo'});
        tabview.render();

var tabview = new Y.TabView({srcNode:'#demo'}); tabview.render();

Copyright © 2010 Yahoo! Inc. All rights reserved.

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