Button"
Tmillsclare (talk | contribs) m |
Jumperchen (talk | contribs) m |
||
| Line 3: | Line 3: | ||
= Button = | = Button = | ||
| − | *Demonstration: [http://www.zkoss.org/zkdemo/userguide/#f8 Button] | + | *Demonstration: [http://www.zkoss.org/zkdemo/userguide/#f8 Button] and [http://docs.zkoss.org/wiki/ZK_5:_New_File_Upload#Live_Demo Fileupload] |
*Java API: <javadoc>org.zkoss.zul.Button</javadoc> | *Java API: <javadoc>org.zkoss.zul.Button</javadoc> | ||
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Button</javadoc> | *JavaScript API: <javadoc directory="jsdoc">zul.wgt.Button</javadoc> | ||
| Line 10: | Line 10: | ||
You could assign a <tt>label</tt> and an <tt>image</tt> to a button by the <tt>label</tt> and <tt>image</tt> properties. If both are specified, the <tt>dir</tt> property control which is displayed up front, and the <tt>orient</tt> property controls whether the layout is horizontal or vertical. | You could assign a <tt>label</tt> and an <tt>image</tt> to a button by the <tt>label</tt> and <tt>image</tt> properties. If both are specified, the <tt>dir</tt> property control which is displayed up front, and the <tt>orient</tt> property controls whether the layout is horizontal or vertical. | ||
| + | |||
| + | Within ZK 5, the file upload has been redesigned so it can be integrated with any widget. For example, The button can now be used to upload a file. In addition to this, the display of the upload status has been enhanced and can be customized easily. | ||
= Example = | = Example = | ||
| Line 20: | Line 22: | ||
<button label="Above" image="/img/folder.gif" orient="vertical" width="125px"/> | <button label="Above" image="/img/folder.gif" orient="vertical" width="125px"/> | ||
<button label="Below" image="/img/folder.gif" orient="vertical" dir="reverse" width="125px"/> | <button label="Below" image="/img/folder.gif" orient="vertical" dir="reverse" width="125px"/> | ||
| + | </source> | ||
| + | |||
| + | = Fileupload Example = | ||
| + | <source lang="xml"> | ||
| + | <button upload="true" label="Fileupload"/> | ||
</source> | </source> | ||
| Line 62: | Line 69: | ||
<tt>Description: Denotes when a component loses the focus.</tt> | <tt>Description: Denotes when a component loses the focus.</tt> | ||
| + | |||
| + | |- | ||
| + | | <center>onUpload</center> | ||
| + | | <javadoc>org.zkoss.zk.ui.event.UploadEvent</javadoc> | ||
| + | |||
| + | '''Description: ''' | ||
| + | |||
| + | Denotes user has uploaded a file to the component. | ||
|} | |} | ||
Revision as of 03:48, 18 May 2010
Button
- Demonstration: Button and Fileupload
- Java API: Button
- JavaScript API: Button
Employment/Purpose
You could assign a label and an image to a button by the label and image properties. If both are specified, the dir property control which is displayed up front, and the orient property controls whether the layout is horizontal or vertical.
Within ZK 5, the file upload has been redesigned so it can be integrated with any widget. For example, The button can now be used to upload a file. In addition to this, the display of the upload status has been enhanced and can be customized easily.
Example
<button label="Left" image="/img/folder.gif" width="125px"/>
<button label="Right" image="/img/folder.gif" dir="reverse" width="125px"/>
<button label="Above" image="/img/folder.gif" orient="vertical" width="125px"/>
<button label="Below" image="/img/folder.gif" orient="vertical" dir="reverse" width="125px"/>
Fileupload Example
<button upload="true" label="Fileupload"/>
Supported events
| MouseEvent
| |
| MouseEvent
| |
| MouseEvent
| |
| Event
| |
| Event
| |
| UploadEvent
Description: Denotes user has uploaded a file to the component. |
Supported Children
*NONE
Use cases
| Version | Description | Example Location |
|---|---|---|
| 3.6 | Get dynamically generated Button reference in onClick Event | http://www.zkoss.org/forum/listComment/8780 |
| 3.6 | How to fire onClick Event on a Button | http://www.zkoss.org/forum/listComment/1716 |
Version History
| Version | Date | Content |
|---|---|---|
| 5.0.2 | 4/27/2010 | Initialization |