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.

<tabbox id="tb" width="100%" height="380px" mold="accordion">
		<tab label="Tab 1" />
		<tab label="Tab 2" />
		<tab label="Tab 3" />
			<grid id="grid" mold="paging" pageSize="4">
		            <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" />
						import org.zkoss.zul.*; 
						int[] orderArray = new int[12];
						for (int j=0; j<12; j++){
							orderArray[j]= 390 + j;
		            <row forEach="${orderArray}">
		                <label value="${each}" />
		                <listbox mold="select" >
		                    <listitem label="Java" />
		                    <listitem label="Latte" />
		                    <listitem label="Mocha" />
		                <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"' />
			<include src="/widgets/tabbox/accordion/auxhead1.zul" />
			<include src="/widgets/tabbox/accordion/auxhead2.zul" />