Permalink
Browse files

Project Pie-Menu jquery Plugin( alpha 1.0 )

  • Loading branch information...
1 parent 665b4b5 commit 80a49d85b1701041dedb10296723c0380578c888 @Nikesh committed May 9, 2012
Showing with 205 additions and 2 deletions.
  1. +2 −2 README.md
  2. +12 −0 cross.svg
  3. +2 −0 css/main.css
  4. BIN img/glyphicons-halflings.png
  5. +100 −0 index.html
  6. +21 −0 js/jquery-ui-1.8.20.custom.min.js
  7. +64 −0 js/jquery.menu.js
  8. +4 −0 js/jquery.min.js
  9. BIN usr.png
View
@@ -1,4 +1,4 @@
-Path-Menu
+Pie Menu
=========
-Simple configurable Path Menu written in Jquery and CSS3
+Simple configurable Pie Menu(like Path menu) written in Jquery and CSS3
View
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+<g>
+ <path fill="#FFFFFF" d="M20,11.402c0,0.453-0.367,0.82-0.822,0.82H0.82c-0.453,0-0.82-0.367-0.82-0.82V8.598
+ c0-0.454,0.367-0.821,0.82-0.821h18.357C19.633,7.776,20,8.144,20,8.598V11.402z"/>
+ <path fill="#FFFFFF" d="M8.598,20c-0.453,0-0.821-0.367-0.821-0.82V0.821c0-0.452,0.368-0.82,0.821-0.82h2.804
+ c0.453,0,0.82,0.368,0.82,0.82V19.18c0,0.453-0.367,0.82-0.82,0.82H8.598z"/>
+</g>
+</svg>
View

Large diffs are not rendered by default.

Oops, something went wrong.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Path Menu using jquery and CSS3 by Nikesh Hayaran</title>
+ <link rel="stylesheet" href="css/main.css">
+ <script src="js/jquery.min.js"></script>
+ <script src="js/jquery.menu.js"></script>
+ <script src="js/jquery-ui-1.8.20.custom.min.js"></script>
+ </head>
+ <body>
+ <div class='content'>
+ <h2>Radical Menu (like Path menu ) using jquery and CSS3 </h2>
+
+ <div class='demo-container'>
+ <div class='input-form'>
+
+ <form class="form-horizontal">
+ <fieldset>
+
+ <div class="control-group">
+ <label class="control-label" for="s_angle">Start Angle</label>
+ <div class="controls">
+ <div class='input-append'>
+ <input type="text" class="input-small" id='s_angle' required placeholder="Enter a Angle" pattern="[0-9]*" value='0'>
+ <span class="add-on">deg</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="control-group">
+ <label class="control-label" for="diff_angle">Displacement Angle</label>
+ <div class="controls">
+ <div class='input-append'>
+ <input type="text" class="input-small" id='diff_angle' required placeholder="Enter a Angle" pattern="[0-9]*" value='90'>
+ <span class="add-on">deg</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="control-group">
+ <label class="control-label" for="radius">Radius Of Circle</label>
+ <div class="controls">
+ <div class='input-append'>
+ <input type="text" class="input-small" id='radius' required placeholder="Enter a Radius" pattern="[0-9]*" value='100'>
+ <span class="add-on">deg</span>
+ </div>
+ </div>
+ </div>
+ <div class="control-group">
+ <div class="controls">
+ <div class="btn" class='btn btn-small ' id='submit_button'><i class="icon-refresh"></i> Refresh</a></div>
+ </div>
+ </div>
+ </fieldset>
+ </form>
+ </div>
+
+ <div class='demo'>
+ <p id='info'>Updated..</p>
+ <div id='outer_container' class="outer_container" >
+ <a class="menu_button" href="#" title="Toggle"><span>Menu Toggle</span></a>
+ <ul class="menu_option">
+ <li><a href="#"><span>Item</span></a></li>
+ <li><a href="#"><span>Item</span></a></li>
+ <li><a href="#"><span>Item</span></a></li>
+ <li><a href="#"><span>Item</span></a></li>
+ <li><a href="#"><span>Item</span></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class='drag'>* Draggable Element</div>
+ <div class='clearfix'></div>
+ </div>
+ <h5>* Please read README.md file for explanation.</h5>
+ </div>
+ <script>
+ function PieMenuInit(){
+ $('#outer_container').RadicalMenu({
+ 'starting_angel':$('#s_angle').val(),
+ 'angel_difference' : $('#diff_angle').val(),
+ 'radius':$('#radius').val(),
+ });
+ }
+ $(function() {
+ $("#submit_button").click(function() {reset(); });
+ $( "#outer_container" ).draggable();
+ PieMenuInit();
+
+ });
+ function reset(){
+ if($(".menu_button").hasClass('btn-rotate'))
+ $(".menu_button").trigger('click');
+
+ $("#info").fadeIn("slow").fadeOut("slow");
+ PieMenuInit();
+ }
+ </script>
+
+ </body>
+</html>

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,64 @@
+(function( $ ) {
+
+ $.fn.PieMenu = function(options) {
+ var angle,
+ delay_time,
+ ele_angle=[],
+ x_pos=[],
+ y_pos=[];
+
+ var settings = $.extend( {
+ 'starting_angel' : '0',
+ 'angel_difference' : '90',
+ 'radius':'200',
+ 'menu_element' : this.children('.menu_option').children(),
+ 'menu_button' : this.children('.menu_button'),
+ }, options);
+
+
+ angle = parseInt(settings.angel_difference)/(settings.menu_element.length-1);
+ delay_time = 1/(settings.menu_element.length-1);
+
+ function setPosition(val){
+ $(settings.menu_element).each(function(i,ele){
+ $(ele).css({
+ 'left' : (val==0)?0:y_pos[i],
+ 'top' : (val==0)?0:-x_pos[i],
+ });
+ });
+ }
+
+ $(settings.menu_button).unbind('click', clickHandler); //remove event if exist
+
+ var clickHandler = function() {
+ if($(this).parent().hasClass('active')){
+ setPosition(0);
+ $(this).parent().removeClass('active');
+ $(this).parent().addClass('inactive');
+
+ }else{
+ setPosition(1);
+ $(this).parent().addClass('active');
+ $(this).parent().removeClass('inactive');
+ }
+ $(this).toggleClass("btn-rotate");
+ };
+
+ $(settings.menu_button).bind('click', clickHandler);
+
+ return settings.menu_element.each(function(i,ele){
+ ele_angle[i] = (parseInt(settings.starting_angel) + angle*(i))*Math.PI/180;
+ x_pos[i] = (settings.radius * Math.sin(ele_angle[i]));
+ y_pos[i] = (settings.radius * Math.cos(ele_angle[i]));
+
+ $(ele).css({
+ '-webkit-transform': 'rotate('+(90-ele_angle[i]*180/Math.PI)+'deg)',
+ '-moz-transform': 'rotate('+(90-ele_angle[i]*180/Math.PI)+'deg)',
+ '-ms-transform': 'rotate('+(90-ele_angle[i]*180/Math.PI)+'deg)',
+ '-o-transform': 'rotate('+(90-ele_angle[i]*180/Math.PI)+'deg)',
+ 'transform': 'rotate('+(90-ele_angle[i]*180/Math.PI)+'deg)',
+ });
+ })
+
+ };
+})( jQuery );
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
BIN usr.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 80a49d8

Please sign in to comment.