Javascript tab menu with rounded corners generator
 

I have searched for a tab menu script for a long time but none of them was flexible enough,then i created one for me. The algorithm is nice so the script is not too long although being flexible.

your tab menu is in an html table row as follows :

<tr id="foo">

                                <td align="left">

                                    <img alt="" src="images/tab_sol.jpg"></td>

                                <td nowrap="true" align="center" bgcolor="#333333">

                                   foo1  </td>

                                <td align="right">

                                    <img alt="" src="images/tab_sag.jpg"></td>

                                                                <td align="left">

                                    <img alt="" src="images/tabGri_sol.jpg"></td>

                                <td align="center" bgcolor="#646464" >

                                   foo2</td>

                                <td align="right">

                                    <img alt="" src="images/tabGri_sag.jpg"></td>

                            </tr>

in the bottom of your page just add script below to create menu from the markup above :

<script type="text/javascript">

    tableTabControl("foo");

</script>

required script is as follows :

function tableTabControl(anyTdIdFromTabRow)

    {

    var nodes = xGetElementById(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)

                        {

                        nodes[i].style.backgroundColor = "#646464";

                        nodes[i].previousSibling.childNodes[0].src="images/tabGri_sol.jpg";

                        nodes[i].nextSibling.childNodes[0].src="images/tabGri_sag.jpg";

                        }

                        else

                        {

                         this.style.backgroundColor = "#333333";

                         this.previousSibling.childNodes[0].src="images/tab_sol.jpg";

                         this.nextSibling.childNodes[0].src="images/tab_sag.jpg";

                       

                        }

                       

                }

            }

         

        }

the following is the crossbrowser generic event registration method :

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;

};