PDA

View Full Version : [Ext Core]Ext.ux.FisheyeMenu



helloniko
28 Jun 2009, 12: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)
-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'
});
});

elnove
28 Jun 2009, 9:59 AM
Greate work dude !!!!

Joe
30 Jun 2009, 12:58 PM
This is exactly the types of controls that will make all our lives easier.

Great work and thanks so much.

pachama
1 Jul 2009, 8:16 AM
Congratulation for this!

Simple and tight.

Just a question: i cut & paste your code in the Desktop sample (to have the dock as task bar) , every thing works fine but the tooltiptips.
It seems that onItemHover events is not received by menu item.
do you have an idea about this strange behaviour?

luc

hello2008
1 Jul 2009, 11:53 PM
Congratulation for this!

Simple and tight.

Just a question: i cut & paste your code in the Desktop sample (to have the dock as task bar) , every thing works fine but the tooltiptips.
It seems that onItemHover events is not received by menu item.
do you have an idea about this strange behaviour?

luc

Sounds interesting, so I did a test, put my attachment modified files (html for test and for css only changed the text color and removed text background image) into Desktop folder, working no problem, what you mentioned about tooltip is the image alt text, right? found works okay if you hover a little longer on the image item.

pachama
3 Jul 2009, 12:25 AM
Thanks to your response.

You're right. It works perfectly. I realize that it's not work if i put the "fisheye" div outside of the desktop div.

Duamarea
20 Aug 2009, 1:48 PM
omg man ive been wanting this so long im about 2 play with this for sure *sniff* *sniff* i love u

Mad_Clog
29 Oct 2009, 9:53 AM
Good stuff!
Any ETA on a vertical version? would be ace to include in the desktop.
Keep up the good work!

marques-l
9 Apr 2010, 7:06 AM
Hello thank you for this great UX !

i have an issue while putting the fisheye menu in the desktop example.
After page load all works fine but if i resize the browser and try to use the fisheye menu again, the "on mouse over" effect stop working.

Do you have a solution ?

Léo

marques-l
11 Apr 2010, 10:43 AM
Works with hello2008 files, thank you :)

a.labeau
21 Apr 2010, 7:34 AM
Hello everybody!

I'm using a fisheyeMenu for my application and I'd like to add dynamically one or more items in.:-?

Example :

"Click" on a red button -> add one item in my fisheyeMenu and now, I can see the new icon!

Is somebody can help me please?

Thanks.

hello2008
21 Apr 2010, 9:12 PM
Hello everybody!

I'm using a fisheyeMenu for my application and I'd like to add dynamically one or more items in.:-?

Example :

"Click" on a red button -> add one item in my fisheyeMenu and now, I can see the new icon!

Is somebody can help me please?

Thanks.

Sounds interesting, so I wrote a fisheyeMenu extension example which may be helpful for you.
click the top left button to see interaction and you can easily add your own codes base on this extension. :)

hello2008
21 Apr 2010, 9:19 PM
Works with hello2008 files, thank you :)

Glad to hear it's helpful for you :)

a.labeau
22 Apr 2010, 1:02 AM
hello2008
http://www.extjs.com/forum/images/misc/quote_icon.png Originally Posted by a.labeau http://www.extjs.com/forum/images/buttons/viewpost-right.png (http://www.extjs.com/forum/showthread.php?p=460137#post460137)
Hello everybody!

I'm using a fisheyeMenu for my application and I'd like to add dynamically one or more items in.:-?

Example :

"Click" on a red button -> add one item in my fisheyeMenu and now, I can see the new icon!

Is somebody can help me please?

Thanks.



Sounds interesting, so I wrote a fisheyeMenu extention example which may be helpful for you.
click the top left button to see interaction and you can easily add your own codes base on this extention. :)
Doesn't work! I don't see the fisheyeMenu. I'm looking for errors.

Anyway, thanks for your extention!

Axel

a.labeau
22 Apr 2010, 1:19 AM
It works! Thank you hello2008.:)

a.labeau
23 Apr 2010, 1:48 AM
I tried to add a "delete item" function in order to delete dynamically an item in the fisheye menu but It doesn't work.
Does anybody have a solution?

Thanks.

hello2008
26 Apr 2010, 2:42 AM
I tried to add a "delete item" function in order to delete dynamically an item in the fisheye menu but It doesn't work.
Does anybody have a solution?

Thanks.

I've updated my extension to show a demonstration to add/delete item, please have a try with my updated attachment.
http://www.extjs.com/forum/showthread.php?72667-Ext-Core-Ext.ux.FisheyeMenu&p=460360#post460360

a.labeau
26 Apr 2010, 10:52 AM
Thank you! good job!

1343066628
13 Sep 2010, 6:31 AM
Thanks to your response:)

matt64
29 Mar 2011, 4:47 AM
I need to run a javascript function in "url". Is this possible?

helloniko
29 Mar 2011, 11:10 PM
I need to run a javascript function in "url". Is this possible?

sure, you can use custom event, please have a reference from this example:
https://github.com/bluepower/Ext-Core-UX/blob/master/examples/FisheyeMenu/ext-fisheye-menu-top-left.html

matt64
30 Mar 2011, 8:03 AM
Thank You!
I solved this way:

url: 'Javascript: mifunction ();"
but I had to change the "_blank" to "_self"in the libraries because I opened a new window.

Thanks for your fast response as well. I solved my problem.

helloniko
31 Mar 2011, 8:22 AM
Thank You!
I solved this way:

url: 'Javascript: mifunction ();"
but I had to change the "_blank" to "_self"in the libraries because I opened a new window.

Thanks for your fast response as well. I solved my problem.

Glad to see you solved it by yourself, I still recommend to use custom event for your case. For example if you view the Desktop Fisheye demo (http://cz9908.com/showcase/?item=desktop-fisheye&p=1), you will find each fisheye item click will trigger some event rather than open a new window.

For target option, "_blank" is by default, but you can set it easily like this: {..., target: '_self' }
// Example object item:
{
text: 'some text',
imagePath: 'some image path',
url: 'some url (optional)',
tip: 'some tip (optional)',
target: 'target element (optional)'
}

matt64
1 Apr 2011, 7:20 AM
Your solution is more convenient, I will use it.
Thank You

prajeesh_bs
2 May 2011, 2:49 AM
i have created a fish eye menu using the code


var fm = new Ext.ux.FisheyeMenu({
renderTo : 'dataView',
itemWidth : 60,
items : [{
text: 'Map',
imagePath: 'images/table_48.png',
url: 'http://maps.google.com'
}, {
text: 'Photo',
imagePath: 'images/table_48.png',
url: 'http://picasaweb.google.com'
}]


});

How to add customer listener for the menu. When i click on a menu item i need to get the text of that menu item.
I tried

listeners: {
click: function () {
................
}

but this is not working
How we can do this. Can anybody paste a sample code

Peoplesking
28 Jan 2014, 6:11 AM
how do we implement Vertical FisheyeMenu in extjs