aligntabbox.zul

ZK是一个Ajax Java Web框架

<zk>
<tabbox width="400px">
	<tabs id="tabs1">
		<tab label="Lite"/>
		<tab label="Vertical"/>
		<tab label="Tab 3 a Long title"/>
		<tab label="Mix"/>
	</tabs>
	<tabpanels>
		<tabpanel>
	        <tabbox width="300px" sclass="lite" >
				<tabs align="center" id="tabs11">
					<tab label="Tab 1"/>
					<tab label="Tab 2 "/>
					<tab label="A long long h title"/>
					<tab label="Tab 4"/>
				</tabs>
				<tabpanels>
					<tabpanel>This is panel 1</tabpanel>
					<tabpanel>This is panel 2 The second panel</tabpanel>
			        <tabpanel>This is panel 3</tabpanel>
			        <tabpanel><div width="300px" height="100px">This is panel 4</div></tabpanel>
				</tabpanels>
			</tabbox>
			<button label="start" onClick='tabs11.setAlign("start")'/>
			<button label="center" onClick='tabs11.setAlign("center")'/>
			<button label="end" onClick='tabs11.setAlign("end")'/>
        </tabpanel>
        <tabpanel>
	        <tabbox height="300px" orient="vertical" >
				<tabs id="tabs12">
					<tab label="Tab 1"/>
					<tab label="Tab 2 "/>
					<tab label="long long v title"/>
					<tab label="Tab 4"/>
				</tabs>
				<tabpanels>
					<tabpanel>This is panel 1</tabpanel>
					<tabpanel>This is panel 2</tabpanel>
			        <tabpanel>This is panel 3</tabpanel>
			        <tabpanel><div height="100px">This is panel 4</div></tabpanel>
				</tabpanels>
			</tabbox>
			<button label="start" onClick='tabs12.setAlign("start")'/>
			<button label="center" onClick='tabs12.setAlign("center")'/>
			<button label="end" onClick='tabs12.setAlign("end")'/>
        </tabpanel>
        <tabpanel> Long title </tabpanel>
		<tabpanel>
        	<tabbox width="400px" height="400px" orient="vertical" >
				<tabs align="end" id="tabs141">
					<tab label="Tab 1"/>
					<tab label="Tab 2 "/>
				</tabs>
				<tabpanels>
					<tabpanel>This is panel 1</tabpanel>
					<tabpanel>
						<tabbox sclass="lite"  width="250px">
							<tabs id="tabs1411">
								<tab label="Tab 1"/>
								<tab label="Tab 2 "/>
							</tabs>
							<tabpanels>
								<tabpanel>
								<tabbox sclass="lite"  width="250px">
										<tabs id="tabs14111">
											<tab label="Tab 1"/>
											<tab label="Tab 2 "/>
										</tabs>
										<tabpanels>
											<tabpanel>This is panel 1</tabpanel>
											<tabpanel>This is panel 2</tabpanel>
										</tabpanels>
									</tabbox>
									<button label="start" onClick='tabs14111.setAlign("start")'/>
									<button label="center" onClick='tabs14111.setAlign("center")'/>
									<button label="end" onClick='tabs14111.setAlign("end")'/>					
								</tabpanel>
								<tabpanel>This is panel 2</tabpanel>
							</tabpanels>
						</tabbox>
						<button label="start" onClick='tabs1411.setAlign("start")'/>
						<button label="center" onClick='tabs1411.setAlign("center")'/>
						<button label="end" onClick='tabs1411.setAlign("end")'/>					
					</tabpanel>
				</tabpanels>
			</tabbox>
			<button label="start" onClick='tabs141.setAlign("start")'/>
			<button label="center" onClick='tabs141.setAlign("center")'/>
			<button label="end" onClick='tabs141.setAlign("end")'/>
        
        </tabpanel>
        
	</tabpanels>
</tabbox>
<hbox>
<button label="start" onClick='tabs1.setAlign("start")'/>
<button label="center" onClick='tabs1.setAlign("center")'/>
<button label="end" onClick='tabs1.setAlign("end")'/>
</hbox>
<tabbox mold="accordion">
	<tabs id="tabs2">
		<tab label="A"/>
		<tab label="B"/>
		<tab label="C"/>
		<tab label="D"/>
	</tabs>
<tabpanels>
	<tabpanel>This is panel A</tabpanel>
	<tabpanel>This is panel B</tabpanel>
	<tabpanel>This is panel C</tabpanel>
	<tabpanel>This is panel D</tabpanel>
</tabpanels>
</tabbox>
</zk>