使用jquery構造自己的多級菜單

作者: 陳希章來源: 博客園發布時間: 2010-11-18 22:18 閱讀: 2553 次推薦: 1 原文鏈接 [收藏]

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

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

　　課程中講到一個問題，就是如何動態生成多級菜單。我知道網上有不少類似的菜單。但既然咱學了Jquery，為什么不可以嘗試自己實踐一下呢？我把例子整理如下，希望給大家一些啟發和幫助。

　　我們希望的結果簡單如下：左側會根據數據庫結構展示一個菜單，默認只是顯示第一級。用戶可以根據需要點擊任何一級，可以顯示子級。而且同級會被隱藏。最后一層是鏈接，點擊之后，在右側顯示有關的頁面內容。

　　第一步：準備菜單數據頁面

　　我們可以用一個頁面，動態生成這個菜單的數據。本例我取名為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)
{
//動態構造一個菜單（隨機生成五層）
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() + "節",
from level3 in Enumerable.Range(1, rnd.Next(5))
select new XElement("div", "第" + level3.ToString() + "小節",
from level4 in Enumerable.Range(1, rnd.Next(5))
select new XElement("div", "第" + level4.ToString() + "小小節",
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() + "個鏈接")))))))));

Response.Write(menu.ToString());
}
</script>

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

　　這個頁面，在瀏覽器中看起來是這樣：

　　【注意】因為我用的是隨機數，所以你看到的結果可能跟這個不一樣。

　　第二步：準備一個測試用的鏈接頁面

　　本例中，我們需要一個a.aspx頁面。我只是簡單地在這個頁面中放了一些文字：

　　第三步：編寫主頁面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<style type="text/css">
.selected
{
font-weight:bold;
}
div#menu div
{
padding-left: 20px;
background-image: url("images/min.gif");
background-repeat: no-repeat;
background-position: left top;
}

ul
{
padding-left:20px;
padding-top:0px;
padding-bottom:0px;
margin:0px;
display:none
}

html,body,form
{
height:100%;
width:100%;
overflow:hidden;
}

div#menu,div#content
{
float:left;
height:100%;
padding:10px
}
</style>
<script language="javascript" type="text/javascript">
$(function () {
//加載菜單數據
$("div#menu").load("menu.aspx", null, function () {
$("div#menu div").css("display", "none").click(function () {

$("div#menu div").removeClass("selected");

$(this).addClass("selected")
.children().show("slow").end()
.siblings().children().slideUp("slow");
});

$("div#menu>MenuItems>div").css("display", "block");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="menu" style="width:25%">

</div>
<div id="content" style="width:70%">
<iframe name="content" width="100%" height="100%" frameborder="0"></iframe>
</div>
</form>
</body>
</html>

　　很簡單，我們在這個頁面中左右兩側各放置了一個div。它們都是空的。在頁面加載成功之后，我們再讀取了menu.aspx頁面。

　　【注意】本例中用了一個圖片，min.gif.你可以替換掉該圖片。盡量小一點。

標簽：jquery