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

前段时间，做了个简单的网站，因为时间仓促，那时每个页面都是写一个导航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>

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