|
Processing... Click on the tab bar to show its content!
Description & Source Code
The tabbox component provides a folder like container for other ZK components. The tabbox comes with various molds (look and feel) such as the accordion mold. accordion.zul
<tabbox id="tb" width="100%" height="380px" mold="accordion"> <tabs> <tab label="Tab 1" /> <tab label="Tab 2" /> <tab label="Tab 3" /> </tabs> <tabpanels> <tabpanel> <grid id="grid" mold="paging" pageSize="4"> <columns> <column hflex="1" label="Order #" align="left" /> <column hflex="2" label="Item Purchased" align="center" /> <column hflex="3" label="Purchased Time" align="center" /> <column hflex="1" label="Paid" align="right" /> </columns> <rows> <zscript><![CDATA[ import org.zkoss.zul.*; int[] orderArray = new int[12]; for (int j=0; j<12; j++){ orderArray[j]= 390 + j; } ]]></zscript> <row forEach="${orderArray}"> <label value="${each}" /> <listbox mold="select" > <listitem label="Java" /> <listitem label="Latte" /> <listitem label="Mocha" /> </listbox> <timebox cols="12" format="a hh:mm:ss" mold="rounded" onCreate="self.value = new Date()" /> <checkbox label="No" onCheck='self.label= self.isChecked()? "Yes" : "No"' /> </row> </rows> </grid> </tabpanel> <tabpanel> <include src="/widgets/tabbox/accordion/auxhead1.zul" /> </tabpanel> <tabpanel> <include src="/widgets/tabbox/accordion/auxhead2.zul" /> </tabpanel> </tabpanels> </tabbox>
Copyright © 2005-2024 Potix Corporation All rights reserved.
|
Processing... |