Fisheyebar"

From Documentation
m ((via JWB))
 
(6 intermediate revisions by 3 users not shown)
Line 3: Line 3:
 
= Fisheyebar =
 
= Fisheyebar =
  
−
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#t4 Fisheyebar]
+
*Demonstration: [http://www.zkoss.org/zkdemo/menu/fisheye_menu Fisheyebar]
 
*Java API: <javadoc>org.zkoss.zkex.zul.Fisheyebar</javadoc>
 
*Java API: <javadoc>org.zkoss.zkex.zul.Fisheyebar</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkex.menu.Fisheyebar</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkex.menu.Fisheyebar</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Fisheyebar | Fisheyebar]]
 +
*[http://www.zkoss.org/product/edition.dsp Available in ZK PE and EE only]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
Line 13: Line 15:
 
= Example =
 
= Example =
  
−
[[Image:ZKComRef_Fisheyebar_Example.PNG]]
+
[[Image:ZKComRef_fisheyebar.png]]
  
 
<source lang="xml" >
 
<source lang="xml" >
−
<window>
+
<zk>
−
Click "Change orient" button and move cursor over the fisheyebar before
+
<div height="450px">
−
it changes.
+
<checkbox label="Attach icon edge at bottom"
−
<separator />
+
onCheck='fsb.attachEdge=self.checked?"bottom":"top"' />
−
Fisheyebar will be out of expected.(That is wrong)
+
<checkbox label="Vertical orient"
−
<fisheyebar id="fish"
+
onCheck='fsb.orient=self.checked?"vertical":"horizontal"' />
−
style="position: absolute; top: 50px;
+
<separator bar="true" />
−
        left:100px;margin:20px;"
+
<fisheyebar id="fsb" style="position:absolute;margin:80px 150px;"
−
attachEdge="top">
+
attachEdge="top" itemWidth="80" itemHeight="80" itemMaxHeight="160" itemMaxWidth="160">
−
<fisheye image="/img/icon_browser.png" label="Web Browser"
+
<fisheye image="/img/Centigrade-Widget-Icons/FolderABlue-128x128.png" label="Folder"
−
onClick="alert(self.label)" />
+
onClick="alert(self.label)" />
−
<fisheye image="/img/icon_calendar.png" label="Calendar"
+
<fisheye image="/img/Centigrade-Widget-Icons/ReadingGlass-128x128.png" label="Reading Glasses"
−
onClick="alert(self.label)" />
+
onClick="alert(self.label)" />
−
<fisheye image="/img/icon_email.png" label="Emai onClick="alert(self.label)" />
+
<fisheye image="/img/Centigrade-Widget-Icons/Briefcase-128x128.png" label="Project"
−
<fisheye image="/img/icon_texteditor.png" label="Text Editor"
+
onClick="alert(self.label)" />
−
onClick="alert(self.label)" />
+
<fisheye image="/img/Centigrade-Widget-Icons/MailboxFlag-128x128.png"
−
<fisheye image="/img/icon_update.png" label="Software Update"
+
label="Email" onClick="alert(self.label)" />
−
onClick="alert(self.label)" />
+
<fisheye image="/img/Centigrade-Widget-Icons/Globe-128x128.png"
−
<fisheye image="/img/icon_users.png" label="User onClick="alert(self.label)" />
+
label="Globe" onClick="alert(self.label)" />
−
</fisheyebar>
+
<fisheye image="/img/Centigrade-Widget-Icons/Spyglass-128x128.png" label="Spyglass"
−
<button label="Change orient">
+
onClick="alert(self.label)" />
−
<attribute name="onClick"> if (fish.orient.equals("horizontal")) {
+
</fisheyebar>
−
fish.orient = "vertical"; } else { fish.orient = "horizontal"; }
+
</div>
−
</attribute>
+
</zk>
−
</button>
 
−
</window>
 
 
</source>
 
</source>
  
−
=Supported events=
+
=Supported Events=
−
 
+
{| class='wikitable' | width="100%"
−
{| border="1" | width="100%"
 
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
Line 52: Line 51:
 
| None
 
| None
 
| None
 
| None
−
 
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
  
 
=Supported Children=
 
=Supported Children=
  
−
  <javadoc>org.zkoss.zkex.zul.Fisheye</javadoc>
+
  *[[ZK_Component_Reference/Essential_Components/Fisheye | Fisheye]]
  
−
=Use cases=
+
=Use Cases=
  
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 70: Line 69:
  
 
=Version History=
 
=Version History=
−
 
+
{{LastUpdated}}
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
−
| 5.0.2
+
| &nbsp;
−
| 5/18/2010
+
| &nbsp;
−
| Initialization
+
| &nbsp;
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 11:06, 7 January 2022


DocumentationZK Component ReferenceEssential ComponentsFisheyeFisheyebar
Fisheyebar

Fisheyebar

Employment/Purpose

A fisheye bar is a bar of fisheye that is a menu similar to the fish eye menu on the Mac OS.

Example

ZKComRef fisheyebar.png 

<zk>
	<div height="450px">
		<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:80px 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>

Supported Events

Name
Event Type
None None

Supported Children

* Fisheye

Use Cases

Version Description Example Location
     

Version History

Last Update : 2022/01/07


Version Date Content
     



Last Update : 2022/01/07

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/Essential_Components/Fisheye/Fisheyebar&oldid=52104"