Componen, Fungsi & Event Framework zkoss - X [ Menu & Toolbar ]

 

Berikut adalah contoh componen pada zkoss 

1. Menu

<zk>

<menubar id="menubar" hflex="min">

<custom-attributes org.zkoss.zul.image.preload="true" />

<menu label="Project" image="/img/Centigrade-Widget-Icons/Briefcase-16x16.png">

<menupopup>

<menuitem image="/img/Centigrade-Widget-Icons/BriefcaseSpark-16x16.png" label="New"

onClick="alert(self.label)" />

<menuitem image="/img/Centigrade-Widget-Icons/BriefcaseOpen-16x16.png" label="Open"

onClick="alert(self.label)" />

<menuitem image="/img/Centigrade-Widget-Icons/DisketteBlack-16x16.png" label="Save"

onClick="alert(self.label)" />

<menuseparator />

<menuitem label="Exit" image="/img/Centigrade-Widget-Icons/DoorOpen-16x16.png" onClick="alert(self.label)" />

</menupopup>

</menu>

<menu label="Help" image="/img/Centigrade-Widget-Icons/QuestionmarkButton-16x16.png">

<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>

<menu image="/img/Centigrade-Widget-Icons/Spyglass-16x16.png">

<menupopup>

<menuitem label="Index" onClick="alert(self.label)" />

<menu label="Color Picker" content="#color=#184dc6"/>

</menupopup>

</menu>

</menubar>

<checkbox label="Vertical orient">

<attribute name="onCheck">

menubar.orient= self.checked ? "vertical" : "horizontal";

</attribute>

</checkbox>

<checkbox label="Autodrop" if="true">

<attribute name="onCheck">

menubar.autodrop = self.checked;

</attribute>

</checkbox>

</zk>

2. Toolbar and Toolbarbutton

<zk>

<style dynamic="true">

.z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover{

background-color:transparent;

border:0 none;

}

.vista {

filter: -;

background:#000000 url(/zksandbox/img/bar.png) repeat-x 0 0;

color:white;

padding-top:7px;

}

.p-vista .z-panelchildren {

background-color: #008BB6;

border-bottom: 0 none;

}

</style>

Toolbar style: 

<separator/>

<radiogroup onCheck='tb.sclass = self.selectedItem.label;'>

<radio label="default" />

<radio label="vista" checked="true" />

</radiogroup>

<separator/>

<panel id="panel" title="ZK Desktop" height="362px" width="433px"

border="normal" sclass="p-vista">

<panelchildren>

<image src="/img/castle.png" />

</panelchildren>

<toolbar id="tb" sclass="vista" height="32px" align="end">

<toolbarbutton image="/img/live.gif"

onClick='alert("Live")' />

<toolbarbutton image="/img/defender.gif"

onClick='alert("Defender")' />

<toolbarbutton image="/img/battery.gif"

onClick='alert("Battery")' />

<toolbarbutton image="/img/network.gif"

onClick='alert("Network")' />

<toolbarbutton image="/img/volumn.gif"

onClick='alert("Volumn")' />

<toolbarbutton  label="12:55 PM"

onClick='alert("time")' />

</toolbar>

</panel>

</zk>

3.  Context Menu

<vbox>

<label if="true">Right click the profile picture.</label>

<label if="false">Touch on the profile picture for a while</label>

<image src="/img/msn2.gif" context="editPopup" />

<menupopup id="editPopup">

<menuitem image="/img/Centigrade-Widget-Icons/Bubble-16x16.png" label="Message" />

<menuseparator />

<menuitem image="/img/Centigrade-Widget-Icons/UserProfileMale-16x16.png" label="Profile" />

<menuitem image="/img/Centigrade-Widget-Icons/Envelope-16x16.png" label="Mail to" />

<menuseparator />

<menu label="Group" image="/img/Centigrade-Widget-Icons/CasualUsers-16x16.png">

<menupopup>

<menu label="Add to...">

<menupopup>

<menuitem label="Member" autocheck="true"

checkmark="true" checked="true" />

<menuitem label="Managers" autocheck="true"

checkmark="true" />

<menuitem label="Guest" autocheck="true"

checkmark="true" />

<menuitem label="Customers" autocheck="true"

checkmark="true" />

</menupopup>

</menu>

<menu label="Move to...">

<menupopup>

<menuitem label="Member" autocheck="true"

checkmark="true" />

<menuitem label="Managers" autocheck="true"

checkmark="true" />

<menuitem label="Guest" autocheck="true"

checkmark="true" />

<menuitem label="Customers" autocheck="true"

checkmark="true" />

</menupopup>

</menu>

</menupopup>

</menu>

<menuitem label="Block" image="/img/Centigrade-Widget-Icons/CasualUserMaleProhibition-16x16.png" />

<menuitem label="Remove contant" image="/img/Centigrade-Widget-Icons/DeleteCross-16x16.png" />

</menupopup>

</vbox>

4.  Fisheye Menu ( pada ZK PE or EE )

<zk>

<div height="550px">

<checkbox label="Attach icon edge at bottom"

onCheck='fsb.attachEdge=self.checked?"bottom":"top"' />

<checkbox label="Vertical orient"

onCheck='fsb.orient=self.checked?"vertical":"horizontal"' />

<separator bar="true" />

<fisheyebar id="fsb" style="position:absolute;margin:20px 150px;"

attachEdge="top" itemWidth="80" itemHeight="80" itemMaxHeight="160" itemMaxWidth="160">

<fisheye image="/img/Centigrade-Widget-Icons/FolderABlue-128x128.png" label="Folder"

onClick="alert(self.label)" />

<fisheye image="/img/Centigrade-Widget-Icons/ReadingGlass-128x128.png" label="Reading Glasses"

onClick="alert(self.label)" />

<fisheye image="/img/Centigrade-Widget-Icons/Briefcase-128x128.png" label="Project"

onClick="alert(self.label)" />

<fisheye image="/img/Centigrade-Widget-Icons/MailboxFlag-128x128.png"

label="Email" onClick="alert(self.label)" />

<fisheye image="/img/Centigrade-Widget-Icons/Globe-128x128.png"

label="Globe" onClick="alert(self.label)" />

<fisheye image="/img/Centigrade-Widget-Icons/Spyglass-128x128.png" label="Spyglass"

onClick="alert(self.label)" />

</fisheyebar>

</div>

</zk>

5.  Tooltips and Popup

<zk>

<style>

.profile { width:60px; height:60px; } .p-data { padding-top:5px;

}

</style>

<listbox width="500px">

<listhead>

<listheader label="Operation" width="200px" />

<listheader label="Contants" sort="auto" />

</listhead>

<listitem tooltip="msg">

<listcell label=" Mouse hover - tooltip " />

<listcell>

<hlayout>

<image src="/img/msn1.gif" class="profile" />

<image src="/img/Centigrade-Widget-Icons/CasualUserMale-16x16.png" class="p-data" />

<vlayout class="p-data">

<label value="Male" />

<label value="Male@hotmail.com" />

</vlayout>

</hlayout>

</listcell>

</listitem>

<listitem popup="msg">

<listcell label="Click - popup" />

<listcell>

<hlayout>

<image src="/img/msn1.gif" class="profile" />

<image src="/img/Centigrade-Widget-Icons/CasualUserFemale-16x16.png" class="p-data" />

<vlayout class="p-data">

<label value="Female" />

<label value="Female@hotmail.com" />

</vlayout>

</hlayout>

</listcell>

</listitem>

</listbox>

<popup id="msg" width="300px">

<vlayout>

This user is online now !

<toolbarbutton label="Mail him/her"/>

</vlayout>

</popup>

</zk>

Baca juga artikel yang berkaitan : 

• Componen, Fungsi & Event Framework zkoss - XI [ Data & Report - I ]
• Componen, Fungsi & Event Framework zkoss - XI [ Data & Report - II ]
• Componen, Fungsi & Event Framework zkoss - XII [ Ajax Push & Animation]
• Componen, Fungsi & Event Framework zkoss - XIII [ Event & Script ]
• Componen, Fungsi & Event Framework zkoss - XIV [ Multimudia & Utilities ]
• Componen, Fungsi & Event Framework zkoss - XV [ Miscellaneous ]

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