Javascript菜单冲突

时间：2009-03-23 20:42:56

标签： javascript

我遇到了Javascript冲突。我有一个垂直的javascript左导航菜单和一个水平的javascript时区菜单。两者的工作代码但是当我在同一页面中调用它们时，菜单树不起作用。如果我取出<SCRIPT src="timezone.js" type=text/javascript></SCRIPT>标签，菜单工作正常，但时区被否定。 <div>问题？

HTML 

    <!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
        <head>

            <meta http-equiv="Content-Language" content="en-us" />
            <title>TEST</title>





        <link rel="stylesheet" type="text/css" href="test.css" />


        <SCRIPT src="BarMenu.js" type=text/javascript></SCRIPT>

        </head>

        <body onload="startw();" style="background-color: #808080">  


        <SCRIPT type=text/javascript>
        /* preload images, you can remove this code */
        img1 = new Image();
        img1.src = "images/tree-node.gif";
        img2 = new Image();
        img2.src = "images/tree-node-open.gif";
        img3 = new Image();
        img3.src = "images/tree-leaf.gif";
        img4 = new Image();
        img4.src = "images/tree-leaf-last.gif";

        window.onload = function() {
            var barMenu3a = new BarMenu('bar-menu3a');
            barMenu3a.box1Hover = false;
            barMenu3a.box2Hover = false;
            barMenu3a.init();
            var barMenu3b = new BarMenu('bar-menu3b');
            barMenu3b.box1Hover = false;
            barMenu3b.box2Hover = false;
            barMenu3b.init();
            var barMenu3c = new BarMenu('bar-menu3c');
            barMenu3c.box1Hover = false;
            barMenu3c.box2Hover = false;
            barMenu3c.init();
        }
        </SCRIPT>

        <table id="MainTable" cellspacing="0" cellpadding="0" style="width: 800px" class="style8">
            <tr>
                <td colspan="2" style="height: 91px" class="style10">
                <span class="FooterText"> <br />
                </span><br />
                </td>
        <tr>        
        <td colspan="2">


        <SCRIPT src="timezone.js" type=text/javascript></SCRIPT> 
        <div id="zonediv" class="GreenBar"></div>


            </td>   
            </tr>

        <tr>    
                <td valign="top" style="width: 200px" class="LeftNav">

        <DIV class=left>
        <TABLE cellSpacing=0 cellPadding=0 width="100%">
          <TBODY>
          <TR>
            <TD class=top>» Products</TD></TR>
          <TR>
            <TD class=section>
              <DIV class=bar-menu id=bar-menu3a>
              <TABLE cellSpacing=0 cellPadding=0 width="100%">
                <TBODY>
                <TR>
                  <TD>
                    <DIV><SPAN class=box1>Product One</SPAN></DIV>
                    <DIV class=section>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Overview</A></DIV>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Features</A></DIV>
                    <DIV class=box2-last><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Requirements</A></DIV></DIV></TD></TR>
                <TR>
                  <TD height=2></TD></TR>
                <TR>
                  <TD>
                    <DIV><SPAN class=box1>Product Two</SPAN></DIV>
                    <DIV class=section>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Overwiev</A></DIV>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Features</A></DIV>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Requirements</A></DIV>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Screenshots</A></DIV>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Flash 
                    Demos</A></DIV>
                    <DIV class=box2-last><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Live 
                    Demo</A></DIV></DIV></TD></TR>
                <TR>
                  <TD height=2></TD></TR>
                <TR>
                  <TD>
                    <DIV><SPAN class=box1>Product Three</SPAN></DIV>
                    <DIV class=section>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Overview</A></DIV>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Features</A></DIV>
                    <DIV class=box2-last><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Requirements</A></DIV></DIV></TD></TR>
                <TR>
                  <TD height=2></TD></TR>
                <TR>
                  <TD>
                    <DIV><SPAN class=box1>Product Four</SPAN></DIV>
                    <DIV class=section>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Overview</A></DIV>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Features</A></DIV>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Requirements</A></DIV>
                    <DIV class=box2><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Screenshots</A></DIV>
                    <DIV class=box2-last><A 
                    href="http://www.gosu.pl/MyGosuMenu/demo/BarMenu/example3.html">Live 
                    Demo</A></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR>
         </TBODY></TABLE></DIV>
        </td></tr></tr>
        </table>


        </body>

        </html>

BarMenu.js 

function BarMenu(id) {
    this.box1Hover = true;
    this.box2Hover = true;
    this.highlightActive = false;

    this.init = function() {
        if (!document.getElementById(this.id)) {
            alert("Element '"+this.id+"' does not exist in this document. BarMenu cannot be initialized");
            return;
        }
        this.parse(document.getElementById(this.id).childNodes, this.tree, this.id);
        this.load();
        if (window.attachEvent) {
            window.attachEvent("onunload", function(e) { self.save(); });
        } else if (window.addEventListener) {
            window.addEventListener("unload", function(e) { self.save(); }, false);
        }
    }

    this.parse = function(nodes, tree, id) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeType != 1) {
                continue;
            }
            if (nodes[i].className) {
                if ("box1" == nodes[i].className.substr(0, 4)) {
                    nodes[i].id = id + "-" + tree.length;
                    tree[tree.length] = new Array();
                    eval('nodes[i].onmouseover = function() { self.box1over("'+nodes[i].id+'"); }');
                    eval('nodes[i].onmouseout = function() { self.box1out("'+nodes[i].id+'"); }');
                    eval('nodes[i].onclick = function() { self.box1click("'+nodes[i].id+'"); }');
                }
                if ("section" == nodes[i].className) {
                    id = id + "-" + (tree.length - 1);
                    nodes[i].id = id + "-section";
                    tree = tree[tree.length - 1];
                }
                if ("box2" == nodes[i].className.substr(0, 4)) {
                    nodes[i].id = id + "-" + tree.length;
                    tree[tree.length] = new Array();
                    eval('nodes[i].onmouseover = function() { self.box2over("'+nodes[i].id+'", "'+nodes[i].className+'"); }');
                    eval('nodes[i].onmouseout = function() { self.box2out("'+nodes[i].id+'", "'+nodes[i].className+'"); }');
                }
            }
            if (this.highlightActive && nodes[i].tagName && nodes[i].tagName == "A") {
                if (document.location.href == nodes[i].href) {
                    nodes[i].className = (nodes[i].className ? ' active' : 'active')
                }
            }
            if (nodes[i].childNodes) {
                this.parse(nodes[i].childNodes, tree, id);
            }
        }
    }

    this.box1over = function(id) {
        if (!this.box1Hover) return;
        if (!document.getElementById(id)) return;
        document.getElementById(id).className = (this.id_openbox == id ? "box1-open-hover" : "box1-hover");
    }

    this.box1out = function(id) {
        if (!this.box1Hover) return;
        if (!document.getElementById(id)) return;
        document.getElementById(id).className = (this.id_openbox == id ? "box1-open" : "box1");
    }

    this.box1click = function(id) {
        if (!document.getElementById(id)) {
            return;
        }
        var id_openbox = this.id_openbox;
        if (this.id_openbox) {
            if (!document.getElementById(id + "-section")) {
                return;
            }
            this.hide();
            if (id_openbox == id) {
                if (this.box1hover) {
                    document.getElementById(id_openbox).className = "box1-hover";
                } else {
                    document.getElementById(id_openbox).className = "box1";
                }
            } else {
                document.getElementById(id_openbox).className = "box1";
            }
        }
        if (id_openbox != id) {
            this.show(id);
            var className = document.getElementById(id).className;
            if ("box1-hover" == className) {
                document.getElementById(id).className = "box1-open-hover";
            }
            if ("box1" == className) {
                document.getElementById(id).className = "box1-open";
            }
        }
    }

    this.box2over = function(id, className) {
        if (!this.box2Hover) return;
        if (!document.getElementById(id)) return;
        document.getElementById(id).className = className + "-hover";
    }

    this.box2out = function(id, className) {
        if (!this.box2Hover) return;
        if (!document.getElementById(id)) return;
        document.getElementById(id).className = className;
    }

    this.show = function(id) {
        if (document.getElementById(id + "-section")) {
            document.getElementById(id + "-section").style.display = "block";
            this.id_openbox = id;
        }
    }

    this.hide = function() {
        document.getElementById(this.id_openbox + "-section").style.display = "none";
        this.id_openbox = "";
    }

    this.save = function() {
        if (this.id_openbox) {
            this.cookie.set(this.id, this.id_openbox);
        } else {
            this.cookie.del(this.id);
        }
    }

    this.load = function() {
        var id_openbox = this.cookie.get(this.id);
        if (id_openbox) {
            this.show(id_openbox);
            document.getElementById(id_openbox).className = "box1-open";
        }
    }

    function Cookie() {
        this.get = function(name) {
            var cookies = document.cookie.split(";");
            for (var i = 0; i < cookies.length; i++) {
                var a = cookies[i].split("=");
                if (a.length == 2) {
                    a[0] = a[0].trim();
                    a[1] = a[1].trim();
                    if (a[0] == name) {
                        return unescape(a[1]);
                    }
                }
            }
            return "";
        }
        this.set = function(name, value) {
            document.cookie = name + "=" + escape(value);
        }
        this.del = function(name) {
            document.cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT";
        }
    }

    var self = this;
    this.id = id;
    this.tree = new Array();
    this.cookie = new Cookie();
    this.id_openbox = "";
}

if (typeof String.prototype.trim == "undefined") {
    String.prototype.trim = function() {
        var s = this.replace(/^\s*/, "");
        return s.replace(/\s*$/, "");
    }
}

timezone.js 

var wd=['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var D=[['Bucharest',120,60],['Madrid',60,60],['New York',-300,60],['Nairobi',180,0]]//city,standard time zone(minutes), DST(minutes)

//add in the array your cities,STZ, DST
function calc(){
var spans=document.getElementById('zonediv').getElementsByTagName('span')
for(var i=0;i<D.length;i++){
var t=new Date();
t.setTime(t.getTime()+(t.getTimezoneOffset()*60000)+((D[i][1]+D[i][2])*60000));//the zone's time
var Dy=t.getFullYear();
var Dd=t.getDate()<10?'0'+t.getDate():t.getDate();
var Dm=t.getMonth()<10?'0'+(t.getMonth()+1):t.getMonth()+1;
var Dh=t.getHours()<10?'0'+t.getHours():t.getHours(); 
var Di=t.getMinutes()<10?'0'+t.getMinutes():t.getMinutes();
var Ds=t.getSeconds()<10?'0'+t.getSeconds():t.getSeconds();
var Dz=wd[t.getDay()];
spans[i].firstChild.data=Dh+':'+Di+':'+Ds;
}
setTimeout('calc()',1000)
}
onload=function(){
var root = document.getElementById('zonediv');
for(var i=0;i<D.length;i++){
root.appendChild(document.createTextNode(D[i][0]+' '))
var sp= document.createElement('span');
sp.appendChild(document.createTextNode('span'));
root.appendChild(sp);root.appendChild(document.createTextNode(' | '));
}
calc();
}

test.css 

/* Left Navigation Menu */


DIV.left {
    background-image: url('images/LeftNav.gif'); WIDTH: 190px; HEIGHT: 100%
}
TD.top {
    FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #D5D7C0; TEXT-INDENT: 10px; LINE-HEIGHT: 26px; font-family: Verdana;
background-color:#3D3D3D;
/*background-image: url('images/LeftNav.gif');*/
}
TD.section {
    PADDING-RIGHT: 12px; PADDING-LEFT: 12px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px
}
.bar-menu {
    moz-user-select: none
}
.bar-menu .box1 {
    PADDING-LEFT: 19px; BACKGROUND: url(images/tree-node.gif) no-repeat; CURSOR: default
}
.bar-menu .box1-open {
    PADDING-LEFT: 19px; BACKGROUND: url(images/tree-node-open.gif) no-repeat; CURSOR: default
}
.bar-menu .box1 {
    font-family: Verdana;
    font-size: 13px;
    color:#3D3D3D;

}



.bar-menu .box1-open {
    font-family: Verdana;
    font-size: 11px;
    color:#3D3D3D;

    }
UNKNOWN {
    FONT-SIZE: 12px; PADDING-BOTTOM: 1px; COLOR: #000000; LINE-HEIGHT: 16px; FONT-FAMILY: arial
}
 HTML .bar-menu .box1 {
    FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: arial; HEIGHT: 16px
}
 HTML .bar-menu .box1-open {
    FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: arial; HEIGHT: 16px
}
.bar-menu .section {
    DISPLAY: none; FONT-SIZE: 12px; LINE-HEIGHT: 16px; FONT-FAMILY: arial
}
.bar-menu .section A {
    COLOR: #000000; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
.bar-menu .section A:hover {
    COLOR: #0000ff; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
.bar-menu .box2 {
    PADDING-LEFT: 19px; BACKGROUND: url(images/tree-leaf.gif) no-repeat
}
.bar-menu .box2-last {
    PADDING-LEFT: 19px; BACKGROUND: url(images/tree-leaf-last.gif) no-repeat
}

1 个答案:

答案 0 :(得分：1)

他们都设置了window.onload。

快速解决方法是从此更改timezone.js：

onload=function(){
var root = document.getElementById('zonediv');
...

到这个

var oldOnload = window.onload;
window.onload = function()
{
    if (oldOnload)
        oldOnload();

    var root = document.getElementById('zonediv');
    ...
相关问题
最新问题