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

通过设置控件的参数或者配置作用于控件的模板,可以对网站导航控件的可视外观进行自定义。应用于链接的模板和样式依照两个优先规则在 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>
    

转载于:https://www.cnblogs.com/Laeb/archive/2006/12/10/588275.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值