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
Hey, No working.~~~~~
ReplyDelete^
^ ^
It needed some updating.
ReplyDeleteShould be OK now (works for me: FF,Chrome,IE9).