Changing text color in tab

How to change text color of tabs
Nivas
December 28,
Look this sample:
<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>
Paulo Cesar (PC from Brazil )
December 28,
This topic is archived.
Changing text color in tab

See also:

Search

New Data Grid

Version 2
