-
Notifications
You must be signed in to change notification settings - Fork 8
jQuery Radial / Pie Menu Plugin
nirvanatikku/jQuery-Radmenu-Plugin
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
////////////////////////////////////////////////////////////////////////////////// // jQuery Radial Menu ////////////////////////////////////////////////////////////////////////////////// Latest version: v1.0.0 (14/May/2011) Author: Nirvana Tikku (ntikku@gmail.com, @ntikku) Documentation: http://www.tikku.com/jquery-radmenu-plugin Dual licensed under the MIT or GPL Version 2 licenses. ////////////////////////////////////////////////////////////////////////////////// The radmenu plugin is an implementation of a Radial Menu, also known as a Pie Menu. The plugin essentially distributes items in around the circumference of a circle. The items are considered 'locked' whilst the items can be rotated. The menu provides a rotation method, enabling a 'wagon-wheel' style interface, via utilizing CSS3. The radmenu can be brought up in any way by extending effects, and can be rotated in varying directions. The items can also be shuffled up. The menu can be scaled inward or outward, and can be brought up using any given selectEvent (click, mouseover, doubleclick, custom etc..). The plugin is initialized with the following properties: var defaults = { listClass: "list", itemClass: "item", activeItemClass: "active", selectEvent: null, onSelect: function($selected){}, radius: 10, initialScale: 1, angleOffset: 0, centerX: 0, centerY: 0, animSpeed: 500, animEasing: "swing", scaleAnimSpeed: 0, scaleAnimEasing: "swing", scaleAnimOpts: {}, afterAnimation: function($m){}, onShow: function($items){$items.show();}, onHide: function($items){$items.hide();}, onNext: function($items){return true;}, onPrev: function($items){return true;}, onScaleItem: function($item, scaleFactor, coords){}, rotate: false, getRotation: function(degrees, index, numItems){return degrees;} }; The above defaults can be overridden during plugin initialization. The plugin provides the following controls: jQuery("#radial_menu").radmenu("show"); jQuery("#radial_menu").radmenu("show", function(items){ items.fadeIn(1000); }); jQuery("#radial_menu").radmenu("hide"); jQuery("#radial_menu").radmenu("next"); jQuery("#radial_menu").radmenu("prev"); jQuery("#radial_menu").radmenu("shuffle"); jQuery("#radial_menu").radmenu("select"); jQuery("#radial_menu").radmenu(0); jQuery("#radial_menu").radmenu("scale", 1.5); jQuery("#radial_menu").radmenu("items"); jQuery("#radial_menu").radmenu("opts"); jQuery("#radial_menu").radmenu("destroy"); Note: Rotation enables the items within the radmenu to be used in a wagon wheel type of interface. The items are rotated via performing transforms. The implementation works on the following (currently considered modern) browsers: Mozilla Firefox 3.5+, Safari, Google Chrome, Internet Explorer 9+, Opera 11+ ////////////////////////////////////////////////////////////////////////////////// To minify: java -jar compiler.jar --js=jQuery.radmenu.js > jQuery.radmenu.min.js //////////////////////////////////////////////////////////////////////////////////
About
jQuery Radial / Pie Menu Plugin
Resources
Stars
Watchers
Forks
Packages 0
No packages published