Customize the appearance of sitemappath styles

<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;}

Of course, you can also refer to the following code to do this. I personally think it is quite troublesome.

By setting control parameters or configuring the template that acts on the control, you can customize the visual appearance of the website navigation control. The template and style applied to the link follow the two priority rules inSiteMapPathOfRemarksThis section is described.

In addition, you can apply themes or control skins to controls, or develop custom website navigation controls that meet special rendering requirements.

SiteMapPathControls display a navigation path (separated by special characters), and displays the path of the current page returned to the home page by link. On the ASP. NET page,SiteMapPathThe display of the control may be as follows:

Home> services> Training

TreeViewAndMenuThe widget can also display website map dataSiteMapPathControls are similar. They can be customized like most other Web controls. This article describes how to useSiteMapPathThe following custom features of a widget:

• Specifies the delimiter or image displayed between links.

• Returns the direction of the navigation path.

• Specify the number of parent links displayed.

All the steps in this document assume that you have created a website map file and containSiteMapPathControl page.

Custom link style attributes

1. In the includeSiteMapPathAdd the following attributes to the control on the ASP. NET web page of the control:

   Rootnodestyle-font-names = "verdana" rootnodestyle-forecolor = "orange" rootnodestyle-borderwidth = 2

   For exampleSiteMapPathThe control code may be as follows:

   <Asp: sitemappath id = "sitemappath1" runat = "server" skiplinktext = "Skip menu" rootnodestyle-font-names = "verdana" rootnodestyle-forecolor = "orange" rootnodestyle-borderwidth = 2> </ASP: sitemappath>

   TheStyleAndFontInfoMost attributes of an object are valid, includingCssClassAttribute.

2. If you need to specify different style content for each link, repeat the previous steps and setSiteMapPathControlParentNodeStyle,CurrentNodeStyle, AndPathSeperatorStyleAttribute.

   Tip: to improve performance, you can useNodeTemplateThe object can be customized for all styles at a time.

Custom delimiter characters displayed between links

• In the includeSiteMapPathAddPathSeparatorAttribute.

  For exampleSiteMapPathThe control code may be as follows:

  <Asp: sitemappath id = "sitemappath1" runat = "server" pathseparator = ":"> </ASP: sitemappath>

  The currentSiteMapPathThe display of the control may be as follows:

  Home: Services: Training

  You can use any string to separate links or even use images. Follow these steps.

Specify the image displayed between links

• In the includeSiteMapPathAdd the following code to the control on the ASP. NET web page of the control:

  <Pathseparatortemplate> <asp: Image id = "image1" runat = "server" width = "20" imageurl = "images/pathseparatorimage.jpg"/> </pathseparatortemplate>

  For exampleSiteMapPathThe control code may be as follows:

  <Asp: sitemappath id = "sitemappath1" runat = "server"> <pathseparatortemplate> <asp: image id = "image1" runat = "server" width = "20" imageurl = "images/pathseparatorimage.jpg"/> </pathseparatortemplate> </ASP: sitemappath>

Reverse display onSiteMapPathControl path direction

• In the includeSiteMapPathAddPathDirectionAndPathSeparatorAttribute.

  For exampleSiteMapPathThe control code may be as follows:

  <Asp: sitemappath id = "sitemappath1" runat = "server" pathdirection = "currenttoroot" pathseparator = "<--"> </ASP: sitemappath>

Limit the number of parent links displayed

• In the includeSiteMapPathAddParentLevelsDisplayedAttribute.

  For exampleSiteMapPathThe code that controls and displays up to two parent links may be as follows:

  <Asp: sitemappath id = "sitemappath1" runat = "server" parentlevelsdisplayed = "2"> </ASP: sitemappath>

Accessibility

The website navigation control is usually used on every page of the website. Screen readers and other auxiliary devices will read the text content in the navigation control loudly each time they access the page and each time they return the page.

IncludingSiteMapPath,TreeView, AndMenuAnd other website navigation controls.SkipLinkTextAttribute, which can be skipped when retelling information is accessed by consecutive pages or duplicate pages.

Use accessible missing features

• On the ASP. NET web page that contains the navigation control, add the following attributes to the control:

  Skiplinktext = "skipped menu"

  For exampleSiteMapPathThe control code may be as follows:

  <Asp: sitemappath id = "sitemappath1" runat = "server" skiplinktext = "Skip breadcrumb"> </ASP: sitemappath>