very simple very powerful tab menu, it can be used as a switch menu or to hide-show associated panels.
Tab Menu
// JScript File
function tableTabControl(anyTdIdFromTabRow)
{
var nodes = document.getElementById(anyTdIdFromTabRow).childNodes;
for(var i = 0; i < nodes.length; i++)
{
if(nodes[i].childNodes[0].nodeName == "#text" || nodes[i].childNodes[0].nodeName== "A")
{
addEvent( nodes[i],"click",clickFunction);
nodes[i].style.cursor = "hand";
}
}
function clickFunction()
{
for(var i = 0; i < nodes.length; i++)
{
if(nodes[i].childNodes[0].nodeName == "#text" || nodes[i].childNodes[0].nodeName == "A")
{
if( nodes[i] != this)
{
if(nodes[i].idx != undefined)
document.getElementById(nodes[i].idx).style.display = "none";
nodes[i].style.color = "black";
}
else
{
if(this.idx != undefined)
document.getElementById(this.idx).style.display = "block";
this.style.color = "red";
}
}
}
}
}
function addEvent(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = handleEvent;
}
};
// a counter used to create unique IDs
addEvent.guid = 1;
function removeEvent(element, type, handler) {
if (element.removeEventListener)
{
element.removeEventListener(type, handler, false);
}
else
{
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
};
function handleEvent(event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
// add W3C standard event methods
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
// .js file ends here
EXAMPLE USAGE :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="tabmenu.js"></script>
</head>
<body>
<!-- just a switching menu -->
<table>
<tr id="justSwitch">
<td>
deneme1
</td>
<td>
deneme2
</td>
</tr>
</table>
<!-- associate some divs to show and hide -->
<table>
<!-- to associated divs i set 'idx' to associated div id -->
<tr id="associated">
<td idx="dv1">
deneme3
</td>
<td idx="dv2">
deneme4
</td>
</tr>
</table>
<div id="dv1">associated div to deneme3</div>
<div id="dv2">associated div to deneme4</div>
<script type="text/javascript">
// register the menus here
tableTabControl("justSwitch");
tableTabControl("associated");
</script>
</body>
</html>
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.