使用jquery构造自己的多级菜单

  最近在讲AJAX方面的一些理论和在项目中的应用。我介绍到了AJAX的一些内部原理,以及两套AJAX框架:Microsoft ASP.NET AJAX和jquery。我个人很喜欢Jquery,我对它的赞美从不吝啬。

  关于Jquery,其实之前就写过不少,有兴趣的可以参考:http://zzk.cnblogs.com/s?w=blog%3Achenxizhang%20jquery

  课程中讲到一个问题,就是如何动态生成多级菜单。我知道网上有不少类似的菜单。但既然咱学了Jquery,为什么不可以尝试自己实践一下呢?我把例子整理如下,希望给大家一些启发和帮助。

  我们希望的结果简单如下:左侧会根据数据库结构展示一个菜单,默认只是显示第一级。用户可以根据需要点击任何一级,可以显示子级。而且同级会被隐藏。最后一层是链接,点击之后,在右侧显示有关的页面内容。

imageimage

image  第一步:准备菜单数据页面

  我们可以用一个页面,动态生成这个菜单的数据。本例我取名为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>

it知识库使用jquery构造自己的多级菜单,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。