注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

幽狼De博客

记录成长中的点点滴滴

 
 
 

日志

 
 

一个简洁的Asp.net菜单控件  

2011-04-28 15:45:42|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

asp.net自带的菜单控件采用的table和javascript,导致生成的大量的html,同时在很多浏览器中都无法显示出子菜单,也只能在IE中能显示出来。

本文介绍的菜单控件采用的css 和ul list来显示菜单,生成的html小,无需javascript支持,对大部分的浏览器都支持,除ie6要单独修改css也可以使其支持。

通过本文可以了解asp.net 控件的开发,及Composite设计模式的实际运用。

采用Composite设计模式设计菜单类:

MenuCompositeitem类

 
namespace Ruinet.Controls
{
  [Serializable()]
  public class MenuCompositeItem
  {
    private List<MenuCompositeItem> _children = new List<MenuCompositeItem>();
    private string _text;
    private string _link;
    private string _target;

    /// <summary>
    /// 菜单项
    /// </summary>
    /// <param name="text">菜单名</param>
    /// <param name="link">链接</param>
    public MenuCompositeItem(string text, string link)
    {
      this._text = text;
      this._link = link;
    }
    /// <summary>
    /// 菜单项
    /// </summary>
    /// <param name="text">菜单名</param>
    /// <param name="link">链接</param>
    /// <param name="target">跳转目标</param>
    public MenuCompositeItem(string text, string link, string target)
    {
      this._text = text;
      this._link = link;
      this._target = target;
    }

    /// <summary>
    /// 设置或获取菜单名
    /// </summary>
    public string Text
    {
      get { return _text; }
      set { _text = value; }
    }

    /// <summary>
    /// 设置或获取链接
    /// </summary>
    public string Link
    {
      get { return _link; }
      set { _link = value; }
    }
    /// <summary>
    /// 跳转目标
    /// </summary>
    public string Target
    {
      get { return _target; }
      set { _target=value; }
    }

    /// <summary>
    /// 设置或获取子菜单
    /// </summary>
    public List<MenuCompositeItem> Children
    {
      get { return _children; }
      set { _children = value; }
    }
  }

MenuComposite类

 namespace Ruinet.Controls
{
  [DefaultProperty(
"Menu")]
  [ToolboxData(
"<{0}:MenuComposite runat=server></{0}:MenuComposite>")]
  
public class MenuComposite : WebControl
  {
    
/// <summary>
    
/// 设置获取选择的菜单
    
/// </summary>
    [Bindable(true)]
    [DefaultValue(
"")]
    [Localizable(
true)]
    
public string SelectedMenuText
    {
      
get
      {
        String s 
= (String)ViewState["SelectedMenuText"];
        
return ((s == null? String.Empty : s);
      }

      
set
      {
        ViewState[
"SelectedMenuText"= value;
      }
    }

    
/// <summary>
    
/// 获取和设置菜单项从ViewState
    
/// </summary>
    [Bindable(true)]
    [DefaultValue(
null)]
    [Localizable(
true)]
    
public MenuCompositeItem MenuItems
    {
      
get
      {
        
return ViewState["MenuItems"as MenuCompositeItem;
      }

      
set
      {
        ViewState[
"MenuItems"= value;
      }
    }

    
/// <summary>
    
/// 呈现菜单结构
    
/// </summary>
    
/// <param name="output">HTML输出流</param>
    protected override void RenderContents(HtmlTextWriter output)
    {
      MenuCompositeItem root 
= this.MenuItems;

      output.Write(
@"<div class=""navmenu"">");
      output.Write(
@"    <ul>");

      
for (int i = 0; i < root.Children.Count; i++)
      {
        RecursiveRender(output, root.Children[i]);
      }
      output.Write(
@"    </ul>");
      output.Write(
@"</div>");
    }

    
/// <summary>
    
/// 递归输出菜单项
    
/// </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="http://frieboy168.blog.163.com/blog/"" + item.Link + @""">");
      }
      
else
      {
        output.Write(
@"<a href="http://frieboy168.blog.163.com/blog/"" + 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 控件一样使用

使用:

  MenuCompositeItem root = new MenuCompositeItem("root"null);
    MenuCompositeItem menu01 
= new MenuCompositeItem("menu01", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu02 
= new MenuCompositeItem("menu02", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu03 
= new MenuCompositeItem("menu03", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu04 
= new MenuCompositeItem("menu04", ResolveUrl("~/Page04.aspx"));
    MenuCompositeItem menu05 
= new MenuCompositeItem("menu05", ResolveUrl("~/Default.aspx"));

    MenuCompositeItem menu01_01 
= new MenuCompositeItem("menu01-01", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu01_02 
= new MenuCompositeItem("menu01-02", ResolveUrl("~/Page01-02.aspx"));
    MenuCompositeItem menu01_03 
= new MenuCompositeItem("menu01-03", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu01_04 
= new MenuCompositeItem("menu01-04", ResolveUrl("~/Default.aspx"));
    menu01.Children.Add(menu01_01);
    menu01.Children.Add(menu01_02);
    menu01.Children.Add(menu01_03);
    menu01.Children.Add(menu01_04);


    MenuCompositeItem menu02_01 
= new MenuCompositeItem("menu02-01", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu02_02 
= new MenuCompositeItem("menu02-02", ResolveUrl("~/Default.aspx"), "menu02-02");
    menu02.Children.Add(menu02_01);
    menu02.Children.Add(menu02_02);


    MenuCompositeItem menu04_01 
= new MenuCompositeItem("menu04-01", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu04_02 
= new MenuCompositeItem("menu04-02", ResolveUrl("~/Page04-02.aspx"), "_blank");
    menu04.Children.Add(menu04_01);
    menu04.Children.Add(menu04_02);

    root.Children.Add(menu01);
    root.Children.Add(menu02);
    root.Children.Add(menu03);
    root.Children.Add(menu04);
    root.Children.Add(menu05);

    TheMenuComposite.MenuItems 
= root;

 

此时生成的编译运行后会生成一个没有样式Ul list ,效果如下:

  

因此要生成可显示和隐藏的菜单项,关键在css的设置上,开始时将二级子菜单设置为隐藏visibility: hidden;

同时定义li的hover事件,li:hover时:自菜单的 visibility要改为visible; 大致原理是这样,当然还有注意菜单项的位置

一级菜单float:left;使其能水平显示。

CSS定义如下:

 .navmenu *
{
    margin
: 0;
    padding
: 0;
}
.navmenu
{
    border
: #000 1px solid;
    height
: 25px;
}
.navmenu li
{
    
/*水平菜单*/
    float
: left;
    list-style
: none;
    position
: relative;
}
.navmenu a
{
    display
: block;
    font-size
: 12px;
    height
: 24px;
    width
: 100px;
    line-height
: 24px;
    background-color
: #CDEB8B;
    color
: #0000ff;
    text-decoration
: none;
    text-align
: center;
    border-left
: #36393D 1px inset;
    border-right
: #36393D 1px inset;
    border-bottom
: #36393D 1px inset;
}
/*单独设置一级菜单样式*/
.navmenu > ul > li > a
{
    font-size
: 11px;
    font-weight
: bold;
}
.navmenu a:hover
{
    background
: #369;
    color
: #fff;
}
/*新增的二级菜单部分*/
.navmenu ul ul
{
    visibility
: hidden; /*开始时是隐藏的*/
    position
: absolute;
    left
: 0px;
    top
: 24px;
}
.navmenu ul li:hover ul, .navmenu ul a:hover ul
{
    visibility
: visible;
}
.navmenu ul ul li
{
    clear
: both; /*垂直显示*/
    text-align
: left;
}
/*选中菜单项*/
.navmenu .selected
{
    padding-left
:15px;
    background-position-x
:0px;
    background-image
: url(./res/selected.gif);
    background-repeat
: no-repeat;
    text-decoration
:underline;
}

定义CSS后的效果如下:

到此菜单控件已完成。已测试过可以在IE7,IE8,Chrome,Firefox中正常显示,在IE6显示可能会有问题,可以参考纯CSS多级菜单 进行修改,

本文的CSS显示部分参考了此文的介绍。

 附上完整代码,如需要可自行下载修改:点击下载源码

  评论这张
 
阅读(457)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017