最近在講AJAX方面的一些理論和在項(xiàng)目中的應(yīng)用。我介紹到了AJAX的一些內(nèi)部原理，以及兩套AJAX框架：Microsoft ASP.NET AJAX和jquery。我個(gè)人很喜歡Jquery，我對(duì)它的贊美從不吝嗇。

　　關(guān)于Jquery，其實(shí)之前就寫過不少，有興趣的可以參考：http://zzk.cnblogs.com/s?w=blog%3Achenxizhang%20jquery

　　課程中講到一個(gè)問題，就是如何動(dòng)態(tài)生成多級(jí)菜單。我知道網(wǎng)上有不少類似的菜單。但既然咱學(xué)了Jquery，為什么不可以嘗試自己實(shí)踐一下呢？我把例子整理如下，希望給大家一些啟發(fā)和幫助。

　　我們希望的結(jié)果簡(jiǎn)單如下：左側(cè)會(huì)根據(jù)數(shù)據(jù)庫(kù)結(jié)構(gòu)展示一個(gè)菜單，默認(rèn)只是顯示第一級(jí)。用戶可以根據(jù)需要點(diǎn)擊任何一級(jí)，可以顯示子級(jí)。而且同級(jí)會(huì)被隱藏。最后一層是鏈接，點(diǎn)擊之后，在右側(cè)顯示有關(guān)的頁(yè)面內(nèi)容。

　　第一步：準(zhǔn)備菜單數(shù)據(jù)頁(yè)面

　　我們可以用一個(gè)頁(yè)面，動(dòng)態(tài)生成這個(gè)菜單的數(shù)據(jù)。本例我取名為menu.ASPx：

<%@ Page Language="C#" ContentType="text/xml"%>
<%@ Import Namespace="System.Xml.Linq" %>
<%@ Import Namespace="System.Linq" %>

<script runat="server">
    protected override void OnLoad(EventArgs e)
    {
        //動(dòng)態(tài)構(gòu)造一個(gè)菜單（隨機(jī)生成五層）
        var rnd = new Random();

        var menu = new XElement("MenuItems",
            from level1 in Enumerable.Range(1, 10)
            select new XElement("div", "第" + level1.ToString() + "章",
                from level2 in Enumerable.Range(1, rnd.Next(10))
                select new XElement("div", "第" + level2.ToString() + "節(jié)",
                    from level3 in Enumerable.Range(1, rnd.Next(5))
                    select new XElement("div", "第" + level3.ToString() + "小節(jié)",
                        from level4 in Enumerable.Range(1, rnd.Next(5))
                        select new XElement("div", "第" + level4.ToString() + "小小節(jié)",
                            new XElement("ul",
                            from level5 in Enumerable.Range(1, rnd.Next(10))
                            select new XElement("li",
                                new XElement("a",
                                new XAttribute("href", "a.ASPx"),
                                new XAttribute("target", "content"),
                                new XText("第" + level5.ToString() + "個(gè)鏈接")))))))));         
           
        Response.Write(menu.ToString());                    
    }
</script>        

        

        
        
      
        
it知識(shí)庫(kù)：使用jquery構(gòu)造自己的多級(jí)菜單，轉(zhuǎn)載需保留來源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。