现在的位置: 首页 > 综合 > 正文

自定义SiteMapPath样式外观

2012年06月21日 ⁄ 综合 ⁄ 共 3005字 ⁄ 字号 评论关闭
<asp:SiteMapPath ID="SiteMapPath1" runat="server" PathSeparator=" " ParentLevelsDisplayed="1">
                                <CurrentNodeStyle CssClass="LinkSJ" />
                                <NodeStyle CssClass="LinkSJ" />
                                <RootNodeStyle CssClass="LinkSJ" />
                            </asp:SiteMapPath>     
a.LinkSJ{ background:url(../Images/Cn/ClientSJ.gif) no-repeat 0px 2px; color:#FFFFFF; padding-left:20px; padding-right:20px;}
span.LinkSJ{ background:url(../Images/Cn/ClientSJ.gif) no-repeat 0px 2px ;color:#FFFFFF; padding-left:20px; padding-right:20px;}

当然你也可以参考下面的代码来做,个人觉得比较麻烦

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

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

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

Home > Services > Training

TreeView 和 Menu 控件也可以呈现网站地图数据,与 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>

    上例中使用的 Style 和 FontInfo 对象的大部分属性都是有效的,包括 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 页面中,为控件添加 PathDirection 和 PathSeparator 属性。

    比如,用于 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>

抱歉!评论已关闭.