<html>
<head>
<title>ActiveWidgets Examples</title>
<style>body {font: 12px Tahoma}</style>
<!-- include links to the script and stylesheet files -->
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/system/aw.css" rel="stylesheet"></link>
<!-- add image libraries -->
<link href="mini.css" rel="stylesheet"></link>
<!-- change default styles, set control size and position -->
<style>
#myTabs {width: 100%; background-color: blue;}
#myTabs .aw-item-text {background-color: green;}
#myTabs .aw-item-box {background-color: pink;}
#myContent {background-color: red;}
</style>
</head>
<body>
<h3>Tabs - hide/show content DIVs</h3>
<p>Use onSelectedItemsChanged event and set of hidden DIVs</p>
<pre> tabs.onSelectedItemsChanged = function(selected){...}</pre>
<!-- insert control tags -->
<span id="myTabs"></span>
<div id="myContent" style="border: 1px solid #aaa; height: 200px; padding: 10px">
<div id="div1" style="display:none">Page 1, empty.</div>
<div id="div2" style="display:none">Page 2, still not much text here...</div>
<div id="div3" style="display:none">Page 3, the last one.</div>
</div>
<p>Back to <a href="index.htm">tabs examples</a>, <a href="../index.htm">all examples</a></p>
<!-- create controls -->
<script>
var names = ["Start", "Another page", "The last page"];
var values = ["div1", "div2", "div3"];
var tabs = new AW.UI.Tabs;
tabs.setId("myTabs");
tabs.setItemText(names);
tabs.setItemValue(values); // store ids of content DIVs
tabs.setItemCount(3);
tabs.refresh();
</script>
<!-- add page behavior -->
<script>
tabs.onSelectedItemsChanged = function(selected){
var i, divs = document.getElementById("myContent").childNodes;
for(i=0; i<divs.length;i++){
if (divs[i].style) {
divs[i].style.display = "none"; // hide all elements
}
}
var index = selected[0];
var value = this.getItemValue(index);
document.getElementById(value).style.display = "block"; // show selected
}
tabs.setSelectedItems([0]); // load the first page.
</script>
</body>
</html>This topic is archived.