• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NET 实践:自定义 SiteMapPath 控件的外观

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

通过设置控件的参数或者配置作用于控件的模板,可以对网站导航控件的可视外观进行自定义。应用于链接的模板和样式依照两个优先规则在 SiteMapPathRemarks 部分得到描述。

另外也可以将主题或控件皮肤应用于控件,或者开发符合特殊呈现需求的自定义网站导航控件。

SiteMapPath 控件显示一条导航路径(链接之间以特殊符号进行分隔),以链接的方式显示当前页面返回到主页的路径。在 ASP.NET 页面中,SiteMapPath 控件会的显示可能是这样:

Home > Services > Training

TreeViewMenu 控件也可以呈现网站地图数据,与 SiteMapPath 控件类似,它们可以像其他大部分 Web 控件一样进行自定义。本文将介绍如何使用 SiteMapPath 控件的下列自定义特征:

  • 指定显示在链接之间的分隔字符或图片。

  • 反转导航路径的方向。

  • 指定父链接的显示数目。

本文的所有步骤均假设已经创建网站地图文件和若干包含 SiteMapPath 控件的页面。

自定义链接的样式属性

  1. 在包含 SiteMapPath 控件的 ASP.NET Web 页面里,为控件添加下列属性:

    RootNodeStyle-Font-Names="Verdana"
    RootNodeStyle-ForeColor="Orange"
    RootNodeStyle-BorderWidth=2
    

    比如,用于 SiteMapPath 控件的代码可能是这样:

    <asp:SiteMapPath
      ID="SiteMapPath1"
      Runat="server" 
      SkipLinkText="Skip Menu"
      RootNodeStyle-Font-Names="Verdana"
      RootNodeStyle-ForeColor="Orange"
      RootNodeStyle-BorderWidth=2 >
    </asp:SiteMapPath>
    

    上例中使用的 StyleFontInfo 对象的大部分属性都是有效的,包括 CssClass 属性。

  2. 如果需要为每一个链接指定不同的样式内容,请重复前面的步骤并分别设置 SiteMapPath 控件的 ParentNodeStyleCurrentNodeStyle,以及 PathSeperatorStyle 属性。

    提示:为了改进性能,可以使用 NodeTemplate 对象一次性完成所有样式的自定义。

自定义显示在链接之间的分隔字符

  • 在包含 SiteMapPath 控件的 ASP.NET Web 页面中,为控件添加 PathSeparator 属性。

    比如,用于 SiteMapPath 控件的代码可能是这样:

    <asp:SiteMapPath
      ID="SiteMapPath1"
      Runat="server" 
      PathSeparator=" :: ">
    </asp:SiteMapPath>
    

    现在的 SiteMapPath 控件的显示可能是这样:

    Home :: Services :: Training
    

    可以使用任意字符串来分隔链接,甚至可以使用图片,请参考下列步骤。

指定显示在链接之间的图片

  • 在包含 SiteMapPath 控件的 ASP.NET Web 页面中,为控件添加下列代码:

    <PathSeparatorTemplate>
      <asp:Image
        ID="Image1"
        Runat="Server" 
        Width="20" 
        ImageUrl="Images/PathSeparatorImage.jpg" />
      </PathSeparatorTemplate>
    </PathSeparatorTemplate>
    

    比如,用于 SiteMapPath 控件的代码可能是这样:

    <asp:SiteMapPath
      ID="SiteMapPath1"
      Runat="server" >
      <PathSeparatorTemplate>
        <asp:Image
          ID="Image1"
          Runat="Server" 
          Width="20" 
          ImageUrl="Images/PathSeparatorImage.jpg" />
        </PathSeparatorTemplate>
      </PathSeparatorTemplate>
    </asp:SiteMapPath>
    

反转显示在 SiteMapPath 控件中的路径的方向

  • 在包含 SiteMapPath 控件的 ASP.NET Web 页面中,为控件添加 PathDirectionPathSeparator 属性。

    比如,用于 SiteMapPath 控件的代码可能是这样:

    <asp:SiteMapPath
      ID="SiteMapPath1"
      Runat="server"
      PathDirection="CurrentToRoot"
      PathSeparator=" <-- " >
    </asp:SiteMapPath>
    

限制父链接显示的数目

  • 在包含 SiteMapPath 控件的 ASP.NET Web 页面中,为控件添加 ParentLevelsDisplayed 属性。

    比如,用于 SiteMapPath 控件并最多只显示两个父链接的代码可能是这样:

    <asp:SiteMapPath
      ID="SiteMapPath1"
      Runat="server"
      ParentLevelsDisplayed="2" >
    </asp:SiteMapPath>
    

可访问性

网站导航控件通常在网站的每一个页面中都被使用。屏幕阅读器和其他辅助设备会在每次访问页面以及每次回传页面时大声地读出导航控件中的文本内容。

包括 SiteMapPathTreeView,及 Menu 在内的网站导航控件都有 SkipLinkText 属性,允许复述信息被连续页面访问或重复页面访问时能够被跳过。

使用可访问性遗漏特征
  • 在包含导航控件的 ASP.NET Web 页面中,为控件添加下列属性:

    SkipLinkText="Skipped Menu"
    

    比如,用于 SiteMapPath 控件的代码可能是这样:

    <asp:SiteMapPath
      ID="SiteMapPath1" 
      Runat="server" 
      SkipLinkText="Skip Breadcrumb">
    </asp:SiteMapPath>
    

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Asp.NetMVC+BootStrap+EF6.0实现简单的用户角色权限管理2发布时间:2022-07-10
下一篇:
Asp.net多层架构中的变量引用与传递发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap