Navigation

Definierad i Dynamix.Content5.Controls

Navigation är den grundläggande kontrollen för sidnavigationer. Som standard ritar den ut en nästlad ul-li-struktur med de sidor (och andra navigationsobjekt, se avancerad webbplatsnavigation) som omger den just nu visade sidan (eller navigationsobjektet).

Kontrollen inkluderas i en sida (ofta en master page) med

  1. <dx5c:Navigation ID="Navigation1" runat="server" />

I grundutförande ritar kontrollen ut markup enligt:

  1. <div id="Navigation1" class="dxNavigation">
  2. <ul class="dxNavigationLevel dxNavigationLevel0">
  3. <li class="dxNavigationItem"><a href="...">Sida 1</a></li>
  4. <li class="dxNavigationItem"><a href="...">Sida 2</a></li>
  5. <li class="dxNavigationItem dxNavigationItemInPath">
  6. <a href="...">Sida 3</a>
  7. <ul class="dxNavigationLevel dxNavigationLevel1">
  8. <li class="dxNavigationItem"><a href="...">Sida 3.1</a></li>
  9. <li class="dxNavigationItem"><a href="...">Sida 3.2</a></li>
  10. </ul>
  11. </li>
  12. <li class="dxNavigationItem"><a href="...">Logga in</a></li>
  13. </ul>
  14. </div>

Ovan antas att vi just nu befinner oss på sidan "Sida 3" som ligger på toppnivån.

Vilka sidor tas med?

Normalt inkluderas alla sidor från toppnivån ner till den aktiva sidan och en nivå nedanför. För att kontrollera var trädet ska börja kan egenskapen StartLevel användas:

  1. <dx5c:Navigation ID="Navigation1" runat="server" StartLevel="1" />

Markupen i detta fall blir:

  1. <div id="Navigation1" class="dxNavigation">
  2. <ul class="dxNavigationLevel dxNavigationLevel0">
  3. <li class="dxNavigationItem"><a href="...">Sida 3.1</a></li>
  4. <li class="dxNavigationItem"><a href="...">Sida 3.2</a></li>
  5. </ul>
  6. </div>

Nedåt i trädet kan nivån begränsas med egenskapen MaxLevel (ärvd från TreeView).

  1. <dx5c:Navigation ID="Navigation1" runat="server" StartLevel="0" MaxLevel="0" />

Med denna inställning kommer endast toppnivån att inkluderas

  1. <div id="Navigation1" class="dxNavigation">
  2. <ul class="dxNavigationLevel dxNavigationLevel0">
  3. <li class="dxNavigationItem"><a href="...">Sida 1</a></li>
  4. <li class="dxNavigationItem"><a href="...">Sida 2</a></li>
  5. <li class="dxNavigationItem dxNavigationItemInPath">
  6. <a href="...">Sida 3</a>
  7. </li>
  8. <li class="dxNavigationItem"><a href="...">Logga in</a></li>
  9. </ul>
  10. </div>

Css-klasser och taggar

Alla kontroller, taggar och css-klasser kan påverkas enligt beskrivningen för basklassen TreeView. För Navigation-kontrollen tillkommer/ändras:

  • InPathItemCssClass - Anger en css-klass som ska läggas till på noder i aktuell sidas sökväg.
    Standard är "[CssClass]ItemInPath"

  • CssClass (ärvd från WebControl) - Anger yttersta nivåns css-klass och används som grund för nyckeln [CssClass] (se nedan).
    Standardvärde: "dxNavigation"