自己用了Jquery開發(fā)了多級菜單分享下

Dreamweaver jQuery智能提示插件1.2.0

• 類型：編程輔助大小：109KB語言：中文 評分：5.0
• 標(biāo)簽：

立即下載

最近在講AJAX方面的一些理論和在項(xiàng)目中的應(yīng)用。我介紹到了AJAX的一些內(nèi)部原理，以及兩套AJAX框架：Microsoft ASP.NET AJAX和jquery.

我個(gè)人很喜歡Jquery，我對它的贊美從不吝嗇。呵呵

課程中講到一個(gè)問題，就是如何動態(tài)生成多級菜單。我知道網(wǎng)上有不少類似的菜單。但既然咱學(xué)了Jquery，為什么不可以嘗試自己實(shí)踐一下呢？

我把例子整理如下，希望給大家一些啟發(fā)和幫助。

 我們希望的結(jié)果簡單如下：左側(cè)會根據(jù)數(shù)據(jù)庫結(jié)構(gòu)展示一個(gè)菜單，默認(rèn)只是顯示第一級。用戶可以根據(jù)需要點(diǎn)擊任何一級，可以顯示子級。而且同級會被隱藏。

最后一層是鏈接，點(diǎn)擊之后，在右側(cè)顯示有關(guān)的頁面內(nèi)容

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

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

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

【注意】我這里只是為了演示目的，隨機(jī)生成了五層，每層的元素也是隨機(jī)生成的。真正在用的時(shí)候，可以讀取數(shù)據(jù)庫

這個(gè)頁面，在瀏覽器中看起來是這樣

【注意】因?yàn)槲矣玫氖请S機(jī)數(shù)，所以你看到的結(jié)果可能跟這個(gè)不一樣

第二步：準(zhǔn)備一個(gè)測試用的鏈接頁面

本例中，我們需要一個(gè)a.aspx頁面。

我只是簡單地在這個(gè)頁面中放了一些文字

第三步：編寫主頁面

<%@ 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">
很簡單，我們在這個(gè)頁面中左右兩側(cè)各放置了一個(gè)div。它們都是空的。在頁面加載成功之后，我們再讀取了menu.aspx頁面。本例中用了一個(gè)圖片，min.gif.你可以替換掉該圖片。盡量小一點(diǎn)。

完整代碼請下載：http://down.cr173.com/soft1/duojicaidan.rar