Developer reference The XUL Components Components Tabbox

From Documentation

Jump to: navigation, search

Contents

Tabbox

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.

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.


Image:tabbox.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>


Class Name

org.zkoss.zul.Tabbox

Supported Child Components

[#Tabs Tabs], [#Tabpanels Tabpanels]

Supported Events

Event Name
Event Type
onRightClick
 [#MouseEvent org.zkoss.zk.ui.event.MouseEvent]

Description:

Denotes user has right-clicked the component.

onSelect
 [#SelectEvent org.zkoss.zk.ui.event.SelectEvent]

Description:

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

Properties

Property
Description
Data Type
Default Value
orient
 Sets the orient.

Values : horizontal|vertical

String
horizontal
panelSpacing
 Sets the spacing between Tabpanel. This is used by certain molds, such as accordion.
String
<null>
selectedIndex
 Sets the selected index.
int
0
selectedPanel
 Sets the selected tabpanel
Tabpanel
<null>
selectedTab
 Sets the selected tab
Tab
<null>

Methods

Name
Description
Data Type
Values
getTabLook Returns the look of the Tab and Tabbox.
String
getTabpanels Returns the tabpanels that this tabbox owns.
Tabpanels
getTabs Returns the tabs that this tabbox owns.
Tabs

Inherited From

Inherited From
[#XulElement org.zkoss.zul.imp.XulElement]
[#HtmlBasedComponent org.zkoss.zk.ui.HtmlBasedComponent]
[#AbstractComponent org.zkoss.zk.ui.AbstractComponent ]

See Also

From forum

Loading new tabs of the same type - id conflict
Retrieved from "http://docs.zkoss.org/wiki/Developer_reference_The_XUL_Components_Components_Tabbox"