使用jquery构造自己的多级菜单
最近在讲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.你可以替换掉该图片。尽量小一点。