Fisheyebar"

From Documentation
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]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
Line 13: Line 14:
 
= Example =
 
= Example =
  
−
[[Image:fisheyebar.PNG]]
+
[[Image:ZKComRef_fisheyebar.png]]
  
 
<source lang="xml" >
 
<source lang="xml" >
−
 
+
<zk>
−
<window>
+
<div height="450px">
−
Click "Change orient" button and move cursor over the fisheyebar before
+
<checkbox label="Attach icon edge at bottom"
−
it changes.
+
onCheck='fsb.attachEdge=self.checked?"bottom":"top"' />
−
<separator />
+
<checkbox label="Vertical orient"
−
Fisheyebar will be out of expected.(That is wrong)
+
onCheck='fsb.orient=self.checked?"vertical":"horizontal"' />
−
<fisheyebar id="fish"
+
<separator bar="true" />
−
style="position: absolute; top: 50px;
+
<fisheyebar id="fsb" style="position:absolute;margin:80px 150px;"
−
        left:100px;margin:20px;"
+
attachEdge="top" itemWidth="80" itemHeight="80" itemMaxHeight="160" itemMaxWidth="160">
−
attachEdge="top">
+
<fisheye image="/img/Centigrade-Widget-Icons/FolderABlue-128x128.png" label="Folder"
−
<fisheye image="/img/icon_browser.png" label="Web Browser"
+
onClick="alert(self.label)" />
−
onClick="alert(self.label)" />
+
<fisheye image="/img/Centigrade-Widget-Icons/ReadingGlass-128x128.png" label="Reading Glasses"
−
<fisheye image="/img/icon_calendar.png" label="Calendar"
+
onClick="alert(self.label)" />
−
onClick="alert(self.label)" />
+
<fisheye image="/img/Centigrade-Widget-Icons/Briefcase-128x128.png" label="Project"
−
<fisheye image="/img/icon_email.png" label="Emai onClick="
+
onClick="alert(self.label)" />
−
alert ( self.label ) />
+
<fisheye image="/img/Centigrade-Widget-Icons/MailboxFlag-128x128.png"
−
<fisheye image="/img/icon_texteditor.png" label="Text Editor"
+
label="Email" onClick="alert(self.label)" />
−
onClick="alert(self.label)" />
+
<fisheye image="/img/Centigrade-Widget-Icons/Globe-128x128.png"
−
<fisheye image="/img/icon_update.png" label="Software Update"
+
label="Globe" onClick="alert(self.label)" />
−
onClick="alert(self.label)" />
+
<fisheye image="/img/Centigrade-Widget-Icons/Spyglass-128x128.png" label="Spyglass"
−
<fisheye image="/img/icon_users.png" label="User onClick="
+
onClick="alert(self.label)" />
−
alert ( self.label ) />
+
</fisheyebar>
−
</fisheyebar>
+
</div>
−
<button label="Change orient">
+
</zk>
−
<attribute name="onClick"> if (fish.orient.equals("horizontal")) {
 
−
fish.orient = "vertical"; } else { fish.orient = "horizontal"; }
 
−
</attribute>
 
−
</button>
 
−
</window>
 
 
</source>
 
</source>
  
−
=Supported events=
+
=Supported Events=
−
 
 
 
{| border="1" | width="100%"
 
{| border="1" | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
Line 55: Line 50:
 
| None
 
| None
 
| None
 
| None
−
 
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
  
 
=Supported Children=
 
=Supported Children=
Line 62: Line 57:
 
  *[[ZK_Component_Reference/Essential_Components/Fisheye | Fisheye]]
 
  *[[ZK_Component_Reference/Essential_Components/Fisheye | Fisheye]]
  
−
=Use cases=
+
=Use Cases=
  
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
Line 73: Line 68:
  
 
=Version History=
 
=Version History=
−
 
+
{{LastUpdated}}
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content

Revision as of 09:14, 18 November 2010


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 : 2010/11/18


Version Date Content
     



Last Update : 2010/11/18

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=11107"