63 lines
2.1 KiB
HTML
63 lines
2.1 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>TabView Example - Basic From Existing Markup</title>
|
|
<link rel="stylesheet" type="text/css" href="css/example.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
|
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
|
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
|
<script type="text/javascript" src="../../build/event/event.js"></script>
|
|
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
|
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
|
|
|
|
|
<style type="text/css">
|
|
#demo { width:30em; }
|
|
#demo .yui-content { padding:1em; } /* pad content container */
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
(function() {
|
|
var tabView = new YAHOO.widget.TabView({ id: 'demo' });
|
|
|
|
|
|
YAHOO.util.Event.onContentReady('nav', function() {
|
|
var labels = this.getElementsByTagName('a'); // extract labels from "nav" links
|
|
|
|
for (var i = 0, len = labels.length; i < len; i++) {
|
|
tabView.addTab( new YAHOO.widget.Tab({
|
|
label: labels[i].innerHTML,
|
|
content: '<h2>' + labels[i].innerHTML +
|
|
'</h2><p>Lorem ipsum dolor.</p>'
|
|
}));
|
|
}
|
|
|
|
tabView.set('activeIndex', 0); // make first tab active
|
|
|
|
tabView.appendTo(this.parentNode, this); // insert before "nav"
|
|
this.parentNode.removeChild(this); // remove "nav"
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
#demo .yui-content {
|
|
height:8em;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="doc">
|
|
<h1>TabView Example - Basic From Existing Markup</h1>
|
|
<p>This example demonstrates how to create a basic TabView widget from existing markup.</p>
|
|
|
|
<ul id="nav">
|
|
<li><a href="#lorem">lorem</a></li>
|
|
<li><a href="#ipsum">ipsum</a></li>
|
|
<li><a href="#dolor">dolor</a></li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|