Fisheye"

From Documentation
Line 13: Line 13:
  
 
= 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=

Revision as of 09:07, 18 November 2010

Fisheye

Employment/Purpose

A fisheye item


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
onClick None

Supported Children

*None

Use cases

Version Description Example Location
     

Version History

Version Date Content
     



Last Update : 2010/11/18

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