Navbar"

From Documentation
 
(16 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
{{ZKComponentReferencePageHeader}}
 +
 
= Navbar =
 
= Navbar =
  
 
*Demonstration:  
 
*Demonstration:  
−
*Java API: [http://www.zkoss.org/javadoc/7.0.0-Preview/zk/org/zkoss/zkmax/zul/Navbar.html Navbar]  
+
*Java API: [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Navbar.html Navbar]  
−
*JavaScript API: [http://www.zkoss.org/javadoc/7.0.0-Preview/jsdoc/zkmax/nav/Navbar.html Navbar]
+
*JavaScript API: [http://www.zkoss.org/javadoc/latest/jsdoc/zkmax/nav/Navbar.html Navbar]
 
*Style Guide:
 
*Style Guide:
 
*{{ZK EE}}
 
*{{ZK EE}}
Line 30: Line 32:
  
 
== Orient ==
 
== Orient ==
−
A <tt>navbar</tt> could be placed in a vertical or horizontal orientation, the <tt>orient</tt> attribute decides.
+
A <code>navbar</code> could be placed in a vertical or horizontal orientation, the <code>orient</code> attribute decides.
−
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Orient</center>
 
! <center>Orient</center>
 
! <center>Snapshot</center>
 
! <center>Snapshot</center>
Line 41: Line 43:
 
|[[Image:ZKComRef_Nav.png]]
 
|[[Image:ZKComRef_Nav.png]]
 
|}
 
|}
 +
 +
== Collapsed ==
 +
A <code>navbar</code> can be collapsed, the <code>collapsed</code> attribute decides.
 +
{| class='wikitable' | width="100%"
 +
! <center>Collapsed</center>
 +
! <center>Orient</center>
 +
! <center>Snapshot</center>
 +
|-
 +
| <center>true</center>
 +
| <center>horizontal</center>
 +
|[[Image:ZKComRef_Nav_Hor_Cld.png]]
 +
|-
 +
| <center>false</center>
 +
| <center>horizontal</center>
 +
|[[Image:ZKComRef_Nav_Hor_No.png]]
 +
|-
 +
| <center>true</center>
 +
| <center>vertical</center>
 +
|[[Image:ZKComRef_Nav_Ver_Cld.png]]
 +
|-
 +
| <center>false</center>
 +
| <center>vertical</center>
 +
|[[Image:ZKComRef_Nav_Ver_No.png]]
 +
|}
 +
== Autoclose ==
 +
{{versionSince| 8.0.4}}
 +
By default only a single <code>nav</code>-element is open at any time - automatically closing other <code>nav</code>-elements which are not on the current open path.
 +
This behavior can be disabled setting <code>autoclose="false"</code>, which keeps nav elements open until they are clicked again by the user.
 +
 +
<source lang="xml" highlight="1">
 +
<navbar orient="vertical" autoclose="false">
 +
<nav label="nav 1">
 +
<navitem label="nav 1.1"/>
 +
<navitem label="nav 1.2"/>
 +
</nav>
 +
<nav label="nav 2">
 +
<navitem label="nav 2.1"/>
 +
<navitem label="nav 2.2"/>
 +
</nav>
 +
</navbar>
 +
</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>
 
|-
 
|-
−
| <center><tt>onSelect</tt></center>
+
| <center><code>onSelect</code></center>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.SelectEvent</javadoc>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.SelectEvent</javadoc>
 
Notifies one that the user has selected a navitem in the navbar.
 
Notifies one that the user has selected a navitem in the navbar.
Line 56: Line 99:
 
= Supported Children =
 
= Supported Children =
  
−
  *[[ZK Component Reference/Essential Components/Nav | Nav]], [[ZK Component Reference/Essential Components/Nav/Navitem  | Navitem]]
+
  *[[ZK Component Reference/Essential Components/Nav | Nav]], [[ZK Component Reference/Essential Components/Nav/Navitem  | Navitem]],[[ZK_Component_Reference/Essential_Components/Nav/Navseparator  | Navseparator]]
  
 
= Use Cases =
 
= Use Cases =
  
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 71: Line 114:
  
 
{{LastUpdated}}
 
{{LastUpdated}}
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
 
| 7.0.0
 
| 7.0.0
 
| August, 2013
 
| August, 2013
−
| <javadoc>org.zkoss.zkmax.nav.Navbar</javadoc> was introduced.
+
| [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Navbar.html Navbar] was introduced.
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 08:30, 8 July 2022


DocumentationZK Component ReferenceEssential ComponentsNavNavbar
Navbar

Navbar

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

    Employment/Purpose

    Provide a roadmap to help user navigate through website. It's a container that usually contains nav elements.

    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

    Orient

    A navbar could be placed in a vertical or horizontal orientation, the orient attribute decides.

    Orient
    Snapshot
    horizontal
    		 ZKComRef Nav hor.png
    vertical
    		 ZKComRef Nav.png

    Collapsed

    A navbar can be collapsed, the collapsed attribute decides.

    Collapsed
    Orient
    Snapshot
    true
    horizontal
    		 ZKComRef Nav Hor Cld.png
    false
    horizontal
    		 ZKComRef Nav Hor No.png
    true
    vertical
    		 ZKComRef Nav Ver Cld.png
    false
    vertical
    		 ZKComRef Nav Ver No.png

    Autoclose

    Since 8.0.4 By default only a single nav-element is open at any time - automatically closing other nav-elements which are not on the current open path. This behavior can be disabled setting autoclose="false", which keeps nav elements open until they are clicked again by the user. 

    	<navbar orient="vertical" autoclose="false">
		<nav label="nav 1">
			<navitem label="nav 1.1"/>
			<navitem label="nav 1.2"/>
		</nav>
		<nav label="nav 2">
			<navitem label="nav 2.1"/>
			<navitem label="nav 2.2"/>
		</nav>
	</navbar>

    Supported Events

    Name
    Event Type
    onSelect
    		 Event: SelectEvent

    Notifies one that the user has selected a navitem in the navbar.

    Supported Children

    * Nav,  Navitem, Navseparator

    Use Cases

    Version Description Example Location
         

    Version History

    Last Update : 2022/07/08


    Version Date Content
    7.0.0 August, 2013 Navbar was introduced.



    Last Update : 2022/07/08

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


    Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Essential_Components/Nav/Navbar&oldid=54891"