helloniko
06-28-2009, 03:49 AM
FisheyeMenu is my second simple UX based on Ext Core.
It's horizontal mode and still initial version now, just play for fun. Vertical fisheye mode and pure text function will be supported in the future.
(** if you extract the attachment but to find lost file extention ('.zip'), please use zip software open/extract it, thanks...)
-Tested on FF2+, IE7+, Chrome2, Safari3
-MIT License
-FisheyeMenu demo (http://cz9908.com/showcase/?item=fisheye-menu&p=1)
-Desktop Fisheye demo (http://cz9908.com/showcase/?item=desktop-fisheye&p=1) (thanks hello2008 (http://www.extjs.com/forum/showthread.php?p=351610#post351610))
-Git source (http://github.com/bluepower/Ext-Core-UX/tree/master/FisheyeMenu/)
-UX doc (http://cz9908.com/blog/Niko-weblog-labs/lab-Niko-Ext-Core-UX-Doc/output/?class=Ext.ux.FisheyeMenu)
Example usage:
Ext.onReady(function() {
var fm = new Ext.ux.FisheyeMenu({
renderTo : 'fisheye-menu',
itemWidth : 60,
items : [{
text: 'Map',
imagePath: 'images/map.png',
url: 'http://maps.google.com'
}, {
text: 'Photo',
imagePath: 'images/photo.png',
url: 'http://picasaweb.google.com'
}]
});
// change alignment dynamically
fm.setAlign({
hAlign : 'left',
vAlign : 'top'
});
});
It's horizontal mode and still initial version now, just play for fun. Vertical fisheye mode and pure text function will be supported in the future.
(** if you extract the attachment but to find lost file extention ('.zip'), please use zip software open/extract it, thanks...)
-Tested on FF2+, IE7+, Chrome2, Safari3
-MIT License
-FisheyeMenu demo (http://cz9908.com/showcase/?item=fisheye-menu&p=1)
-Desktop Fisheye demo (http://cz9908.com/showcase/?item=desktop-fisheye&p=1) (thanks hello2008 (http://www.extjs.com/forum/showthread.php?p=351610#post351610))
-Git source (http://github.com/bluepower/Ext-Core-UX/tree/master/FisheyeMenu/)
-UX doc (http://cz9908.com/blog/Niko-weblog-labs/lab-Niko-Ext-Core-UX-Doc/output/?class=Ext.ux.FisheyeMenu)
Example usage:
Ext.onReady(function() {
var fm = new Ext.ux.FisheyeMenu({
renderTo : 'fisheye-menu',
itemWidth : 60,
items : [{
text: 'Map',
imagePath: 'images/map.png',
url: 'http://maps.google.com'
}, {
text: 'Photo',
imagePath: 'images/photo.png',
url: 'http://picasaweb.google.com'
}]
});
// change alignment dynamically
fm.setAlign({
hAlign : 'left',
vAlign : 'top'
});
});