// 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>
1
Contributor
0
Replies
1
Views
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.