Tabpanel"

From Documentation
Line 3: Line 3:
 
= Tabpanel =
 
= Tabpanel =
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#l10 Tabpanel]
+
*Demonstration: [http://www.zkoss.org/zkdemo/tabbox Tabbox]
 
*Java API: <javadoc>org.zkoss.zul.Tabpanel</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Tabpanel</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.tab.Tabpanel</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.tab.Tabpanel</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Tabbox | Tabbox]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
Line 41: Line 42:
 
</source>
 
</source>
  
=Supported events=
+
=Supported Events=
  
 
{| border="1" | width="100%"
 
{| border="1" | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 
|-
 
| <center><tt>onClick</tt></center>
 
| <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>
 
 
'''Description: '''
 
 
Denotes user has clicked the component.
 
 
|-
 
| <center><tt>onRightClick</tt></center>
 
| <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>
 
 
'''Description: '''
 
 
Denotes user has right-clicked the component.
 
 
 
|-
 
|-
| <center><tt>onDoubleClick</tt></center>
+
| None
| <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>
+
| None
 
 
'''Description: '''
 
 
 
Denotes user has double-clicked the component.
 
 
 
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
  
 
=Supported Children=
 
=Supported Children=
Line 77: Line 57:
 
  *ALL
 
  *ALL
  
=Use cases=
+
=Use Cases=
  
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
Line 92: Line 72:
  
 
See also:
 
See also:
[[ZK_Component_Reference/Containers/Tabbox#Use_cases | Tabbox]]
+
[[ZK_Component_Reference/Containers/Tabbox#Use_Cases | Tabbox]]
  
 
=Version History=
 
=Version History=

Revision as of 10:21, 11 November 2010

Tabpanel

Employment/Purpose

A tabpanel is the body of a single tab panel. You would place the content for a group of components within a tab panel. The first tabpanel corresponds to the first tab, the second tabpanel corresponds to the second tab and so on.

Example

ZKComRef Containers Tabs.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>

Supported Events

Name
Event Type
None None

Supported Children

*ALL

Use Cases

Version Description Example Location
3.6 How to put a scrollbar inside a tabpanel http://www.zkoss.org/forum/listComment/9889
3.6 How to make a tabpanel loaded on demand http://www.zkoss.org/forum/listComment/6236

See also: Tabbox

Version History

Version Date Content
     



Last Update : 2010/11/11

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