Bandbox"

From Documentation
m (Created page with 'init')
 
m
Line 1: Line 1:
−
init
+
{{ZKComponentReferencePageHeader}}
 +
 
 +
= Bandbox =
 +
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#f6 Bandbox]
 +
*Java API: <javadoc>org.zkoss.zul.Bandbox</javadoc>
 +
*JavaScript API: <javadoc directory="jsdoc">zul.inp.Bandbox</javadoc>
 +
 
 +
= Employment/Purpose =
 +
A bandbox is a special text box that embeds a customizable popup window (aka., a dropdown window). Like comboboxes, a bandbox  consists of an input box and a popup window. The popup window is opened automatically, when users presses Alt+DOWN or clicks the magnifier button.
 +
 
 +
Unlike comboboxes, the popup window of a bandbox could be anything. It is designed to give developers the maximal flexibility. A typical use is to represent the popup window as a search dialog.
 +
= Example =
 +
 
 +
[[Image:ZKComRef_Bandbox_Example.png ]]
 +
 
 +
<source lang="xml" >
 +
<bandbox id="bd">
 +
<bandpopup>
 +
<vbox>
 +
<hbox>
 +
Search
 +
<textbox />
 +
</hbox>
 +
<listbox width="200px"
 +
onSelect="bd.value=self.selectedItem.label;    bd.closeDropdown();">
 +
<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>
 +
</source>
 +
 
 +
=Supported events=
 +
 
 +
{| border="1" | width="100%"
 +
! <center>Name</center>
 +
! <center>Event Type</center>
 +
|-
 +
| <center>onOpen</center>
 +
| '''Event:''' [ZK_Component_Reference/Events/OpenEvent OpenEvent]
 +
 
 +
Denotes user has opened or closed a component. Note: unlike onClose, this event is only a notification. The client sends this event after opening or closing the component.
 +
|}
 +
 
 +
=Supported Children=
 +
 
 +
[[ZK_Component_Reference/Input/Bandpopup | Bandpopup ]]
 +
 
 +
=Use cases=
 +
 
 +
{| border='1px' | width="100%"
 +
! Version !! Description !! Example Location
 +
|-
 +
| 5.0+
 +
| &nbsp;
 +
| &nbsp;
 +
|}
 +
 
 +
=Version History=
 +
 
 +
{| border='1px' | width="100%"
 +
! Version !! Date !! Content
 +
|-
 +
| 5.0.1
 +
| 04/30/2010
 +
| Initialization
 +
|}
 +
 
 +
{{ZKComponentReferencePageFooter}}

Revision as of 08:24, 30 April 2010


DocumentationZK Component ReferenceInputBandbox
Bandbox

Bandbox

Employment/Purpose

A bandbox is a special text box that embeds a customizable popup window (aka., a dropdown window). Like comboboxes, a bandbox consists of an input box and a popup window. The popup window is opened automatically, when users presses Alt+DOWN or clicks the magnifier button.

Unlike comboboxes, the popup window of a bandbox could be anything. It is designed to give developers the maximal flexibility. A typical use is to represent the popup window as a search dialog.

Example

ZKComRef Bandbox Example.png 

<bandbox id="bd">
	<bandpopup>
		<vbox>
			<hbox>
				Search
				<textbox />
			</hbox>
			<listbox width="200px"
				onSelect="bd.value=self.selectedItem.label;    bd.closeDropdown();">
				<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>

Supported events

Name
Event Type
onOpen
 Event: [ZK_Component_Reference/Events/OpenEvent OpenEvent]

Denotes user has opened or closed a component. Note: unlike onClose, this event is only a notification. The client sends this event after opening or closing the component.

Supported Children

Bandpopup

Use cases

Version Description Example Location
5.0+    

Version History

Version Date Content
5.0.1 04/30/2010 Initialization



Last Update : 2010/04/30

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Input/Bandbox&oldid=1018"