This example shows how to create a TabView widget dynamically and insert it into the page.

{{>tabview-fromjs-source}}

Creating a TabView From JavaScript

A TabView can be created dynamically using a small amount of JavaScript.

The Markup

{{>need-skin-note}} ``` {{>need-skin-comment}} ```

There are no other markup requirements in this case, although you may want to have a placeholder to render the tabview into, which is what this example does.

```
```

The JavaScript

The minimal requirement for creating a TabView from scratch are the labels and content for each tab. These are added as the children attribute when creating the TabView.

``` var tabview = new Y.TabView({ children: [{ label: 'foo', content: '

foo content

' }, { label: 'bar', content: '

bar content

' }, { label: 'baz', content: '

baz content

' }] }); ```

Rendering

Calling render creates the TabView, inserting into the node passed to render.

``` tabview.render('#demo'); ```

Changing the Selected Tab

By default, clicking a tab makes it selected and shows its content. You can also do this programmatically by calling the selectChild method on the TabView, passing it the index of the tab to be selected.

``` tabview.selectChild(2); ```

Complete Example Source

``` {{>tabview-fromjs-source}} ```