读取配置文件生成简单的网站导航菜单

前段时间，做了个简单的网站，因为时间仓促，那时每个页面都是写一个导航Ul。事完，觉得这维护起来实在太麻烦了，遂决定做个简单的导航脚本，读取Xml文件，动态生成页面菜单，然后根据当前Url自动判别哪个是当前菜单。以后还可以做个配置页面更新Xml文件……远的事情，以后再说，但总得有个考虑哈……

完成之后，觉得还是不理想啊，因为读取和解析Xml造成时间延迟问题，可以看到页面加载完成后，页面上的导航菜单有个重新加载的过程，郁闷中……

话不多说，上代码。

JS：

$(function () {

    /**

    *Ivan 2013-4-15

    *This menu helper mostly can have two leverls 

    */

    

    var url = document.URL;

    var currentPage;

    var menuTarget = $("#header");//where to display the menu

    var menuConfigUrl = "config/menuConfig.xml";//menu config xml file at server

    currentPage = getPageName(url);

   

    $.ajax({

        url: menuConfigUrl,

        dataType: 'xml',

        success: function (data) {

            getMenuCallback(data);

        }

    });

    

    //Get menu data call back

    function getMenuCallback(data) {

        var menuUl = document.createElement("ul");

        $(data).find("menus").children().each(function (index, ele) {

            var title = $(ele).attr("title");

            var link = $(ele).attr("url");

            

            var menuli = document.createElement("li");

            $(menuli).addClass($(ele).attr("class"));

            if (getPageName(link) == currentPage) {

               $(menuli).addClass("selected");

            }



            $('<a href="' + link + '">' + title + '</a>').appendTo($(menuli));



            if ($(ele).children().length > 0) {

                //The second lever menu

                var subMenuUl = document.createElement("ul");

                $(ele).children().each(function (subIndex, subEle) {

                    title = $(subEle).attr("title");

                    link = $(subEle).attr("url");

                    var subMenuli = document.createElement("li");

                    $(subMenuli).addClass($(subEle).attr("class"));

                    $('<a href="' + link + '">' + title + '</a>').appendTo($(subMenuli));

                    $(subMenuUl).append($(subMenuli));

                });

                $(menuli).append($(subMenuUl));

            }

            

            $(menuUl).append($(menuli));



        });

        

        var menuDiv = document.createElement("div");

        menuDiv.appendChild(menuUl);

        if (menuTarget.length > 0) {

            menuTarget.append($(menuDiv));

        } else {

            $("body").prepend($(menuDiv));

        }

    }

    

    //Get page name from a url string

    function getPageName(urlStr) {

        var pageName;

        if (urlStr.indexOf("?") != -1) {

            pageName = urlStr.substring(urlStr.lastIndexOf("/") + 1, urlStr.indexOf("?") - 1);

        } else {

            pageName = urlStr.substr(urlStr.lastIndexOf("/") + 1);

        }

        return pageName;

    }

});

 

示例的Xml文件（很多属性备用，尚未具体应用^_^）：

<?xml version="1.0" encoding="utf-8" ?>

<root>

  <menus>

    <menu title="首页" url="index.html" icon="" privilege="" target="" class=""></menu>

    <menu title="产品浏览" url="product.html" icon="" privilege="" target="" class=""></menu>

    <menu title="公司动态" url="news.html" icon="" privilege="" target="" class=""></menu>

    <menu title="关于我们" url="about.html" icon="" privilege="" target="" class=""></menu>

  </menus>

</root>

页面的CSS样式就没放上来，百度or谷歌一下导航菜单样式，一大堆了。这里要有一个selected的class样式，用来标记当前所在菜单。

Html页面，原文件：

<div id="header">

        

 </div>



 <script src="scripts/Ivan.Main-menu.js"></script>

动态生成后：

<div id="header">

  <ul>

    <li><a href="index.html">首页</a></li>

    <li><a href="product.html">产品浏览</a></li>

    <li class="selected">

      <a href="news.html">公司动态</a></li>

    <li><a href="about.html">关于我们</a></li>

  </ul>
</div>



 <script src="scripts/Ivan.Main-menu.js"></script>

当然，这只是页面中的部分代码。