最近在講AJAX方面的一些理論和在項目中的應(yīng)用。我介紹到了AJAX的一些內(nèi)部原理，以及兩套AJAX框架：Microsoft ASP.NET AJAX和jquery.
我個人很喜歡Jquery，我對它的贊美從不吝嗇。呵呵
課程中講到一個問題，就是如何動態(tài)生成多級菜單。我知道網(wǎng)上有不少類似的菜單。但既然咱學(xué)了Jquery，為什么不可以嘗試自己實踐一下呢？
我把例子整理如下，希望給大家一些啟發(fā)和幫助。
我們希望的結(jié)果簡單如下：左側(cè)會根據(jù)數(shù)據(jù)庫結(jié)構(gòu)展示一個菜單，默認(rèn)只是顯示第一級。用戶可以根據(jù)需要點擊任何一級，可以顯示子級。而且同級會被隱藏。
最后一層是鏈接，點擊之后，在右側(cè)顯示有關(guān)的頁面內(nèi)容
第一步：準(zhǔn)備菜單數(shù)據(jù)頁面
我們可以用一個頁面，動態(tài)生成這個菜單的數(shù)據(jù)。本例我取名為menu.aspx
<%@ Page Language="C#" ContentType="text/xml"%>
<%@ Import Namespace="System.Xml.Linq" %>
<%@ Import Namespace="System.Linq" %>
【注意】我這里只是為了演示目的，隨機生成了五層，每層的元素也是隨機生成的。真正在用的時候，可以讀取數(shù)據(jù)庫
這個頁面，在瀏覽器中看起來是這樣
【注意】因為我用的是隨機數(shù)，所以你看到的結(jié)果可能跟這個不一樣
第二步：準(zhǔn)備一個測試用的鏈接頁面
本例中，我們需要一個a.aspx頁面。
我只是簡單地在這個頁面中放了一些文字
第三步：編寫主頁面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<scriptsrc="jquery-1.4.1.js"type="text/javascript">
<formid="form1"runat="server">
<divid="menu"style="width:25%">
<divid="content"style="width:70%">
<iframename="content"width="100%"height="100%"frameborder="0">
很簡單，我們在這個頁面中左右兩側(cè)各放置了一個div。它們都是空的。在頁面加載成功之后，我們再讀取了menu.aspx頁面。本例中用了一個圖片，min.gif.你可以替換掉該圖片。盡量小一點。
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過
囧
圍觀
無聊
