• Register
  • Log In
  • Home
  • Quick Start
    • Configurator
    • Download YUI 3
  • Documentation
    • User Guides
    • Examples
    • API Docs
    • Environments
    • Tutorials
  • Community
    • Gallery
    • Blog
    • Forums
    • YUI Theater
    • Calendar
  • Contribute
    • YUI on GitHub »
    • File a Ticket
    • View Tickets
    • Dashboard
  • Other Projects
    • Shifter »
    • Yogi »
    • YUI 2
    • YUI Doc »
    • YUI Test
    • YUI Website
    • YUI Compressor »
    • YUI Builder »
    • YUI PHP Loader
    • Grid Builder »
    • Skin Builder »
  • YUI
  • >
  • Community
  • >
  • Gallery

Gallery

Modules

  • Home
  • Featured
  • Popular
  • New
  • All

Documentation

  • Yogi Documentation
  • Shifter Documentation
  • Developer Guide
  • Module Setup

Tag Cloud

Context Navigation

    YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

    Radial Menu (gallery-radialmenu) on cdn

    Last Updated: 03/22/10
    + 0 -

    Matt Snider

    YUI Contributor

    See 2 more by this user.

    Created: 03/20/10
    Last CDN Push: 03/29/10
    Build Tag: gallery-2010.03.29-18-07
    Project: YUI 3
    License: YUI BSD
    YUI Version: 3.0.0
    Free for use.

    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.

    • Tags:
    • matt.snider
    • Download
    • Docs
    • Homepage
    • Bugs
    • Source
    • Example
    • Forum
    • History

    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/

    Code Sample

    <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();
    });
     
     
    });

    Forum Posts

    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