A Compact, Robust, and Efficient ZK Fisheye"
m (→Live Demo) |
Tmillsclare (talk | contribs) m (→Live Demo) |
||
| Line 16: | Line 16: | ||
Let's have a look at the demo of the ZK ''Fisheyebar''. | Let's have a look at the demo of the ZK ''Fisheyebar''. | ||
| − | <gflash width="800" height="600"> | + | <gflash width="800" height="600">/_w/images/d/d4/Demo5.swf</gflash> |
The following fragment is the Fisheyebar example, | The following fragment is the Fisheyebar example, | ||
Revision as of 07:44, 13 September 2010
Jumper Chen, Engineer, Potix Corporation
July 11, 2008
Applicable to zk-3.5.0-FL-2008-07-11 and later.
Introduction
Fisheye is a term that takes in an extremely wide, hemispherical image introduced in photography. As the well-known Apple computer, they use the fisheye technique to show the amazing desktop menu that enhances the user experience with a menu. In the past, ZK provided both Fisheyelist and Fisheyeitem components that integrate with Dojo to show the fisheye technique with a menu. The performance of the Fisheyelist, however, is not acceptable on Linux environment, and the package of the Dojo library is very heavy to load when the developer merely uses the one feature of them. Due to these reasons, we decide to implement ZK own Fisheye components, Fisheyebar and Fisheye, that are more compact, robust, and efficient than Dojo's.
Live Demo
Let's have a look at the demo of the ZK Fisheyebar.
ERROR: Link hasn't been found
The following fragment is the Fisheyebar example,
<fisheyebar style="position:absolute;margin:20px; top:50px; left: 200px"
attachEdge="top">
<fisheye image="/img/icon_browser.png" label="Web Browser"
onClick="alert(self.label)" />
<fisheye image="/img/icon_calendar.png" label="Calendar"
onClick="alert(self.label)" />
<fisheye image="/img/icon_email.png" label="Email"
onClick="alert(self.label)" />
<fisheye image="/img/icon_texteditor.png" label="Text Editor"
onClick="alert(self.label)" />
<fisheye image="/img/icon_update.png" label="Software Update"
onClick="alert(self.label)" />
<fisheye image="/img/icon_users.png" label="Users"
onClick="alert(self.label)" />
</fisheyebar>
As you can see, the code of the Fisheyebar is the same as using the Fisheyelist component. In fact, we change the component name from Fisheyelist and Fisheyeitem to Fisheyebar and Fisheye for backward compatibility. Note that the Fisheyebar and the Fisheye can peacefully coexist with the Fisheyelist and the Fisheyeitem.
Summary
The fisheye menu can enhance the UI to be more user-friendly. And the performance of the fisheye on all kinds of environment has been optimized, so the developer doesn't worry about the performance issue, handled by ZK automatically. If you come up with any problem, please feel free to ask us on ZK forum.
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |