Navitem"

From Documentation
m (correct highlight (via JWB))
 
(19 intermediate revisions by 4 users not shown)
Line 1: Line 1:
= Nav =
+
{{ZKComponentReferencePageHeader}}
 +
 
 +
= Navitem =
  
 
*Demonstration:  
 
*Demonstration:  
*Java API:  
+
*Java API: [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Navitem.html Navitem]
*JavaScript API:  
+
*JavaScript API: [http://www.zkoss.org/javadoc/latest/jsdoc/zkmax/nav/Navitem.html Navitem]
 
*Style Guide:
 
*Style Guide:
 
*{{ZK EE}}
 
*{{ZK EE}}
Line 12: Line 14:
  
 
= Example =
 
= Example =
 +
[[Image:ZKComRef_Nav.png]]
 +
 +
<source lang="xml" >
 +
<navbar orient="vertical" width="200px">
 +
<navitem label="Home" iconSclass="z-icon-home" />
 +
<nav label="Get Started" iconSclass="z-icon-th-list" badgeText="3">
 +
<navitem label="Step One" />
 +
<navitem label="Step Two" />
 +
<navitem label="Step Three" />
 +
</nav>
 +
<navitem label="About" iconSclass="z-icon-flag" />
 +
<navitem label="Contact" iconSclass="z-icon-envelope"/>
 +
</navbar>
 +
</source>
  
 
= Properties =
 
= Properties =
 +
 +
== Href ==
 +
In addition to handling the onClick event, you could specify the URL in the href property (<javadoc method="setHref(java.lang.String)">org.zkoss.zkmax.zul.Navitem</javadoc>), such that the browser will navigate to the URL you specified directly (without sending back any request to the server).  If you prefer to visit the URL in another browser window, you could specify the name in <javadoc method="setTarget(java.lang.String)">org.zkoss.zkmax.zul.Navitem</javadoc> (just like using a HTML A tag).
 +
 +
Notice that the end user could hold the <code>Control</code> key and click on the navitem to visit the link in a new browser window (like a HTML A tag does).
 +
 +
=== Href and the onClick Event ===
 +
There are two ways to add behavior to a <code>navitem</code>. Firstly, you can specify a listener for the <code>onClick</code> event. Secondly, you could specify a URL for the <code>href</code> property (<javadoc method="setHref(java.lang.String)">org.zkoss.zkmax.zul.Navitem</javadoc>). If both are specified, the <code>href</code> property has the higher priority, i.e., the onClick event won't be sent.
 +
 +
<source lang="xml" >
 +
<navbar>
 +
<navitem label="click me" onClick="do_something_in_Java()"/>
 +
<navitem label="don't click that one, click me" href="/another_page.zul"/>
 +
</navbar>
 +
</source>
 +
 +
=== Href and SendRedirect  ===
 +
The href property is processed at the client. In other words, the browser will jump to the URL specified in the <code>href</code> property, so your application running on the server has no chance to process it.
 +
 +
If you have to process it on the server or you have to decide whether to jump to another URL based on certain condition, you could listen to the onClick event, process it, and then invoke <javadoc method="sendRedirect(java.lang.String)">org.zkoss.zk.ui.Executions</javadoc> if it jumps to another URL.
 +
 +
For end users, there is no difference between the use of <javadoc method="setHref(java.lang.String)">org.zkoss.zkmax.zul.Navitem</javadoc> and <javadoc method="sendRedirect(java.lang.String)">org.zkoss.zk.ui.Executions</javadoc>.
 +
 +
<source lang="xml" >
 +
<navbar>
 +
<navitem label="redirect" onClick="Executions.sendRedirect(&quot;another.zul&quot;)"/>
 +
<navitem label="href" href="another.zul"/>
 +
</navbar>
 +
</source>
 +
 +
Since the onClick event is sent to the server for processing, you are able to perform additional tasks before invoking <javadoc method="sendRedirect(java.lang.String)">org.zkoss.zk.ui.Executions</javadoc>, such as redirecting to another page only if certain conditions are satisfied.
 +
 +
On the other hand, the <code>href</code> property is processed at the client side. Your application won't be notified when users click the navitem.
 +
 +
== Badge Text ==
 +
{{versionSince| 9.6.0}}
 +
 +
This property set the badge text for the <code>Navitem</code>, it is used to present more details of <code>Navitem</code>.
 +
<source lang="xml" highlight="1">
 +
<navitem label="Step One" badgeText="1"/>
 +
</source>
  
 
= Supported Events =
 
= Supported Events =
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
Line 32: Line 89:
 
= Use Cases =
 
= Use Cases =
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 43: Line 100:
  
 
{{LastUpdated}}
 
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| None
+
| 7.0.0
| None
+
| August, 2013
 +
| [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Navitem.html Navitem] was introduced.
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 09:22, 18 January 2022

Navitem

  • Demonstration:
  • Java API: Navitem
  • JavaScript API: Navitem
  • Style Guide:
    • Available for ZK:
    • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

    Employment/Purpose

    A single choice in a Navbar or Nav element. It acts much like a button but it is rendered on a navbar.

    Example

    ZKComRef Nav.png

    <navbar orient="vertical" width="200px">
    	<navitem label="Home" iconSclass="z-icon-home" />
    	<nav label="Get Started" iconSclass="z-icon-th-list" badgeText="3">
    		<navitem label="Step One" />
    		<navitem label="Step Two" />
    		<navitem label="Step Three" />
    	</nav>
    	<navitem label="About" iconSclass="z-icon-flag" />
    	<navitem label="Contact" iconSclass="z-icon-envelope"/>
    </navbar>
    

    Properties

    Href

    In addition to handling the onClick event, you could specify the URL in the href property (Navitem.setHref(String)), such that the browser will navigate to the URL you specified directly (without sending back any request to the server). If you prefer to visit the URL in another browser window, you could specify the name in Navitem.setTarget(String) (just like using a HTML A tag).

    Notice that the end user could hold the Control key and click on the navitem to visit the link in a new browser window (like a HTML A tag does).

    Href and the onClick Event

    There are two ways to add behavior to a navitem. Firstly, you can specify a listener for the onClick event. Secondly, you could specify a URL for the href property (Navitem.setHref(String)). If both are specified, the href property has the higher priority, i.e., the onClick event won't be sent.

    <navbar>
    	<navitem label="click me" onClick="do_something_in_Java()"/>
    	<navitem label="don't click that one, click me" href="/another_page.zul"/>
    </navbar>
    

    Href and SendRedirect

    The href property is processed at the client. In other words, the browser will jump to the URL specified in the href property, so your application running on the server has no chance to process it.

    If you have to process it on the server or you have to decide whether to jump to another URL based on certain condition, you could listen to the onClick event, process it, and then invoke Executions.sendRedirect(String) if it jumps to another URL.

    For end users, there is no difference between the use of Navitem.setHref(String) and Executions.sendRedirect(String).

    <navbar>		
    	<navitem label="redirect" onClick="Executions.sendRedirect(&quot;another.zul&quot;)"/>
    	<navitem label="href" href="another.zul"/>
    </navbar>
    

    Since the onClick event is sent to the server for processing, you are able to perform additional tasks before invoking Executions.sendRedirect(String), such as redirecting to another page only if certain conditions are satisfied.

    On the other hand, the href property is processed at the client side. Your application won't be notified when users click the navitem.

    Badge Text

    Since 9.6.0

    This property set the badge text for the Navitem, it is used to present more details of Navitem.

    	<navitem label="Step One" badgeText="1"/>
    

    Supported Events

    Name
    Event Type
       

    Supported Children

    *NONE
    

    Use Cases

    Version Description Example Location
         

    Version History

    Last Update : 2022/01/18


    Version Date Content
    7.0.0 August, 2013 Navitem was introduced.



    Last Update : 2022/01/18

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