超级简单：一个横向ASP.NET Menu控件

最新推荐文章于 2023-06-21 13:40:52 发布
最新推荐文章于 2023-06-21 13:40:52 发布
阅读量394 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhuqil/archive/2009/12/22/1629492.html
版权

    几个星期前，开始了一个ASP.NET Web应用程序，需要一个简单的横向的带子菜单的Menu控件。将Menu控件拖拽到一个页面上时，我就决定使用ASP.NET的Menu控件。这个控件很简单，但该控件不提供访问的key和支持菜单窗体的target。我把这些功能放在一起将如何去实现：

1、包含accesskey属性

2、包含target属性

3、包含Site Map Path

 

这是项目工程的结构，欢迎你下载这个Demo。

 

     首先，添加一个Site Map 到我们的website工程。打开web.sitemap文件，添加你的导航数据和导航结构。为了强调一个菜单标题的某些特征，我们可以使用HTML下划线记 (<u></u>)。为了正确地解析XML，我们必须用 & lt;取代小于号（<）。每个siteMapNode包含一个accesskey 和target属性值。

Listing 1：

代码
< siteMapNode >
       < siteMapNode  url ="Default.aspx"  
         title ="& lt;u>H& lt;/u>ome"  
         description ="Home"  
         accesskey ="H"   />
       < siteMapNode  url ="~/Views/Menu1.aspx"  
                   title ="& lt;u>M& lt;/u>enu1"   
                   description ="Menu1"  accesskey ="M"   />
         < siteMapNode  url ="~/Views/Menu2.aspx"  
                     title ="M<u>e</u>nu2"  
                     description ="Menu2"  accesskey ="E"   />
    
     < siteMapNode  url ="~/Views/Menu3.aspx"  
                 title ="Me<u>n</u>u3"  
                 description ="Menu3"  
                 accesskey ="N"  target ="_blank"   />
        
     < siteMapNode  url ="~/Views/Menu4.aspx"  
                 title ="Men<u>u</u>4"  
                 description ="Menu4"  accesskey ="U" >
       < siteMapNode  url ="~/Views/Menu4Sub1.aspx"  
                   title ="Menu4<u>S</u>ub1"  
                   description ="Menu4Sub1"  
                   accesskey ="S"   />
       < siteMapNode  url ="~/Views/Menu4Sub2.aspx"  
                   title ="Menu4Su<u>b</u>2"  
                   description ="Menu4Sub2"  
                   target ="_blank"  accesskey ="B"   />
     </ siteMapNode >
……
….
   </ siteMapNode >
</ siteMap >

 

      添加一个Master Pag到我们的website项目中，拖一个SiteMapDataSource控件到页面上，接着拖一个Menu控件，Menu控件包含在一个div里面，menu每个属性都能在这里被找到，

设置 staticdisplaylevels ="2" 和orientation="Horizontal"来横向的显示menu控件。我们可以使用内联样式表或放置在一个外部文件中的CSS样式。在本例中，CSS样式位于style.css文件。

Listing 2：

 

代码
< asp:SiteMapDataSource  id ="MenuSource"  runat ="server"   />
< div  class ="background" >
   < asp:menu  id ="NavigationMenu"  CssClass ="NavigationMenu"   
        staticdisplaylevels ="2"  DynamicHorizontalOffset ="1"
        staticsubmenuindent ="1px"  MaximumDynamicDisplayLevels ="4"
        orientation ="Horizontal"    
        DynamicPopOutImageUrl ="~/Images/right-arrow.gif"  
        StaticPopOutImageUrl ="~/Images/drop-arrow.gif"
        datasourceid ="MenuSource"     
        runat ="server"  Height ="30px" >

         < staticmenuitemstyle  ItemSpacing ="10"  
                    CssClass ="staticMenuItemStyle" />
         < statichoverstyle  CssClass ="staticHoverStyle"   />
        < StaticSelectedStyle  CssClass ="staticMenuItemSelectedStyle" />  
         < DynamicMenuItemStyle  CssClass ="dynamicMenuItemStyle"   />       
         < dynamichoverstyle  CssClass ="menuItemMouseOver"   />
         < DynamicMenuStyle  CssClass ="menuItem"   />
        < DynamicSelectedStyle  CssClass ="menuItemSelected"   />
     
        < DataBindings >         
              < asp:MenuItemBinding  DataMember ="siteMapNode"  
                    NavigateUrlField ="url"  TextField ="title"   
                    ToolTipField ="description"   />
         </ DataBindings >

       </ asp:menu >
</ div >

 拖一个SiteMapPath 控件到页面上。这个控件的目的是显示导航路径和显示用户当前页的位置。请看看Listing 3。

 Listing 3：

代码
< div  id ="e" >
        < asp:SiteMapPath  ID ="SiteMapPath1"  runat ="server"  
                RenderCurrentNodeAsLink ="true"  
                CssClass ="currentNodeStyle"
            PathSeparator =" >> " >
             < PathSeparatorStyle  ForeColor ="#5D7B9D"  CssClass ="currentNodeStyle"   />
             < CurrentNodeStyle  ForeColor ="#333333"  CssClass ="currentNodeStyle"   />
             < NodeStyle  ForeColor ="#7C6F57"   CssClass ="currentNodeStyle"    />
             < RootNodeStyle   ForeColor ="#5D7B9D"  CssClass ="currentNodeStyle"    />
     </ asp:SiteMapPath >  
 </ div >

    在Page_Load事件中包括MenuItemDataBound和SiteMapResolve事件处理程序。前者的目的是插入target的属性值，在Meun呈现或者显示之前，为菜单项创造accesskey。后者是修改的SiteMapPath控件显示的文本。

 

NavigationMenu.MenuItemDataBound  +=  
      new  MenuEventHandler(NavigationMenu_MenuItemDataBound);
SiteMap.SiteMapResolve  +=  
      new  SiteMapResolveEventHandler(SiteMap_SiteMapResolve);

    下面显示的是该NavigationMenu_MenuItemDataBound实现的方法。在Menu控件中的菜单项绑定数据时，触发MenuItemDataBound事件发生。话虽如此，这将通过循环SiteMapNode来寻找accesskey和target属性。每一个target属性与菜单项关联，我们可以用target属性值来设置目标窗口。

 

代码
void  NavigationMenu_MenuItemDataBound( object  sender, MenuEventArgs e)
{
    SiteMapNode node  =  (SiteMapNode)e.Item.DataItem;
   
     // set the target of the navigation menu item (blank, self, etc...)
     if  (node[ " target " ]  !=   null )
    {
        e.Item.Target  =  node[ " target " ];
    }
     // create access key button
     if  (node[ " accesskey " ]  !=   null )
    {
        CreateAccessKeyButton(node[ " accesskey " ]  as   string , node.Url);
    }
}

    要获得accesskey，将在母版页上添加一个Panel控件和一个重定向到指定的一个网页的JavaScript函数。请看Listing 6

 Listing 6：

< asp:Panel ID = " AccessKeyPanel "  runat = " server "   />
< script type = " text/javascript " >
 function navigateTo(url) {
    window.location  =  url;
 }
 </ script >

  下面是CreateAccessKeyButton方法的实现。动态的创建一个HtmlButton控件，给它添加一个onclick事件。设置style.left样式属性为-255px来隐藏这个控件。

代码
// create access key button
void  CreateAccessKeyButton( string  ak,  string  url)
{
    HtmlButton inputBtn  =   new  HtmlButton();
    inputBtn.Style.Add( " width " ,  " 1px " );
    inputBtn.Style.Add( " height " ,  " 1px " );
    inputBtn.Style.Add( " position " ,  " absolute " );
    inputBtn.Style.Add( " left " ,  " -2555px " );
    inputBtn.Style.Add( " z-index " ,  " -1 " );
    inputBtn.Attributes.Add( " type " ,  " button " );
    inputBtn.Attributes.Add( " value " ,  "" );
    inputBtn.Attributes.Add( " accesskey " , ak);
    inputBtn.Attributes.Add( " onclick " ,  " navigateTo(' "   +  url  +   " '); " );
    AccessKeyPanel.Controls.Add(inputBtn);
}

   当CurrentNode属性被访问时，SiteMap.SiteMapResolve事件被触发。这将调用递归的ReplaceNodeText方法，来替换HTML下划线标记 。请看Listing 8

 Listing 8：

代码
SiteMapNode SiteMap_SiteMapResolve( object  sender, SiteMapResolveEventArgs e)
{
    SiteMapNode currentNode  =  SiteMap.CurrentNode.Clone( true );
    SiteMapNode tempNode  =  currentNode;
    tempNode  =  ReplaceNodeText(tempNode);

     return  currentNode;
}

 // remove <u></u> tag recursively
internal  SiteMapNode ReplaceNodeText(SiteMapNode smn)
{
     // current node
     if  (smn  !=   null   &&  smn.Title.Contains( " <u> " ))
    {
        smn.Title  =  smn.Title.Replace( " <u> " , 
                        "" ).Replace( " </u> " ,  "" );
    }

     // parent node
     if  (smn.ParentNode  !=   null )
    {
         if  (smn.ParentNode.Title.Contains( " <u> " ))
        {
            SiteMapNode gpn  =  smn.ParentNode;
            smn.ParentNode.Title  =  smn.ParentNode.Title.Replace(
               " <u> " ,  "" ).Replace( " </u> " ,  "" );
            smn  =  ReplaceNodeText(gpn);
        }
    }
     return  smn;
}

    

     在移动设备上，悬停菜单似乎无法显示。为了解决这个问题，我使用一个TreeView控件并设置其Visible属性为false。默认情况下，这个控件展开它所有的节点的。这将需要对上述问题进行处理。如果请求浏览是一个移动设备，在后台代码中，隐藏的菜单控件和显示TreeView控件。

protected   void  Page_Load( object  sender, EventArgs e)
{
     if  (Request.Browser.IsMobileDevice)
    {
        NavigationMenu.Visible  =   false ;
        NavigationTreeView.Visible  =   true ;
    }
}

     当我在IE 8中测试菜单时，悬停菜单也没有正确呈现。为了克服这个问题， 我们设置DynamicMenuStyle z-index 为200。子菜单在谷歌浏览器不能运行。经过一番研究，我找到了解决的办法。见下面。

代码
protected   void  Page_Load( object  sender, EventArgs e)
{
     if  (Request.UserAgent.IndexOf( " AppleWebKit " )  >   0 )
    {
        Request.Browser.Adapters.Clear();
        NavigationMenu.DynamicMenuStyle.Width  =  Unit.Pixel( 120 );
    }
}

     如果您发现任何错误或对内容有不同的意见，请给我留言，我会与你一起加以纠正。

效果：http://download.ysatech.com/ASP-NET-Menu-Control/

代码：/Files/zhuqil/MenuControl.zip

原文：http://www.codeproject.com/KB/webforms/Horizontal-Menu-Control.aspx

 



（全文完）

以下为广告部分

您部署的HTTPS网站安全吗？

如果您想看下您的网站HTTPS部署的是否安全，花1分钟时间来 myssl.com 检测以下吧。让您的HTTPS网站变得更安全！

SSL检测评估

快速了解HTTPS网站安全情况。

安全评级（A+、A、A-...）、行业合规检测、证书信息查看、证书链信息以及补完、服务器套件信息、证书兼容性检测等。

SSL证书工具

安装部署SSL证书变得更方便。

SSL证书内容查看、SSL证书格式转换、CSR在线生成、SSL私钥加解密、CAA检测等。

SSL漏洞检测

让服务器远离SSL证书漏洞侵扰

TLS ROBOT漏洞检测、心血漏洞检测、FREAK Attack漏洞检测、SSL Poodle漏洞检测、CCS注入漏洞检测。

转载于:https://www.cnblogs.com/zhuqil/archive/2009/12/22/1629492.html

diejia1113
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
asp.net menu 控件样式 范例横向
lcnmdfx的专栏
11-14 5524
AccessKey="string"     BackColor="color name|#dddddd"     BorderColor="color name|#dddddd"     BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|         Inset|Outset"     BorderWi
【Asp.Net 】【CSS】【HTML】导航条子菜单横向
Mr_Wanter
08-23 2061
示意图：（代码红色部分为主要。） &lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %&gt;   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
使用Asp.net菜单进行CSS格式化 横排菜单 源码
03-12
使用Asp.net菜单进行CSS格式化 横排菜单 源码
比较好看的导航菜单（ASP.NET)
10-24
一个不错的导航菜单,针对ASP.NET,使用了jQuery
MenuControl.rar_.net编程_ASP_
08-12
简单Menu控件源码几个星期前，开始了一个ASP.NET Web应用程序，需要一个简单的横向的带子菜单的Menu控件。将Menu控件拖拽到一个页面上时，我就决定使用ASP.NET的Menu控件。这个控件很简单，但该控件不提供访问的key...
ASP.NET基础及控件-----导航控件
03-27
Menu控件则更适合用于创建横向或竖向的下拉菜单，它可以自动生成基于站点地图的数据，也可以手动配置链接和子菜单。菜单项可以动态更新，适应用户权限的变化，使得用户界面更加友好且易于操作。 SiteMapPath控件则...
asp.net 控件重绘 加载自己的css
01-30
1. **CSSFriendly.sln** - 这是一个Visual Studio解决方案文件，可能包含了项目工程，用于实现CSS友好的ASP.NET控件。 2. **changes.txt** - 可能记录了项目中所做的改动和更新，供开发者参考。 3. **readme.txt** -...
ASP.NET 2.0快速入门(12)：ASP.NET 2.0网站快速导航
05-14
ASP.NET 2.0是微软开发的一个用于构建Web应用程序的框架，它在.NET Framework的基础上提供了丰富的功能和工具，使得开发者可以更加高效地构建动态、数据驱动的网站。在这个系列的第12部分，我们将深入探讨ASP.NET ...
ASP.NET常用代码
12-31
LogEvent("出现一个未知错误。"); } public AppException(string message) { LogEvent(message); } public AppException(string message,Exception innerException) { LogEvent(message); if (innerException != ...
【ASP.NET教程-WP教程03】ASP.NET Web Pages - 页面布局ASP.NET Web Pages 中的页面布局技术
最新发布
燃正科技
06-21 3386
页面布局是指定义和组织网页内容的方式。它决定了页面中元素的位置、大小和相对关系。好的页面布局可以提高用户体验、增强可读性，并使页面看起来更专业和吸引人。ASP.NET Web Pages 提供了强大的页面布局功能，使得创建具有一致性布局的多个页面变得轻松。您可以使用布局页、子页面和区域来定义和组织页面的结构和内容。通过合理利用这些技术，您可以创建出令人印象深刻、易于维护的 Web 应用程序。希望本博客对您理解 ASP.NET Web Pages 的页面布局有所帮助。祝您在开发过程中取得成功！
用javascript控制asp:menu跳转页面
chenhuizhouhb的专栏
05-28 3467
  最近用到了asp:Menu控件来写一个简单的web页面，想用javascript控制它翻页。用了一天的时间才想明白！太白痴了！首先asp.Menu的用法我就不多说了，贴出前台代码：                                                                                    对应"基本信息"的asp:MenuIte
ASP.NET控件之Menu控件
weixin_30375427的博客
06-29 476
利用 ASP.NET Menu 控件，可以开发 ASP.NET 网页的静态和动态显示菜单。 Menu 控件具有两种显示模式：静态模式和动态模式。静态显示意味着 Menu 控件始终是完全展开的。整个结构都是可视的，用户可以单击任何部位。在动态显示的菜单中，只有指定的部分是静态的，而只有用户将鼠标指针放置在父节点上时才会显示其子菜单项。 您可以在 Menu 控件中直接配置其内容，也可通过将该...
ASP.NET 设计导航栏（横向&竖向）
马克菠萝包ଲ的博客
03-18 3179
竖向导航栏 ①.aspx文件 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
ASP.Net中menu控件使用
热门推荐
梦想起飞的地方
05-22 1万+
为了使用方便asp.net中提供了两类控件html控件与用户控件。这里不在详细介绍。menu属于用户控件。 menu最重要的是item属性，item包含了menu控件要显示的类表，几级菜单神马的，点击item属性后面 出现一个对话框，也可以点menu控件的箭头如下图： 点击编辑菜单项也会弹出对话框，根据自己爱好可以进行设定，下面是我自己设定的： 当然旁边对应的是每个条目对应的属
Asp.net中动态Menu的实践
清雅小屋
10-05 4757
 在页界中添加MENU控件；
多级菜单的横向导航通过非递归方式实现
fisher的博客
08-02 1228
function createCateNav() { $nav = $cate_nav = array(); // 从数据库获取整张表 $tmp_cate_nav = getAllCategory(); if ($tmp_cate_nav) { foreach ($tmp_cate_nav as $v) { $cate_nav[$v['id']] = $v
ASP.NET编程精华：33种实用代码实例
1. **打开新窗口并传送参数**：此代码使用`window.open()`方法创建一个新的浏览器窗口，并将用户选择的选项（如DropDownList中的值）作为URL参数传递，以便在新窗口中处理特定数据。 2. **为按钮添加对话框**：这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值