Matt Snider![]()
The RadialMenu is an Overlay based widget that opens the around a point somewhere on the page (usually the viewport center). It is highly customizable and can use existing elements or build itself from configured content on the fly. The goal of the RadialMenu is to showcase a new way to navigate through a website, and break out of the traditional menu techniques. The RadialMenu subscribable events whenever a RadialMenuPanel is clicked on. The developers can specify the number of panels, the diameter of the circle, if a mask should be used whenever the menu is shown. Additionally, the RadialMenu supports keyboard events (arrow keys, enter, and escape), so that it is more accessible.
I have not JavaDoc'ed this widget yet, but you can find a full writeup on my blog at http://www.mattsnider.com/widget/yui-3-radial-menu-gallery-component/
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>YUI({
//Last Gallery Build of this module
gallery: 'gallery-2010.03.29-18-07'
}).use('gallery-radialmenu', function(Y) {
var radialMenu = new Y.RadialMenu({diameter: 200, panels: [
new Y.RadialMenuPanel({content: '0'}),
new Y.RadialMenuPanel({content: '1'}),
new Y.RadialMenuPanel({content: '2'}),
new Y.RadialMenuPanel({content: '3'}),
new Y.RadialMenuPanel({content: '4'}),
new Y.RadialMenuPanel({content: '5'})
], useMask: true});
radialMenu.render();
// if you are including the optional plugin and animation components
radialMenu.plug(Y.RadialMenuAnim, {animType: 'rotate', easingOut: Y.Easing.easeOut, easingIn: Y.Easing.easeIn});
radialMenu.on('panelClicked', function(e) {
// put code to execute when any panel is clicked here
});
radialMenu.on('panelClicked1', function(e) {
// put code to execute when any the panel at index 1 is click (indexes start at 0)
});
Y.one('myTriggerNode').on(function(e) {
radialMenu.show();
});
});| Subject | Author | Date |
|---|---|---|
| clicke event handler does not work | twardon | 06/15/11 |
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info