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

{{>tabview-basic-source}}

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.

```

foo content

bar content

baz content

```

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(); ```

Complete Example Source

``` {{>tabview-basic-source}} ```