ZK - Open Source Ajax Java Framework

Hi everyone,

I am a newbie to zk and i am evaluating zk whether to be used for one of our products.

I have a query with tabbox. My code is as follows

<zk height="100%" width="100%">
<div height="100%" width="100%" style="overflow:auto">
<tabbox id="tb" mold="accordion">
<tabs stubonly="true">
<tab label="Generic Reports" />
<tab label="Product related Reports" />
</tabs>
<tabpanels>
<tabpanel>
<listbox id="mktreq_Listbox_ID">
<listitem>
<listcell label="Market Requirement"
id="mktreqinfo_Listcell_ID" />
</listitem>
</listbox>
</tabpanel>
<tabpanel>
<listbox height="100%" width="100%">
<listitem>
<listcell id="prdinfo_Listcell_ID">
<label value="Product Information"
id="pdtinfo_Label_ID" />
</listcell>
</listitem>
<listitem>
<listcell label="PRS"
id="prsinfo_Listcell_ID" />
</listitem>
</listbox>
</tabpanel>
</tabpanels>
</tabbox>
</div>
</zk>

When i execute this the first tab defaultly opens. Is there any way in zk to close all the tabs, in my case two tabs should be closed and only when any of the particular tab is clicked, it should expand or open.

I would greatly appreciate any help/support.

Thanks
Anandh

Anandh,

Welcome to ZK.

In the future, please wrap your code example in [code] [/code] tags.  It will help us help you.

The <tabbox> component is meant to always have one tab open, so I would suggest using <groupbox> components instead.  Here is an example of what I mean:

<zk>
	<div height="100%" width="100%" style="overflow:auto">
		<groupbox mold="3d" open="false">
			<caption label="Generic Reports" />
			<listbox id="mktreq_Listbox_ID">
				<listitem>
					<listcell label="Market Requirement" id="mktreqinfo_Listcell_ID" />
				</listitem>
			</listbox>
		</groupbox>
		<groupbox mold="3d" open="false">
			<caption label="Product related Reports" />
			<listbox height="100%" width="100%">
				<listitem>
					<listcell id="prdinfo_Listcell_ID">
						<label value="Product Information" id="pdtinfo_Label_ID" />
					</listcell>
				</listitem>
				<listitem>
					<listcell label="PRS" id="prsinfo_Listcell_ID" />
				</listitem>
			</listbox>
		</groupbox>
	</div>
</zk>

You can control when a groupbox is open/closed by setting the "open" attribute.

Hope that helps,

Todd

Hi Todd,

Thanks for your help, but i get a small gap/empty space between each groupbox, where in i wanted the tabs to be continuous. I will find a way around to close in that gap.

Thanks
Anandh

Anandh,

A simple solution for the gap can be accomplished via CSS.  Just change the second <groupbox> component to look like this:

<groupbox mold="3d" open="false" style="margin-top: -8px;">

Hopefully that will help,

Todd