当前位置:Gxlcms > asp.net > Asp.net 菜单控件简洁版

Asp.net 菜单控件简洁版

时间:2021-07-01 10:21:17 帮助过:40人阅读

本文介绍的菜单控件采用的css 和ul list来显示菜单,生成的html小,无需javascript支持,对大部分的浏览器都支持,除ie6要单独修改css也可以使其支持。
通过本文可以了解asp.net 控件的开发,及Composite设计模式的实际运用。
采用Composite设计模式设计菜单类:
MenuCompositeitem类
代码如下:
  1. <br>namespace Ruinet.Controls <br>{ <br>[Serializable()] <br>public class MenuCompositeItem <br>{ <br>private List<MenuCompositeItem> _children = new List<MenuCompositeItem>(); <br>private string _text; <br>private string _link; <br>private string _target; <br>/// <summary> <br>/// 菜单项 <br>/// </summary> <br>/// <param name="text">菜单名</param> <br>/// <param name="link">链接</param> <br>public MenuCompositeItem(string text, string link) <br>{ <br>this._text = text; <br>this._link = link; <br>} <br>/// <summary> <br>/// 菜单项 <br>/// </summary> <br>/// <param name="text">菜单名</param> <br>/// <param name="link">链接</param> <br>/// <param name="target">跳转目标</param> <br>public MenuCompositeItem(string text, string link, string target) <br>{ <br>this._text = text; <br>this._link = link; <br>this._target = target; <br>} <br>/// <summary> <br>/// 设置或获取菜单名 <br>/// </summary> <br>public string Text <br>{ <br>get { return _text; } <br>set { _text = value; } <br>} <br>/// <summary> <br>/// 设置或获取链接 <br>/// </summary> <br>public string Link <br>{ <br>get { return _link; } <br>set { _link = value; } <br>} <br>/// <summary> <br>/// 跳转目标 <br>/// </summary> <br>public string Target <br>{ <br>get { return _target; } <br>set { _target=value; } <br>} <br>/// <summary> <br>/// 设置或获取子菜单 <br>/// </summary> <br>public List<MenuCompositeItem> Children <br>{ <br>get { return _children; } <br>set { _children = value; } <br>} <br>} <br> <br>MenuComposite类 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>namespace Ruinet.Controls <br>{ <br>[DefaultProperty("Menu")] <br>[ToolboxData("<{0}:MenuComposite runat=server></{0}:MenuComposite>")] <br>public class MenuComposite : WebControl <br>{ <br>/// <summary> <br>/// 设置获取选择的菜单 <br>/// </summary> <br>[Bindable(true)] <br>[DefaultValue("")] <br>[Localizable(true)] <br>public string SelectedMenuText <br>{ <br>get <br>{ <br>String s = (String)ViewState["SelectedMenuText"]; <br>return ((s == null) ? String.Empty : s); <br>} <br>set <br>{ <br>ViewState["SelectedMenuText"] = value; <br>} <br>} <br>/// <summary> <br>/// 获取和设置菜单项从ViewState <br>/// </summary> <br>[Bindable(true)] <br>[DefaultValue(null)] <br>[Localizable(true)] <br>public MenuCompositeItem MenuItems <br>{ <br>get <br>{ <br>return ViewState["MenuItems"] as MenuCompositeItem; <br>} <br>set <br>{ <br>ViewState["MenuItems"] = value; <br>} <br>} <br>/// <summary> <br>/// 呈现菜单结构 <br>/// </summary> <br>/// <param name="output">HTML</li></ol></pre>输出流</param> <br>protected override void RenderContents(HtmlTextWriter output) <br>{ <br>MenuCompositeItem root = this.MenuItems; <br>output.Write(@"<div class=""navmenu"">"); <br>output.Write(@" <ul>"); <br>for (int i = 0; i < root.Children.Count; i++) <br>{ <br>RecursiveRender(output, root.Children[i]); <br>} <br>output.Write(@" </ul>"); <br>output.Write(@"</div>"); <br>} <br>/// <summary> <br>/// 递归
输出菜单项
/// </summary>
/// <param name="output">HTML输出流</param>
/// <param name="item">菜单项.</param>
/// <param name="depth">Indentation depth.</param>
private void RecursiveRender(HtmlTextWriter output, MenuCompositeItem item)
{
output.Write("<li>");
if (string.IsNullOrEmpty(item.Target))//为空不设置跳转目标
{
output.Write(@"<a href=""" + item.Link + @""">");
}
else
{
output.Write(@"<a href=""" + item.Link + @""" target= """ + item.Target + @""">");
}
if (item.Text == SelectedMenuText) //选中的菜单
{
output.Write(@"<span class=""selected"">");
output.WriteLine(item.Text);
output.WriteLine("</span>");
}
else
{
output.Write(item.Text);
}
output.Write("</a>");
if (item.Children.Count > 0)
{
output.WriteLine();
output.Write("<ul>");
for (int i = 0; i < item.Children.Count; i++)
{
RecursiveRender(output, item.Children[i]);
}
output.Write("</ul>");
}
output.Write("</li>");
}
}
}

在页面中使用
添加对控件的引用后就可以直接在“工具箱”-》Controls组件中 看到MenuComposite组件
再就可以像其他asp.net 控件一样使用
使用:
代码如下:
  1. <br>MenuCompositeItem root = new MenuCompositeItem("root", null); <br>MenuCompositeItem menu01 = new MenuCompositeItem("menu01", ResolveUrl("~/Default.aspx")); <br>MenuCompositeItem menu02 = new MenuCompositeItem("menu02", ResolveUrl("~/Default.aspx")); <br>MenuCompositeItem menu03 = new MenuCompositeItem("menu03", ResolveUrl("~/Default.aspx")); <br>MenuCompositeItem menu04 = new MenuCompositeItem("menu04", ResolveUrl("~/Page04.aspx")); <br>MenuCompositeItem menu05 = new MenuCompositeItem("menu05", ResolveUrl("~/Default.aspx")); <br>MenuCompositeItem menu01_01 = new MenuCompositeItem("menu01-01", ResolveUrl("~/Default.aspx")); <br>MenuCompositeItem menu01_02 = new MenuCompositeItem("menu01-02", ResolveUrl("~/Page01-02.aspx")); <br>MenuCompositeItem menu01_03 = new MenuCompositeItem("menu01-03", ResolveUrl("~/Default.aspx")); <br>MenuCompositeItem menu01_04 = new MenuCompositeItem("menu01-04", ResolveUrl("~/Default.aspx")); <br>menu01.Children.Add(menu01_01); <br>menu01.Children.Add(menu01_02); <br>menu01.Children.Add(menu01_03); <br>menu01.Children.Add(menu01_04); <br><br>MenuCompositeItem menu02_01 = new MenuCompositeItem("menu02-01", ResolveUrl("~/Default.aspx")); <br>MenuCompositeItem menu02_02 = new MenuCompositeItem("menu02-02", ResolveUrl("~/Default.aspx"), "menu02-02"); <br>menu02.Children.Add(menu02_01); <br>menu02.Children.Add(menu02_02); <br><br>MenuCompositeItem menu04_01 = new MenuCompositeItem("menu04-01", ResolveUrl("~/Default.aspx")); <br>MenuCompositeItem menu04_02 = new MenuCompositeItem("menu04-02", ResolveUrl("~/Page04-02.aspx"), "_blank"); <br>menu04.Children.Add(menu04_01); <br>menu04.Children.Add(menu04_02); <br>root.Children.Add(menu01); <br>root.Children.Add(menu02); <br>root.Children.Add(menu03); <br>root.Children.Add(menu04); <br>root.Children.Add(menu05); <br> <br>TheMenuComposite.MenuItems = root; <br>此时生成的编译运行后会生成一个没有样式Ul list ,效果如下: <br><img height="296" alt="" src="https://img.gxlcms.com//Uploads-s/new/2019-09-19-201919/20091111002916482.jpg" width="202" border="0">  <br>因此要生成可显示和隐藏的菜单项,关键在css的设置上,开始时将二级子菜单设置为隐藏visibility: hidden; <br>同时定义li的hover事件,li:hover时:自菜单的 visibility要改为visible; 大致原理是这样,当然还有注意菜单项的位置 <br>一级菜单float:left;使其能水平显示。 <br>CSS定义如下: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>.navmenu * <br>{ <br>margin: 0; <br>padding: 0; <br>} <br>.navmenu <br>{ <br>border: #000 1px solid; <br>height: 25px; <br>} <br>.navmenu li <br>{ <br>/*水平菜单*/ <br>float: left; <br>list-style: none; <br>position: relative; <br>} <br>.navmenu a <br>{ <br>display: block; <br>font-size: 12px; <br>height: 24px; <br>width: 100px; <br>line-height: 24px; <br>background-color: #CDEB8B; <br>color: #0000ff; <br>text-decoration: none; <br>text-align: center; <br>border-left: #36393D 1px inset; <br>border-right: #36393D 1px inset; <br>border-bottom: #36393D 1px inset; <br>} <br>/*单独设置一级菜单样式*/ <br>.navmenu > ul > li > a <br>{ <br>font-size: 11px; <br>font-weight: bold; <br>} <br>.navmenu a:hover <br>{ <br>background: #369; <br>color: #fff; <br>} <br>/*新增的二级菜单部分*/ <br>.navmenu ul ul <br>{ <br>visibility: hidden; /*开始时是隐藏的*/ <br>position: absolute; <br>left: 0px; <br>top: 24px; <br>} <br>.navmenu ul li:hover ul, .navmenu ul a:hover ul <br>{ <br>visibility: visible; <br>} <br>.navmenu ul ul li <br>{ <br>clear: both; /*垂直显示*/ <br>text-align: left; <br>} <br>/*选中菜单项*/ <br>.navmenu .selected <br>{ <br>padding-left:15px; <br>background-position-x:0px; <br>background-image: url(./res/selected.gif); <br>background-repeat: no-repeat; <br>text-decoration:underline; <br>} <br> <br>定义CSS后的效果如下: <br><img height="144" alt="" src="https://img.gxlcms.com//Uploads-s/new/2019-09-19-201919/20091111002916247.gif" width="649" border="0"><br>到此菜单控件已完成。已测试过可以在IE7,IE8,Chrome,Firefox中正常显示,在IE6显示可能会有问题,可以参考纯CSS多级菜单 进行修改, <br><br>本文的CSS显示部分参考了此文的介绍。 <br><br>附上完整代码,如需要可自行下载修改 下载文件</li><li> </li><li> </li></ol></pre>

人气教程排行