通过Ajax解析和jQuery写了一个小小的导航条

最近在用ajax和jquery做开发，所以闲来无事写了些小导航条，通过ajax解析XML文件动态的创建WEB网站的导航条。

 <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(function () {
            var dom = new ActiveXObject("Microsoft.XMLDOM");
            dom.async = false;

            dom.load("xml/MenuXml.xml");

            if (dom.parseError.errorCode != 0) {
                alert(dom.parseError.line + "\r\n" + dom.parseError.reason);
            }
            else {
                var menus = dom.documentElement.childNodes;

                var ul = document.createElement("ul");
                for (var i = 0; i < menus.length; i++) {
                    var li = document.createElement("li");

                    var a = document.createElement("a");
                    a.innerHTML = menus[i].getAttribute("title");
                    a.href = menus[i].getAttribute("url");
                    li.appendChild(a);
                    ul.appendChild(li);
                }
                $("#menu2").append(ul);
            }
            $("#menu2 ul li").prepend("<span></span>");

            $("#menu2 ul li").each(function () {
                var linkText = $(this).find("a").html();
                $(this).find("span").show().html(linkText);
            });

            $("#menu2 ul li").hover(function () {
                $(this).find("span").stop().animate({ marginTop: -40 }, 200);
            }, function () {
                $(this).find("span").stop().animate({ marginTop: 0 }, 200);
            });
        });
    </script>
</head>
<body>
    <div id="menu2"></div>
</body>

 附件

posted @ 2013-04-25 20:22  Mr_Chen  阅读(390)  评论(0)  编辑  收藏  举报