父菜单高亮; ASP.NET Menu parent menuitem highlighting

最新推荐文章于 2022-05-24 19:51:20 发布

转载最新推荐文章于 2022-05-24 19:51:20 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/forward/archive/2008/01/26/1054604.html

文章标签：

#xhtml #ui #c#

本文介绍了一种通过JavaScript实现父菜单选中状态高亮显示的方法。该方法利用客户端脚本跟踪鼠标悬停事件，并递归地应用样式到指定菜单项及其所有父级菜单项上。与CSSAdapters相比，此方案提供了更多定制选项，但可能会影响页面性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天偶逛CodeProject，又发现个好东东，另一种实现父菜单选中的方法，之前找到过一个，CSSAdapters( http://www.asp.net/cssadapters)的方法，这个又是一种，都很经典的说

这个新的方式也很不错
我将sample code留下来，以后也会记得，嘿嘿原文: http://www.codeproject.com/KB/webforms/AspMenuParentHighlighting.aspx

使用js来实现的，恩，页面会有太多的js，如果菜单很多，那么应该也会很慢的应该，性能考量不见的比上面那个CSSAdapters的好，CSSAdapter配置确实要麻烦很多不过

html

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
4

< html xmlns ="http://www.w3.org/1999/xhtml" >
6

< head id ="Head1" runat ="server" >
7

< title > Untitled Page </ title >
8

< script type ="text/javascript" >

function HoverParents(id, parentSnake)
10

{
11

Menu_HoverDynamic(document.getElementById(id));
12

var parents = parentSnake.toString().split(',');
13

for(i = 0;i < parents.length;i++)
14

{
15

if(parents[i] != '')
16

{
17

Menu_HoverDynamic(document.getElementById(parents[i]));
18

}
19

}
20

}
21

function UnhoverParents(id, parentSnake)
23

{
24

Menu_Unhover(document.getElementById(id));
25

var parents = parentSnake.toString().split(',');
27

for(i = 0;i < parents.length;i++)
28

{
29

if(parents[i] != '')
30

{
31

Menu_Unhover(document.getElementById(parents[i]));
32

}
33

}
34

}
35

</ script >
36

</ head >
37

< body >
38

< form id ="form1" runat ="server" >
39

< div >
40

< asp:ScriptManager ID ="sm" runat ="server" />
41

< asp:UpdatePanel ID ="up" runat ="server" >
42

< ContentTemplate >
43

< asp:Menu ID ="mainMenu" runat ="server"
44

StaticMenuItemStyle-CssClass ="MenuItem"
45

StaticHoverStyle-CssClass ="MenuItemHover"
46

StaticSelectedStyle-CssClass ="MenuItemSelected"
47

StaticPopOutImageUrl ="~/Images/PopOut.png"
48

DynamicPopOutImageUrl ="~/Images/PopOut.png"
49

DynamicMenuItemStyle-CssClass ="DynamicMenuItem"
50

DynamicHoverStyle-CssClass ="MenuItemHover"
51

StaticSubMenuIndent ="0"
52

StaticDisplayLevels ="2"
53

>
54

< Items >
55

< asp:MenuItem Text ="Music" >
56

< asp:MenuItem Text ="Classical" />
57

< asp:MenuItem Text ="Rock" >
58

< asp:MenuItem Text ="Electric" />
59

< asp:MenuItem Text ="Acoustical" />
60

< asp:MenuItem Text ="Classical4" />
61

< asp:MenuItem Text ="Rock4" >
62

< asp:MenuItem Text ="Electric4" />
63

< asp:MenuItem Text ="Acoustical4" />
64

</ asp:MenuItem >
65

</ asp:MenuItem >
66

< asp:MenuItem Text ="Classical2" />
67

< asp:MenuItem Text ="Rock2" >
68

< asp:MenuItem Text ="Electric2" >
69

< asp:MenuItem Text ="Classical3" />
70

< asp:MenuItem Text ="Rock3" >
71

< asp:MenuItem Text ="Electric3" />
72

< asp:MenuItem Text ="Acoustical3" />
73

</ asp:MenuItem >
74

</ asp:MenuItem >
75

< asp:MenuItem Text ="Acoustical5" />
76

</ asp:MenuItem >
77

</ asp:MenuItem >
78

</ Items >
79

</ asp:Menu >
80

< asp:Label id ="MessageLabel" runat ="server" />
81

</ ContentTemplate >
82

</ asp:UpdatePanel >
83

</ div >
85

</ form >
86

</ body >
87

</ html >
88

code behind

using System;
2

using System.Collections.Generic;
3

using System.Configuration;
4

using System.Data;
5

using System.Linq;
6

using System.Web;
7

using System.Web.Security;
8

using System.Web.UI;
9

using System.Web.UI.HtmlControls;
10

using System.Web.UI.WebControls;
11

using System.Web.UI.WebControls.WebParts;
12

using System.Xml.Linq;
13

public partial class _Default : System.Web.UI.Page
15

{
16

protected void Page_Load(object sender, EventArgs e)
17

{
18

mainMenu.MenuItemClick += new MenuEventHandler(mainMenu_MenuItemClick);
19

string script = String.Empty;
20

List<MenuItem> list = new List<MenuItem>();
22

list.Add(mainMenu.Items[0]);
23

FindMenuItems(mainMenu.Items[0], list);
24

foreach (MenuItem mi in list)
26

{
27

List<MenuItem> parents = new List<MenuItem>();
28

FindParents(mi, parents);
29

string parentSnake = String.Empty;
31

foreach (MenuItem parent in parents)
32

{
33

parentSnake += "mainMenun" + list.IndexOf(parent).ToString() + ",";
34

}
35

parentSnake.TrimEnd(',');
37

script += "document.getElementById('" + mainMenu.ClientID + "n" + list.IndexOf(mi).ToString() + "').onmouseover = function(){HoverParents('" + mainMenu.ClientID + "n" + list.IndexOf(mi).ToString() + "', '" + parentSnake + "')};";
39

script += "document.getElementById('" + mainMenu.ClientID + "n" + list.IndexOf(mi).ToString() + "').onmouseout = function(){UnhoverParents('" + mainMenu.ClientID + "n" + list.IndexOf(mi).ToString() + "', '" + parentSnake + "')};";
40

}
41

ScriptManager.RegisterStartupScript(this, typeof(string), "MenuHoverUnhover", script, true);
43

}
44

void FindMenuItems(MenuItem mi, List<MenuItem> list)
46

{
47

foreach (MenuItem child in mi.ChildItems)
48

{
49

list.Add(child);
50

}
51

foreach (MenuItem child in mi.ChildItems)
53

{
54

FindMenuItems(child, list);
55