Latest

Using scrolling tabs on tabbox

Ryan Wu, Engineer, Potix Corporation
Aug 18, 2008

Version

Applicable to zk-3.5.0-FL-2008-08-18 and later.

Introduction

In this article, we will be looking at two parts:

New feature : tabbox scrolling
New mold :accordion-lite.

In the past, tabbox makes tabs thinner when number of tabs exceeds the visual allowance of tab bar. If there're too many tabs, it's really hard to get which tab we want. As you might experience that since Firefox 2, the scrolling button will show if there're too many tabs on the tab bar, ZK supports it NOW!

The mold "accordion-lite" is a new choice of tabbox mold, it looks more compact between tabs, and give developers a new way to build fitter desktop-like applications.

Live Demo

Let's have a look at the real demo - Scrolling tabbox.

As you can see, scrolling tabbox is more convenient than before. Notice that you can only use scrolling tabbox on default mold.

Now let us see the new trendy mold accordion-lite as following:
The tabbox in mold accordion

The tabbox in mold accordion-lite

Download

Download the scrollingtabbox-demo.zip for the article here.

Summary

In this small talk, we have demonstrated you the power of scrolling tabbox and new mold accordion-lite of tabbox.
If you came up with any problem, please feel free to ask us on ZK forum.

Comments

Bernd

2008-08-18

Thank you very much for this article. (perfect as always)

One remark though: IMHO the "mold" options are not very intuitive to understand.
Maybe the ZK team could harmonize those mold modes between the UI elements or at least put an overview on the website, which AJAX element offers which "mold" mode !?

That would be fantastic !

Greetings
Bernd

kkurt

2008-08-22

Hi, i cant use this demo file. I am getting "Failed to invoke zkTabs2.onSize
Object required" error?

Ryanwu

2008-08-25

@Bernd
make sure your ZK freshly is newest (08/22)
you can download the latest version here
/Ryan Wu

Ryanwu

2008-08-25

@Bernd
thank your opinion .
we will take that into consideration :)

/Ryan Wu

zk 3.5 Tabbox Bug

2008-09-02

在这个页面中,它IE浏览器窗口缩小后,Tabbox它不会根据IE进行缩放,而Menubar 会根据窗口进行缩放.这样一来界面就会变行

<window >
<style>
tr.myodd td.z-row-inner, tr.myodd {
background-color: #E4EBF8;
}
.myimg {
margin: 5px; border: 10px solid #B0C75E;
}
div.z-column-content {
text-align: center; font-weight: bold;
}
div.z-row-content span {
font-family: Tahoma,Arial,serif;
color: #0E3A99;
}
</style>
<zscript>
String[][] datas = new String[][]{
// Today
new String[]{"SourceForge.net","[zk1 - Help] RE: ZK problem in dynamic menu","2008/4/29 15:47:27","12KB"},
new String[]{"SourceForge.net","[zk1 - Help] RE: FileUpload","2008/4/29 15:37:57","14KB"},
new String[]{"SourceForge.net","[zk1 - Help] RE: Datebox format","2008/4/29 15:27:31","11KB"},
new String[]{"SourceForge.net","[zk1 - Help] FileUpload","2008/4/29 14:07:25","11KB"},
new String[]{"SourceForge.net","[zk1 - General] RE: Opening more than one new browser window","2008/4/29 13:44:17","12KB"},
// Yesterday
new String[]{"SourceForge.net","[zk1 - Help] RE: SelectedItemConverter Question","2008/4/28 13:31:12","14KB"},
new String[]{"SourceForge.net","[zk1 - Help] RE: Times_Series Chart help","2008/4/28 13:26:37","14KB"},
new String[]{"SourceForge.net","[zk1 - Help] RE: SelectedItemConverter Question","2008/4/28 10:14:27","14KB"},
// Sunday
new String[]{"SourceForge.net","[zk1 - General] RE: Opening more than one new browser window","2008/4/27 13:44:17","12KB"},
new String[]{"SourceForge.net","[zk1 - Help] RE: SelectedItemConverter Question","2008/4/27 13:31:12","14KB"},
new String[]{"SourceForge.net","[zk1 - Help] RE: Times_Series Chart help","2008/4/27 13:26:37","14KB"},
};
</zscript>

<menubar id="menubar" autodrop="true"><menu label="File" >
<menupopup>
<menuitem label="New" onClick="alert(self.label)"/>
<menuitem label="Open" onClick="alert(self.label)"/>
<menuitem label="Save" onClick="alert(self.label)"/>
<menuseparator/>
<menuitem label="Exit" onClick="alert(self.label)"/>
</menupopup>
</menu><menu label="Option">
<menupopup>
<menuitem label="Simple" autocheck="true"/>
<menuitem label="Rich" autocheck="true"/>
</menupopup>
</menu><menu label="Help">
<menupopup>
<menuitem label="Index" onClick="alert(self.label)"/>
<menu label="About">
<menupopup>
<menuitem label="About ZK" onClick="alert(self.label)"/>
<menuitem label="About Potix" onClick="alert(self.label)"/>
</menupopup>
</menu>
</menupopup>
</menu></menubar>
<tabbox >
<tabs >
<tab label="Tab 1" />
<tab label="Tab 2" closable="true"/>
</tabs>
<tabpanels>
<tabpanel>

<listbox fixedLayout="true"
oddRowSclass="">
<listhead sizable="true">
<listheader width="150px"
label="From" sort="auto" />
<listheader label="Subject"
sort="auto" />
<listheader width="150px"
label="Received" sort="auto" />
<listheader width="50px"
label="Size" sort="auto" />
</listhead>
<listgroup>
<listcell
label="Date:Today " />
<listcell label="" />
<listcell label="" />
<listcell label="" />
</listgroup>
<listitem forEach="${datas}"
forEachBegin="0" forEachEnd="4" sclass="cells">
<listcell label="${each[0]}"
image="/img/mail_read.png" style="padding-left: 10px" />
<listcell
label="${each[1]}" />
<listcell
label="${each[2]}" />
<listcell
label="${each[3]}" />
</listitem>
<listgroupfoot>
<listcell label="5 emails"
style="padding-left: 10px" />
<listcell label="zk1" />
<listcell label="2008/4/29" />
<listcell label="60KB" />
</listgroupfoot>
<listgroup label="Date:Yesterday" />
<listitem forEach="${datas}"
forEachBegin="5" forEachEnd="7" sclass="cells">
<listcell label="${each[0]}"
image="/img/mail_read.png" style="padding-left: 10px" />
<listcell
label="${each[1]}" />
<listcell
label="${each[2]}" />
<listcell
label="${each[3]}" />
</listitem>
<listgroupfoot>
<listcell label="3 emails"
style="padding-left: 10px" />
<listcell label="zk1" />
<listcell label="2008/4/28" />
<listcell label="42KB" />
</listgroupfoot>
<listgroup label="Date:Sunday" />
<listitem forEach="${datas}"
forEachBegin="8" forEachEnd="10" sclass="cells">
<listcell label="${each[0]}"
image="/img/mail_read.png" style="padding-left: 10px" />
<listcell
label="${each[1]}" />
<listcell
label="${each[2]}" />
<listcell
label="${each[3]}" />
</listitem>
<listgroupfoot>
<listcell label="3 emails"
style="padding-left: 10px" />
<listcell label="zk1" />
<listcell label="2008/4/27" />
<listcell label="40KB" />
</listgroupfoot>
</listbox>

</tabpanel>
<tabpanel>
This is panel 2 The second panel
</tabpanel>
</tabpanels>
</tabbox>
</window>


	Post


	Preview