|
Processing... Traverse between rows using keys such as arrows keys, Home key, and End key !
Description & Source Code
A listbox differs from a regular grid in its support for item selection, possible also using keystroke commands. In this demo, the email inbox is built using listbox and the select box at the top left corner is implemented using a listbox in "select" mold. Keystroke commands include:
keystroke_command.zul
<zk> <hlayout> <listbox rows="1" mold="select"> <listitem selected="true" label="Inbox" /> <listitem label="Received" /> <listitem label="Draft" /> </listbox> <separator spacing="5px" /> <textbox id="txt" width="220px" style="color:#008FD2;" /> </hlayout> <separator bar="true" /> <listbox> <attribute name="onSelect"><![CDATA[ txt.setValue("Mail Received on "+ self.getSelectedItem().getLastChild().getLabel()); ]]></attribute> <listhead sizable="true"> <listheader align="center" width="40px" image="/widgets/listbox/keystroke_command/img/ArrowsUpDown-16x16.png" /> <listheader align="center" width="40px" image="/widgets/listbox/keystroke_command/img/Envelope-16x16.png" /> <listheader align="center" width="40px" image="/widgets/listbox/keystroke_command/img/PaperClip-16x16.png" /> <listheader label="Subject" sort="auto"/> <listheader label="Received" sort="auto"/> </listhead> <listitem height="28px"> <listcell image="/widgets/listbox/keystroke_command/img/ArrowUpOrange-16x16.png" /> <listcell image="/widgets/listbox/keystroke_command/img/EnvelopeOpen-16x16.png" /> <listcell image="/widgets/listbox/keystroke_command/img/PaperClip-16x16.png" /> <listcell label="ZK 5.0.3 Released!" /> <listcell label="2010/06/29 17:41:29" /> </listitem> <listitem height="28px"> <listcell image="/widgets/listbox/keystroke_command/img/ArrowDown-16x16.png" /> <listcell image="/widgets/listbox/keystroke_command/img/Envelope-16x16.png" /> <listcell image="/widgets/listbox/keystroke_command/img/PaperClip-16x16.png" /> <listcell label="ZK 5.0.2 Released!" /> <listcell label="2010/05/12 15:56:37" /> </listitem> <listitem height="28px"> <listcell image="/widgets/listbox/keystroke_command/img/ArrowUpOrange-16x16.png" /> <listcell image="/widgets/listbox/keystroke_command/img/EnvelopeOpen-16x16.png" /> <listcell label=" " /> <listcell label="ZK 5 Released!" /> <listcell label="2010/01/26 13:23:07" /> </listitem> <listitem height="28px"> <listcell image="/widgets/listbox/keystroke_command/img/ArrowUpOrange-16x16.png" /> <listcell image="/widgets/listbox/keystroke_command/img/EnvelopeOpen-16x16.png" /> <listcell label=" " /> <listcell label="ZK 3.6.3 Released!" /> <listcell label="2009/11/03 10:26:37" /> </listitem> </listbox> </zk>
Copyright © 2005-2023 Potix Corporation All rights reserved.
|
Processing... |