Tabbox"

From Documentation
m (correct highlight (via JWB))
(38 intermediate revisions by 8 users not shown)
Line 3: Line 3:
 
= Tabbox =
 
= Tabbox =
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#l10 Tabbox]
+
*Demonstration: [http://www.zkoss.org/zkdemo/tabbox Tabbox]
 
*Java API: <javadoc>org.zkoss.zul.Tabbox</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Tabbox</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.tab.Tabbox</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.tab.Tabbox</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Tabbox | Tabbox]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
  
A tabbox that contains the tabs and tabpanels allows developers to separate a large number of components into several groups(each group contains a tab and a tabpanel), and show one group each time, such that the user interface won't be too complicate to read. There is only one group (aka., a tabpanel) is visible at the same time. Once the tab of an invisible group is clicked, it becomes visible and the previous visible group becomes invisible.
+
A tabbox is a container used to display a set of tabbed groups of components. A row of tabs is displayed at the top (or left or other location) of tabbox which may be used to switch between each group. It allows developers to separate a large number of components into several groups (each group is contained in [[ZK Component Reference/Containers/Tabbox/Tabpanel|a tabpanel]]). Only one group is visible at the time, such that the user interface won't be too complicate to read. Once [[ZK Component Reference/Containers/Tabbox/Tab|the tab]] of an invisible group is clicked, it becomes visible and the previous visible group becomes invisible.
 
 
The currently selected tab component is given an additional selected property which is set to true. This is used to give the currently selected tab a different appearance so that it will look selected. Only one tab will have a true value for this property at a time. If none of tabs are selected, the first one is selected automatically.
 
 
 
 
 
  
 +
The visible group is called ''selected'', which can be retrieved by use of <javadoc method="getSelectedPanel()">org.zkoss.zul.Tabbox</javadoc> or <javadoc method="getSelectedIndex()">org.zkoss.zul.Tabbox</javadoc>.
  
 
= Example =
 
= Example =
Line 46: Line 44:
 
</source>
 
</source>
  
=Supported events=
+
=Properties and Features=
 +
==Toolbar in Tabbox==
 +
The Tabbox supports the inclusion of other controls within its tab bar, thus allowing more freedom and layout options when creating layouts which include a [[ZK Component Reference/Essential Components/Toolbar|toolbar]]. The screenshot below demonstrates an example Tabbox which includes extra controls in the tab bar acting like a menu system.
  
{| border="1" | width="100%"
+
Note: Toolbar in Tabbox only works in a horizontal(top/bottom) orient Tabbox.
 +
 
 +
[[Image:ZKComRef_Tabbox_Toolbar_Examples.png]]
 +
 
 +
<source lang="xml" highlight="9,10,11,12,13,14,15">
 +
<tabbox width="250px">
 +
<tabs>
 +
<tab label="Tab 1" closable="true" />
 +
<tab label="Tab 2" closable="true" />
 +
<tab label="Tab 3" closable="true" />
 +
<tab label="Tab 4" closable="true" />
 +
<tab label="Tab 5" closable="true" />
 +
</tabs>
 +
<toolbar>
 +
<toolbarbutton image="/img/live.gif" onClick='alert("Live")' />
 +
<toolbarbutton image="/img/defender.gif"
 +
onClick='alert("Defender")' />
 +
<toolbarbutton image="/img/battery.gif"
 +
onClick='alert("Battery")' />
 +
</toolbar>
 +
<tabpanels>
 +
<tabpanel>This is panel 1</tabpanel>
 +
<tabpanel>This is panel 2 The second panel</tabpanel>
 +
<tabpanel>This is panel 3</tabpanel>
 +
<tabpanel>This is panel 4</tabpanel>
 +
<tabpanel>This is panel 5</tabpanel>
 +
</tabpanels>
 +
</tabbox>
 +
</source>
 +
 
 +
==MaximalHeight==
 +
 
 +
    since 7.0.0
 +
In order to solve the problem where each tabpanel have different heights, we offer this feature called '''MaximalHeight'''. With this feature, every Tabpanel will be applied the maximum height among all the tabpanels i.e. if one tabpanel's height is at 300px while the rest is at 240px, all of the tabpanels will be applied with a height of 300px. This feature only works in the initial phase. The screenshot below demonstrates an example Tabbox which includes 3 tabpanels and all of them use the maximum height.
 +
 
 +
Note: The Client ROD feature will be disabled if it is set to true.
 +
 
 +
[[Image:tabbox_maximalHeight_0.png]][[Image:tabbox_maximalHeight_1.png]][[Image:tabbox_maximalHeight_2.png]]
 +
 
 +
<source lang="xml" highlight="1">
 +
<tabbox maximalHeight="true" width="300px">
 +
<tabs id="tabs0">
 +
<tab label="Tab1" />
 +
<tab label="Tab2" />
 +
<tab label="Tab3" />
 +
</tabs>
 +
<tabpanels id="pnls0">
 +
<tabpanel>
 +
<div>Tabpanel Content 1</div>
 +
<div>Tabpanel Content 1</div>
 +
<div>Tabpanel Content 1</div>
 +
</tabpanel>
 +
<tabpanel>
 +
<div>Tabpanel Content 2</div>
 +
<div>Tabpanel Content 2</div>
 +
</tabpanel>
 +
<tabpanel>
 +
<div>Tabpanel Content 3</div>
 +
<div>Tabpanel Content 3</div>
 +
<div>Tabpanel Content 3</div>
 +
<div>Tabpanel Content 3</div>
 +
</tabpanel>
 +
</tabpanels>
 +
</tabbox>
 +
</source>
 +
 
 +
=Supported Events=
 +
 
 +
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 +
|-
 +
| <center>onSelect</center>
 +
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.SelectEvent</javadoc>
 +
 +
 +
Denotes user has selected a tab. onSelect is sent to both tab and tabbox.
  
 +
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
 +
 +
=Supported Molds=
 +
Available molds of a component are defined in lang.xml embedded in zul.jar.
 +
{| class='wikitable' | width="100%"
 +
! <center>Name</center>
 +
! <center>Snapshot</center>
 
|-
 
|-
| <center>onRightClick</center>
+
| <center>default</center>
| '''Event:''' <javadoc>'org.zkoss.zk.ui.event.MouseEvent</javadoc>
+
|[[Image:tabbox_mold_default.png ]]
 +
|-
 +
| <center>accordion</center>
 +
|[[Image:tabbox_mold_accordion.png ]]
 +
|-
 +
| <center>accordion-lite</center>
 +
|[[Image:tabbox_mold_accordion-lite.png ]]
 +
|}
 +
 
  
Denotes user has right-clicked the component.
+
* accordion-lite mold is deprecated since 7.0.0
  
 +
=Supported Orients=
 +
{| class='wikitable' | width="100%"
 +
! <center>Name</center>
 +
! <center>Snapshot</center>
 
|-
 
|-
| <center>onSelect</center>
+
| <center>top</center>
| '''Event: '''<javadoc>org.zkoss.zk.ui.event.SelectEvent</javadoc>
+
|
 +
[[Image:tabbox_orient_top.png ]]
 +
 
 +
|-
 +
| <center>left</center>
 +
|
 +
[[Image:tabbox_orient_vertical.png ]]
  
 +
|-
 +
| <center>right</center>
 +
|
 +
[[Image:tabbox_orient_vertical-right.png ]]
  
Denotes user has selected a tab. onSelect is sent to both tab and tabbox.
+
|-
 +
| <center>bottom</center>
 +
|
 +
[[Image:tabbox_orient_bottom.png‎ ]]
  
 
|}
 
|}
 +
 
 +
 +
*  Rename orient "horizontal" to "top", "vertical" to "left" and add extra two orients named "bottom" and "right" since 7.0.0
  
 
=Supported Children=
 
=Supported Children=
  
  *Tabs, *Tabpanels
+
  *[[ZK_Component_Reference/Containers/Tabbox/Tabs | Tabs]], [[ZK_Component_Reference/Containers/Tabbox/Tabpanels | Tabpanels]], [[ZK Component Reference/Essential Components/Toolbar|Toolbar]]
  
=Use cases=
+
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 82: Line 192:
  
 
=Version History=
 
=Version History=
 
+
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| 5.0.2
+
| &nbsp;
| 4/22/2012
+
| &nbsp;
| Initialization
+
| &nbsp;
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Revision as of 07:52, 18 January 2022

Tabbox

Employment/Purpose

A tabbox is a container used to display a set of tabbed groups of components. A row of tabs is displayed at the top (or left or other location) of tabbox which may be used to switch between each group. It allows developers to separate a large number of components into several groups (each group is contained in a tabpanel). Only one group is visible at the time, such that the user interface won't be too complicate to read. Once the tab of an invisible group is clicked, it becomes visible and the previous visible group becomes invisible.

The visible group is called selected, which can be retrieved by use of Tabbox.getSelectedPanel() or Tabbox.getSelectedIndex().

Example

ZKComRef Tabbox Examples.PNG

<zk>
	<tabbox width="400px">
		<tabs>
			<tab label="Tab 1" />
			<tab label="Tab 2" />
		</tabs>
		<tabpanels>
			<tabpanel>This is panel 1</tabpanel>
			<tabpanel>This is panel 2</tabpanel>
		</tabpanels>
	</tabbox>
	<space />
	<tabbox width="400px" mold="accordion">
		<tabs>
			<tab label="Tab 3" />
			<tab label="Tab 4" />
		</tabs>
		<tabpanels>
			<tabpanel>This is panel 3</tabpanel>
			<tabpanel>This is panel 4</tabpanel>
		</tabpanels>
	</tabbox>
</zk>

Properties and Features

Toolbar in Tabbox

The Tabbox supports the inclusion of other controls within its tab bar, thus allowing more freedom and layout options when creating layouts which include a toolbar. The screenshot below demonstrates an example Tabbox which includes extra controls in the tab bar acting like a menu system.

Note: Toolbar in Tabbox only works in a horizontal(top/bottom) orient Tabbox.

ZKComRef Tabbox Toolbar Examples.png

<tabbox width="250px">
	<tabs>
		<tab label="Tab 1" closable="true" />
		<tab label="Tab 2" closable="true" />
		<tab label="Tab 3" closable="true" />
		<tab label="Tab 4" closable="true" />
		<tab label="Tab 5" closable="true" />
	</tabs>
	<toolbar>
		<toolbarbutton image="/img/live.gif" onClick='alert("Live")' />
		<toolbarbutton image="/img/defender.gif"
			onClick='alert("Defender")' />
		<toolbarbutton image="/img/battery.gif"
			onClick='alert("Battery")' />
	</toolbar>
	<tabpanels>
		<tabpanel>This is panel 1</tabpanel>
		<tabpanel>This is panel 2 The second panel</tabpanel>
		<tabpanel>This is panel 3</tabpanel>
		<tabpanel>This is panel 4</tabpanel>
		<tabpanel>This is panel 5</tabpanel>
	</tabpanels>
</tabbox>

MaximalHeight

   since 7.0.0

In order to solve the problem where each tabpanel have different heights, we offer this feature called MaximalHeight. With this feature, every Tabpanel will be applied the maximum height among all the tabpanels i.e. if one tabpanel's height is at 300px while the rest is at 240px, all of the tabpanels will be applied with a height of 300px. This feature only works in the initial phase. The screenshot below demonstrates an example Tabbox which includes 3 tabpanels and all of them use the maximum height.

Note: The Client ROD feature will be disabled if it is set to true.

Tabbox maximalHeight 0.pngTabbox maximalHeight 1.pngTabbox maximalHeight 2.png

<tabbox maximalHeight="true" width="300px">
	<tabs id="tabs0">
		<tab label="Tab1" />
		<tab label="Tab2" />
		<tab label="Tab3" />
	</tabs>
	<tabpanels id="pnls0">
		<tabpanel>
			<div>Tabpanel Content 1</div>
			<div>Tabpanel Content 1</div>
			<div>Tabpanel Content 1</div>
		</tabpanel>
		<tabpanel>
			<div>Tabpanel Content 2</div>
			<div>Tabpanel Content 2</div>
		</tabpanel>
		<tabpanel>
			<div>Tabpanel Content 3</div>
			<div>Tabpanel Content 3</div>
			<div>Tabpanel Content 3</div>
			<div>Tabpanel Content 3</div>
		</tabpanel>
	</tabpanels>
</tabbox>

Supported Events

Name
Event Type
onSelect
Event: SelectEvent


Denotes user has selected a tab. onSelect is sent to both tab and tabbox.

Supported Molds

Available molds of a component are defined in lang.xml embedded in zul.jar.

Name
Snapshot
default
Tabbox mold default.png
accordion
Tabbox mold accordion.png
accordion-lite
Tabbox mold accordion-lite.png


  • accordion-lite mold is deprecated since 7.0.0

Supported Orients

Name
Snapshot
top

Tabbox orient top.png

left

Tabbox orient vertical.png

right

Tabbox orient vertical-right.png

bottom

Tabbox orient bottom.png


  • Rename orient "horizontal" to "top", "vertical" to "left" and add extra two orients named "bottom" and "right" since 7.0.0

Supported Children

* Tabs,  Tabpanels, Toolbar

Use Cases

Version Description Example Location
5.0 Tabbox can be used to display information on seperate panels and show only one panel a time. http://www.zkoss.org/zkdemo/userguide/#l10

Version History

Last Update : 2022/01/18


Version Date Content
     



Last Update : 2022/01/18

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