prettify

baseline

javascript TabView

Simple TabView with CSS3 and Javascript

TabView.htm

<!DOCTYPE html>
<html>
<head>
    <title>TabView</title>
    <link href="reset.css" rel="Stylesheet" type="text/css" />
    <link href="TabView.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div id="tab1" class="TabView"
><ul
><li data-key="home">Home</li
><li data-key="downloads">DownLoads</li
><li data-key="documentation">Documentation</li
><li data-key="discussions">Discussions</li
><li data-key="issueTracker">Issue Tracker</li
><li data-key="sourceCode" class="selected">Source Code</li
><li data-key="People">People</li
><li data-key="License">License</li
></ul
><div data-key="home">This is Home</div
><div data-key="downloads">This is DownLoads</div
><div data-key="documentation">This is Documentation</div
><div data-key="discussions">This is Discussions</div
><div data-key="issueTracker">This is Issue Tracker</div
><div data-key="sourceCode" class="selected">This is Source Code</div
><div data-key="People">This is People</div
><div data-key="License">This is License</div
></div>
    <script src="ins.js" type="text/javascript"></script>
    <script src="TabView.js"  type="text/javascript"></script>
</body>
</html>

TabView.css

.TabView>ul>li {
    background: -ms-linear-gradient(top, #fff, #99c);    
    background: -moz-linear-gradient(top, #fff, #99c);    
    background: -webkit-linear-gradient(top, #fff, #99c);    
    background: -o-linear-gradient(top, #fff, #99c);    
}
.TabView>ul>li.selected {
    background: -ms-linear-gradient(top, #69c, #369);    
    background: -moz-linear-gradient(top, #69c, #369);    
    background: -webkit-linear-gradient(top, #69c, #369);    
    background: -o-linear-gradient(top, #69c, #369);    
}
/*******************************************/
.TabView {
    padding:.5em;
}
.TabView>ul {
    border:0;
    border-bottom:5px solid #369;
    padding:0;
    margin:0;
    font-size:.7em;
    white-space:nowrap;
}
.TabView>ul>li {
    display:inline-block;
    border:1px solid #369;
    background-color:#eee;
    padding:.5em;
    margin-right:.3em;
    border-top-left-radius: .7em;
    border-top-right-radius: .7em;
    box-shadow:.1em .3em .2em #369;
    text-shadow: -1px -1px 1px #fff;
    cursor:pointer;
    background: linear-gradient(top, #fff, #99c);    
}
.TabView>ul>li.selected {
    cursor:auto;
    color:#eee;
    background-color:#369;
    background: linear-gradient(top, #69c, #369);    
    text-shadow: 1px 1px 2px #000;
}
.TabView>ul>li.selected:active {
    position:static; 
}
.TabView>ul>li:active {
    position:relative;
    top:1px;
    left:1px;
    text-shadow: 1px 1px 1px #fff;
}
.TabView>div {
    display:none;
    border:1px solid #369;
    padding:.5em;
}
.TabView>div.selected {
    display:block;
}

TabView.js

window.onload = function () {
    oTab = new ins.TabView($("tab1"));
    oTab.onTabChanged = function (sKey) {
        alert(sKey);
    }
};
ins.TabView = function (oDiv) {
    var that = this;
    this.oDiv = oDiv;
    this.onTabChanged;

    this.oDiv.onclick = function (e) {
        if (!e) var e = window.event
        that.SelectionChange(e);
    }
}
ins.TabView.prototype.Unload = function () {
    this.oDiv = null;
};
ins.TabView.prototype.SelectPage = function (sKey) {
    var oLI, oChild, sNew = "";
    for (var nPos = 0; nPos < this.oDiv.childNodes.length; nPos++) {
        oChild = this.oDiv.childNodes[nPos];
        if (oChild.nodeName.toLowerCase() === "div") {
            if (oChild.getAttribute("data-key") === sKey) {
                oChild.className = "selected";
            } else {
                oChild.removeAttribute("class");
            }
        } else if (oChild.nodeName.toLowerCase() === "ul") {
            for (var nLI = 0; nLI < oChild.childNodes.length; nLI++) {
                oLI = oChild.childNodes[nLI];
                if (oLI.getAttribute("data-key") === sKey) {
                    oLI.className = "selected";
                } else {
                    oLI.className = "";
                }
            }
        }

    }
    if (typeof this.onTabChanged === "function") { this.onTabChanged(sKey) }
    oLI = oChild = null;
};
ins.TabView.prototype.SelectionChange = function (evt) {
    var elem = (evt.target) ? evt.target : evt.srcElement;
    this.SelectPage(elem.getAttribute("data-key"));
};
You may need reset.css & ins.js

2 comments:

  1. Hey, No working.~~~~~
    ^
    ^ ^

    ReplyDelete
  2. It needed some updating.
    Should be OK now (works for me: FF,Chrome,IE9).

    ReplyDelete