sandbox/tabview/tabs.html

	tabs.html revision 61367bf5ab01acac9484d7e81c657d8ac6b42240
<!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-min.js"></script>
<script type="text/javascript" src="/build/tabview/tabview-base.js"></script>
<script type="text/javascript" src="/build/tabview/tabview-plugin.js"></script>
<script type="text/javascript" src="/build/tabview/tabview.js"></script>
<script type="text/javascript" src="/build/tabview/tab.js"></script>

<link rel="stylesheet" type="text/css" href="/src/tabview/css/tabview.css">
<style>
ul, li {
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<h1>Tabs</h1>

<div id="demo">
</div>

<div id="demo2">
    <ul>
        <li><a>foo</a></li>
        <li><a>bar</a></li>
        <li><a>baz</a></li>
    </ul>
    <div>
        <div>
            <p>foo content</p>
        </div>
        <div>
            <p>bar content</p>
        </div>
        <div>
            <p>baz content</p>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
YUI({filter: 'raw'}).use('tabview', function(Y) {
/*
    var tablist = new Y.TabView({
        contentBox:'#demo2'
    });
    tablist.render();
    tablist.add({
        boundingBox:Y.one('#demo2 li'),
        panelNode: Y.one('#demo2 div div')
    });
    //tablist.add({boundingBox:Y.Node.create('<li><a>foo</a></li>')});
    console.log(tablist.item(0).get('contentBox'));
*/
    var tablist = new Y.TabView({
        boundingBox: '#demo',
        children: [{
            label: 'tab 1',
            content: 'tab 1 content'
        },{
            label: 'tab 2',
            content: 'tab 2 content'

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

/*
    var tablist2 = new Y.TabView({
        contentBox: '#demo2'
    });
    tablist2.render();

    var tablist2 = new Y.TabView({
        children: [{
            label: 'tab 1',
            content: 'tab 1 content'
        },{
            label: 'tab 2',
            content: 'tab 2 content'
        }]
    });
    tablist2.render('#demo2');
    console.log(tablist2.get('contentBox'));
*/
});

</script>
</html>