Componen, Fungsi & Event Framework zkoss - III [ Bandboxes - Comboboxes ]


 Berikut adalah contoh componen pada zkoss 

1. Bandboxes

<vbox>

<bandbox id="bd">

<bandpopup>

<vbox>

<hbox>

Search

<textbox />

</hbox>

<listbox width="200px"

onSelect="bd.value=self.selectedItem.label; bd.close();">

<listhead>

<listheader label="Name" />

<listheader label="Description" />

</listhead>

<listitem>

<listcell label="John" />

<listcell label="CEO" />

</listitem>

<listitem>

<listcell label="Joe" />

<listcell label="Engineer" />

</listitem>

<listitem>

<listcell label="Mary" />

<listcell label="Supervisor" />

</listitem>

</listbox>

</vbox>

</bandpopup>

</bandbox>

<hbox>

<checkbox checked="false" onCheck="bd.autodrop = self.checked"

label="auto drop popup when typing" />

<checkbox checked="true"

onCheck="bd.buttonVisible = self.checked" label="button visible" />

</hbox>

</vbox>



2. Comboboxes

<hbox width="100%" widths="200px">

<vbox>

Combobox:

<combobox>

<comboitem label="Simple and Rich" />

<comboitem label="Cool!" />

<comboitem label="Thumbs Up!" />

</combobox>

Combobox with description:

<combobox>

<comboitem label="Simple and Rich"

description="The simplest way to make Web applications rich" />

<comboitem label="Cool!"

description="The coolest technology" />

<comboitem label="Ajax and RIA"

description="Rich Internet Application by Ajax" />

</combobox>

Combobox with description and icons:

<combobox>

<comboitem label="Simple and Rich" image="/img/Centigrade-Widget-Icons/GoldBar-32x32.gif"

description="The simplest way to make Web applications rich" />

<comboitem label="Cool!" image="/img/Centigrade-Widget-Icons/CogwheelEye-32x32.gif"

description="The coolest technology" />

<comboitem label="Ajax and RIA" image="/img/Centigrade-Widget-Icons/WindowGlobe-32x32.gif"

description="Rich Internet Application by Ajax" />

</combobox>

</vbox>

<splitter collapse="before" />

<vbox>

Auto-complete Combobox:

<combobox id="combo" autodrop="true" />

<hbox>

<checkbox checked="true"

onCheck="combo.autodrop = self.checked"

label="auto drop popup when typing" />

<checkbox checked="true"

onCheck="combo.buttonVisible = self.checked" label="button visible" />

</hbox>

</vbox>

<zscript>

String[] _dict = { 

"abacus", "accuracy", "acuity", "adage", "afar", "after", "apple",

"bible", "bird", "bingle", "blog",

"cabane", "cape", "cease", "cedar",

"dacron", "defacto", "definable", "deluxe",

"each", "eager", "effect", "efficacy",

"far", "far from",

"girl", "gigantean", "giant",

"home", "honest", "huge",

"information", "inner",

"jump", "jungle", "jungle fever",

"kaka", "kale", "kame",

"lamella", "lane", "lemma",

"master", "maxima", "music",

"nerve", "new", "number",

"omega", "opera",

"pea", "peace", "peaceful",

"rock", "RIA",

"sound", "spread", "student", "super",

"tea", "teacher",

"unit", "universe",

"vector", "victory",

"wake", "wee", "weak", "web2.0",

"xeme",

"yea", "yellow",

"zebra", "zk",

};

ListModel dictModel= new SimpleListModel(_dict);

combo.setModel(dictModel);

</zscript>

</hbox>



Reference : https://www.zkoss.org/zksandbox/#g2