Pie menus in Javascript
Wanting to try out some of the cool new stuff in MooTools 1.2, I’ve written a radial/pie menu in Javascript.
Seeing as I’ll probably need one in the near future, I thought I might as well spend my time doing something useful.
Pie menus are actually quite useful. Shamelessly copied from Wikipedia:
Pie menus are faster and more reliable to select from than linear menus, because selection depends on direction instead of distance. The circular menu slices are large in size and near the pointer for fast interaction (see Fitts’ law). Experienced users use muscle memory without looking at the menu while selecting from it. Nested pie menus can efficiently offer many options, and some pie menus can pop up linear ones. Pie menus are shown only when requested, resulting in less distraction and clutter than toolbars and menu bars that are always shown.
You can check out a demo page (hastily put together with a full MooTools download uncompressed, eek) I’ve put up, as well as the source. You’ll probably need to remove one or two lines from the show/hide functions if you’re not building your MooTools download with Fx.Tween. The only other requirement(s) are the Array stuff, the Class stuff, as well as the CSS Selectors module.
I’ve also included proper event handling in the code, so you can have listeners for when the menu is popped up; eg:
var menu = new PieMenu('containerclass', 'menudiv');
menu.addEvent('onShown', function() { alert('Menu shown!'); });
Any improvements/comments/suggestions welcome!