zikes-circlemenu

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Circle Menu</title> <style type="text/css"> body { font-family: Helvetica, Arial, FreeSans, sans-serif; } code { font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; background:#eee; border:1px solid #ccc; padding:0 5px; color:#444; } code.block { padding:5px; display:block; white-space:pre; margin:1em; overflow:auto; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } details { padding:1em 1em 1em 2em; background:#E0E0E0; margin-bottom:1em; } summary { margin-left: -1em; } summary h3{ margin:0; display:inline-block; } h2 { border-top: 4px solid #eee; } h1 + p { margin-right: 3em; } </style> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-27581645-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <a href="https://github.com/Zikes/circle-menu"> <img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /> </a> <h1>Circle Menu</h1> <p>A customizable jQuery plugin that emulates the menu in the <a href="http://path.com">Path</a> application. Includes a selection animation and various animation options for opening and closing the menu.</p> <p><strong> <a href="http://zikes.github.com/circle-menu/examples/">See it in action.</a> </strong></p> <h2>Author</h2> <p>Jason Hutchinson (<a href="mailto:zikes@zikes.me">zikes@zikes.me</a>)</p> <h2>How to Use</h2> <p><a href="https://raw.github.com/Zikes/circle-menu/master/jQuery.circleMenu.js">Download</a> and include the JS file in your page.</p> <p>Create a list, with the first list item representing the icon at the center of the menu.</p> <code class="block"><ul> <li><a href="#">+</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </code> <p>The Javascript:</p> <code class="block">$('ul').circleMenu({ item_diameter: 40, circle_radius: 100, direction: 'bottom-right' }); </code> <h2>Options</h2> <details> <summary><h3>angle</h3></summary> <p>Default: <code>{start: 0, end: 90}</code></p> <p>An object specifying the position of the items in relation to the center, measured in degrees where 0/360 are on the right and angle travels in a clockwise direction. An alternative to the <code>direction</code> option, if you want more control.</p> <p><strong>Example:</strong></p> <code class="block">$('ul').circleMenu({angle:{start:260, end:280}});</code> </details> <details> <summary><h3>circle_radius</h3></summary> <p>Default: <code>80</code></p> <p>The radius of the circle that determines the distance of the items from the center.</p> <p><strong>Example:</strong></p> <code class="block">$('ul').circleMenu({circle_radius:80});</code> </details> <details> <summary><h3>delay</h3></summary> <p>Default: <code>1000</code></p> <p>When the menu is triggered on hover, the delay is the amount of time before the items will move back in to the center, meaured in milliseconds.</p> <p><strong>Example:</strong></p> <code class="block">$('ul').circleMenu({delay:500}); // a short delay</code> </details> <details> <summary><h3>direction</h3></summary> <p><strong>Options:</strong> <code>top</code> | <code>right</code> | <code>bottom</code> | <code>left</code> | <code>top-right</code> | <code>top-left</code> | <code>bottom-right</code> | <code>bottom-left</code> | <code>top-half</code> | <code>right-half</code> | <code>bottom-half</code> | <code>left-half</code> | <code>full</code></p> <p>Default: <em>none</em></p> <p>The direction of the items in relation to the center. <code>top</code> will place the items above the center, in a 90 degree semicircle centered upwards. <code>top-half</code> will create a full 180 degree semicircle. <code>full</code> will create a full 360 degree circle, with the first item appearing at the top.</p> <p><strong>Example:</strong></p> <code class="block">$('ul').circleMenu({direction:'bottom-right'});</code> </details> <details> <summary><h3>item_diameter</h3></summary> <p>Default: <code>30</code></p> <p>The diameter of each item, in pixels. Used to set the CSS properties of each item including width, height, and border-radius.</p> <p><strong>Example:</strong></p> <code class="block">$('ul').circleMenu({item_diameter:30});</code> </details> <details> <summary><h3>speed</h3></summary> <p>Default: <code>500</code></p> <p>The animation speed, in milliseconds. The number given is the total amount of time it will take for the items to move in or out from the center.</p> <p><strong>Example:</strong></p> <code class="block">$('ul').circleMenu({speed:1000});</code> </details> <details> <summary><h3>step_in</h3></summary> <p>Default: <code>-20</code></p> <p>The number of milliseconds between each item moving in to the center when the menu closes. A negative value will cause the menu to close in reverse, starting with the last item.</p> <p><strong>Example:</strong></p> <code class="block">$('ul').circleMenu({step_in:60});</code> </details> <details> <summary><h3>step_out</h3></summary> <p>Default: <code>20</code></p> <p>The number of milliseconds between each item moving out from the center when the menu opens. A negative value will cause the menu to open in reverse, starting with the last item.</p> <p><strong>Example:</strong></p> <code class="block">$('ul').circleMenu({step_out:60});</code> </details> <details> <summary><h3>transition_function</h3></summary> <p><strong>Options:</strong> <code>ease</code> | <code>linear</code> | <code>ease-in</code> | <code>ease-out</code> | <code>ease-in-out</code> | <code>cubic-bezier(n,n,n,n)</code></p> <p>Default: <code>ease</code></p> <p>The CSS timing function used to control the open/close animation.</p> <p><strong>Example:</strong></p> <code class="block">$('ul').circleMenu({'transition_function':'linear'});</code> </details> <details> <summary><h3>trigger</h3></summary> <p><strong>Options:</strong> <code>hover</code> | <code>click</code> | <code>none</code></p> <p>Default: <code>hover</code></p> <p>How the menu is triggered to open and close, whether by hovering over the center item or clicking on it.</p> <p><strong>Example:</strong></p> <code class="block">$('ul').circleMenu({trigger:'click'});</code> </details> <h2>Events</h2> <p>The following are events triggered by the menu.</p> <details> <summary><h3>close</h3></summary> <p>Trigged when the menu closes.</p> <p><strong>Examples:</strong></p> <code class="block">$('ul').circleMenu({close:function(){}});</code> <code class="block">$('ul').on('circleMenu-close',function(){});</code> </details> <details> <summary><h3>init</h3></summary> <p>Triggered when the menu is initialized.</p> <p><strong>Examples:</strong></p> <code class="block">$('ul').circleMenu({init:function(){}});</code> <code class="block">$('ul').on('circleMenu-init',function(){});</code> </details> <details> <summary><h3>open</h3></summary> <p>Triggered when the menu opens.</p> <p><strong>Examples:</strong></p> <code class="block">$('ul').circleMenu({open:function(){}});</code> <code class="block">$('ul').on('circleMenu-open',function(){});</code> </details> <details> <summary><h3>select</h3></summary> <p>Triggered when an item is selected. Passes the jQuery-wrapped item element as the second argument to the function provided, after the jQuery event object.</p> <p><strong>Examples:</strong></p> <code class="block">$('ul').circleMenu({select:function(evt,item){}});</code> <code class="block">$('ul').on('circleMenu-select',function(evt,item){});</code> </details> <h2>Commands</h2> <p>The following commands may be used to manipulate the menu once it has been initialized.</p> <details> <summary><h3>close</h3></summary> <p>Closes the menu</p> <p><strong>Example:</strong></p> <code class="block">$('ul').circleMenu('close');</code> </details> <details> <summary><h3>init</h3></summary> <p>Re-intializes the menu. Handy for use after a new item has been added.</p> <p><strong>Example:</strong></p> <code class="block">$('ul').append($('<li><a href="#">New</a></li>')).circleMenu('init');</code> </details> <details> <summary><h3>open</h3></summary> <p>Opens the menu</p> <p><strong>Example:</strong></p> <code class="block">$('ul').circleMenu('open');</code> </details> <h2>Styling</h2> <p>Classes are applied and removed as appropriate to represent the current state of the menu.</p> <details> <summary><h3>ul.circleMenu-closed</h3></summary> <p>The menu is currently closed.</p> <p><strong>Example:</strong></p> <code class="block">ul.circleMenu-closed {background-color: red;}</code> </details> <details> <summary><h3>ul.circleMenu-open</h3></summary> <p>The menu is currently open.</p> <p><strong>Example:</strong></p> <code class="block">ul.circleMenu-open {background-color: green;}</code> </details> <h2>License</h2> <p>DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE</p> <p>Version 2, December 2004</p> <p>Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed.</p> <p>DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION</p> <ol start="0"><li>You just DO WHAT THE FUCK YOU WANT TO.</li></ol> </body> </html>