Cardlayout"

From Documentation
Line 47: Line 47:
 
</hlayout>
 
</hlayout>
 
</source>
 
</source>
 
=Orient=
 
There are two
 
  
 
=Supported Events=
 
=Supported Events=

Revision as of 07:24, 14 August 2012

Cardlayout

  • Demonstration: N/A
  • Java API: Cardlayout
  • JavaScript API: Cardlayout
  • Style Guide: N/A
    • Available for ZK:
    • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion pe-ee.png

    Employment/Purpose

    Cardlayout is a layout that allow end-user change component like change card. The selectedIndex will decide which component will be shown. When selectedIndex value change or call next(), previous(), will animate between componet transform. The orient attribute decide animation way is horizontal or vertical.

    Example

    ZKComRef Cardlayout Example.png

    	<cardlayout id="card" width="300px" height="200px" style="border:1px solid red" selectedIndex="1">
    		<div vflex="1" hflex="1" style="background-color:yellow;padding:20px">flex component</div>
    		<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>
    		<window title="Window Component" border="normal" width="250px">content...</window>
    	</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

    Supported Children

    *ALL
    

    Use Cases

    Version Description Example Location
         

    Version History

    Last Update : 2012/08/14


    Version Date Content
    6.5.0 August, 2012 Cardlayout was introduced.



    Last Update : 2012/08/14

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