Anchornav"

From Documentation
Line 17: Line 17:
 
<source lang="xml" >
 
<source lang="xml" >
 
<zk xmlns:ca="client/attribute">
 
<zk xmlns:ca="client/attribute">
   <anchornav name="a1">
+
   <anchornav name="a1" width="250px">
    <a ca:data-anchornav-target="$win1"> First Window </a>
+
        <listbox>
    <a ca:data-anchornav-target="$win2"> Second Window </a>
+
            <listitem><listcell><a ca:data-anchornav-target="$win1"> First Window </a></listcell></listitem>
  </anchornav>
+
            <listitem><listcell><a ca:data-anchornav-target="$win2"> Second Window </a></listcell></listitem>
 +
            <listitem><listcell><a ca:data-anchornav-target="$win3"> Third Window </a></listcell></listitem>
 +
        </listbox>
 +
    </anchornav>
 
   <window id="win1" title="1. First Window">
 
   <window id="win1" title="1. First Window">
 
     Hello world.
 
     Hello world.
Line 31: Line 34:
  
 
By default, the Anchornav component will watch the scroll position of a page.
 
By default, the Anchornav component will watch the scroll position of a page.
Other scrollable containers can be associated with a named Anchornav by setting the client-attribute:
+
Other scrollable containers can be associated with a named Anchornav by setting the client-attribute: ca:data-anchornav-scroll.
ca:data-anchornav-scroll.
 
  
 
For example:
 
For example:

Revision as of 00:21, 21 October 2019

Anchornav

Employment/Purpose

This component synchronizes the scrolling position on a page or within ZK containers (Div, Window, etc.) with hyperlinks and buttons. It allows you both to navigate to desired ZK components in a page and highlight the current navigation link based on the current scroll position.

Example

ZKComRef Anchornav.png

<zk xmlns:ca="client/attribute">
  <anchornav name="a1" width="250px">
        <listbox>
            <listitem><listcell><a ca:data-anchornav-target="$win1"> First Window </a></listcell></listitem>
            <listitem><listcell><a ca:data-anchornav-target="$win2"> Second Window </a></listcell></listitem>
            <listitem><listcell><a ca:data-anchornav-target="$win3"> Third Window </a></listcell></listitem>
        </listbox>
    </anchornav>
  <window id="win1" title="1. First Window">
    Hello world.
  </window>
  <window id="win2" title="2. Second Window">
    Welcome to ZK world.
  </window>
</zk>

By default, the Anchornav component will watch the scroll position of a page. Other scrollable containers can be associated with a named Anchornav by setting the client-attribute: ca:data-anchornav-scroll.

For example:

<div ca:data-anchornav-scroll="a1">
     <!-- other components -->
</div>

A or Button components can be used as links and targets are specified by the ZK client-attribute ca:data-anchornav-target=[selector]. For example, in Line 3 and Line 4, $win1 / $win2 select widgets by zk component id, win1 / win2.

The JQuery-based selector syntax (#domId / .class / elementName) is extended by ZK specific selectors as seen above using $componentId or @componentName.

Properties

Name

Set the name of Anchornav, it is only required when we want to spy scrolling in ZK containers instead of the whole page scrollbar.

PositionFixed

Set whether to enable position fixed when anchornav is out of current view. When it is set to true, Anchornav will stay (float) on the same position of the page. (Default: true)

Supported Events

Supported Children

* Nav,  Navitem, Navseparator

Use Cases

Version Description Example Location
     

Version History

Last Update : 2019/10/21


Version Date Content
7.0.0 August, 2013 Nav was introduced.



Last Update : 2019/10/21

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.