sandbox/tabview/tabs.html

	tabs.html revision a32e49a1b841efaed34c635669f85fc44c85cb1d
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabs</title>
<script type="text/javascript" src="/build/yui/yui.js"></script>
<style>
p, ul, li {
    margin: 0;
    padding: 0;
}

.yui3-tabview {
    margin-bottom: 1em;
}
</style>
</head>
<body class="yui3-skin-sam">
<h1>Tabs</h1>

<div id="demo" class="yui3-skin-sam">
</div>

<div id="demo2">
    <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 id="foo">foo content</div>
        <div id="bar">bar content</div>
        <div id="baz">baz content</div>
    </div>

</div>
<div id="demo3">
  <div id="yui_3_1_0_1_1270489731578892" class="yui3-widget yui3-tabview">
    <div class="yui3-tabview-content" id="yui_3_1_0_1_1270489731578894">
      <ul class="yui3-tabview-list">

        <li id="yui_3_1_0_1_1270489731578917" class="yui3-tab yui3-widget" role="presentation">
          <a id="yui_3_1_0_1_1270489731578919" class="yui3-tab-label yui3-tab-content" role="tab">foo</a>
        </li>
        <li id="yui_3_1_0_1_1270489731578939" class="yui3-tab yui3-widget yui3-tab-selected" role="presentation">
          <a id="yui_3_1_0_1_1270489731578941" class="yui3-tab-label yui3-tab-content" role="tab">bar</a>
        </li>
        <li id="yui_3_1_0_1_1270489731578961" class="yui3-tab yui3-widget" role="presentation">
          <a id="yui_3_1_0_1_1270489731578963" class="yui3-tab-label yui3-tab-content" role="tab">baz</a>

        </li>
      </ul>
      <div class="yui3-tabview-panel">
        <div class="yui3-tab-panel" id="yui_3_1_0_1_1270489731578923" role="tabpanel" aria-labelledby="yui_3_1_0_1_1270489731578919">
          <p>foo content</p>
        </div>
        <div class="yui3-tab-panel yui3-tab-panel-selected" id="yui_3_1_0_1_1270489731578945" role="tabpanel" aria-labelledby="yui_3_1_0_1_1270489731578941">
          <p>bar content</p>

        </div>
        <div class="yui3-tab-panel" id="yui_3_1_0_1_1270489731578967" role="tabpanel" aria-labelledby="yui_3_1_0_1_1270489731578963">
          <p>baz content</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="demo4">
    <ul>
        <li><a href="#foo2">foo</a></li>
        <li><a href="#bar2">bar</a></li>
        <li><a href="#baz2">baz</a></li>
    </ul>

</div>

<div id="demo4-tabview-panel">
    <div id="foo2">foo content</div>
    <div id="bar2">bar content</div>
    <div id="baz2">baz content</div>
</div>

<div id="demo5">
    <ul>
        <li><a>demo5 foo</a></li>
        <li><a>demo5 bar</a></li>
        <li><a>demo5 baz</a></li>
    </ul>

</div>

<div id="demo5-tabview-panel">
    <div>demo5 foo content</div>
    <div>demo5 bar content</div>
    <div>demo5 baz content</div>
</div>
</body>
<script type="text/javascript">
YUI({filter: 'raw'}).use('tabview', 'tabview-plugin', function(Y) {
    var tabview = new Y.TabView({
        boundingBox: '#demo',
        children: [{
            label: 'tab 1',
            content: 'tab 1 content'
        }, {
            label: 'tab 2',
            content: 'tab 2 content',
            selected: 1

        }, {
            label: 'tab 3',
            content: 'tab 3 content'
        }]
    });
    tabview.render();
    //tabview.selectChild(0);
    //tabview.remove(0);
    //tablist.get('selection').next().set('selected', 1);


    var tabview2 = new Y.TabView({
        srcNode: '#demo2'
    });

    tabview2.render();
    tabview2.add({
        label: 'foobar',
        content: 'foobar content'
    });
    tabview2.get('contentBox').focusManager.refresh();
    tabview2.selectChild(2);
    //tabview2.add(tabview.item(1));

    var tabview3 = new Y.TabView({
        srcNode: '#demo3 .yui3-tabview-content'
    });

    tabview3.render();

    var tabview4 = new Y.TabView({
        srcNode: '#demo4',
        panelNode: '#demo4-tabview-panel'
    });

    tabview4.render();

    var tabview5 = new Y.TabView({
        srcNode: '#demo5',
        panelNode: '#demo5-tabview-panel'
    });

    tabview5.render();
});
</script>
</html>