您的位置:知识库 » Web前端

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

作者: 陈希章  来源: 博客园  发布时间: 2010-11-18 22:18  阅读: 2536 次  推荐: 1   原文链接   [收藏]  

  最近在讲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>

  【注意】我这里只是为了演示目的,随机生成了五层,每层的元素也是随机生成的。真正在用的时候,可以读取数据库。

  这个页面,在浏览器中看起来是这样:

image  【注意】因为我用的是随机数,所以你看到的结果可能跟这个不一样。

  第二步:准备一个测试用的链接页面

  本例中,我们需要一个a.aspx页面。我只是简单地在这个页面中放了一些文字:

image

  第三步:编写主页面

<%@ 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.你可以替换掉该图片。尽量小一点。

1
0
标签:jquery

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻