Cardlayout

Cardlayout

• Demonstration: N/A
• Java API: Cardlayout
• JavaScript API: Cardlayout
• Style Guide: N/A
• Available for ZK:
• 

Employment/Purpose

Cardlayout is a layout that allow end-user change component like change card. Developer can put all kind

Example

	<cardlayout id="card" width="300px" height="200px" style="border:1px solid red" selectedIndex="1">
		<window title="Window Component" border="normal" width="250px">content...</window>
		<listbox>
			<listhead sizable="true">
				<listheader label="name" sort="auto" />
				<listheader label="gender" sort="auto" />
			</listhead>
			<listitem>
				<listcell label="Mary" />
				<listcell label="FEMALE" />
			</listitem>
			<listitem>
				<listcell label="John" />
				<listcell label="MALE" />
			</listitem>
			<listfoot>
				<listfooter>
					<label value="This is footer1" />
				</listfooter>
				<listfooter>
					<label value="This is footer2" />
				</listfooter>
			</listfoot>
		</listbox>		
		<div vflex="1" hflex="1" style="background-color:yellow;padding:20px">flex component</div>
	</cardlayout>
	<hlayout>
		<button onClick="card.previous()">previous</button>
		<button onClick="card.next()">next</button>
		<button onClick='card.setOrient("horizontal".equals(card.getOrient()) ? "vertical" : "horizontal")'>change orient</button>
	</hlayout>

=

Supported Events

Name	Event Type
None	None

• Inherited Supported Events: XulElement

Supported Children

*ALL

Use Cases

Version	Description	Example Location

Version History

Version	Date	Content
6.5.0	August, 2012	Cardlayout was introduced.