WebPie

Description

WebPie is a pie menu for web pages. Its appearance is very similar to PieDock. Image and animation quality do depend heavily on browser and operating system.

Download

Latest version: WebPieIcon.js and WebPie.js

Those files are uncompressed. To get production libraries, use a compressor.

The development version is available on GitHub.
You may easily clone the project by running:

$ git clone git://github.com/markusfisch/WebPie

How to use

1. Place both files somewhere in your web project and add those two lines to the <head/> element of your web page:

   <script type="text/javascript"
   	src="path/to/WebPieIcon.js"></script>
   <script type="text/javascript"
   	src="path/to/WebPie.js"></script>

2. Next you'll have to set up the menu, for example:

   <script type="text/javascript">
   <!--
   
   var p = new WebPie( {
   	icons: [
   		new WebPieIcon(
   			"path/to/icon.png",
   			function(){ alert( "First" ); } ),
   		new WebPieIcon(
   			"path/to/icon.png",
   			function(){ alert( "Second" ); } ),
   		new WebPieIcon(
   			"path/to/icon.png",
   			function(){ alert( "Third" ); } )
   		] } );
   
   p.create();
   
   -->
   </script>

   For more information browse the script files. For a full sample see DemoWebPie.js.

3. If you want to extend WebPie, you may want to subclass it. For example:

   <script type="text/javascript">
   <!--
   
   WebPie2.prototype = new WebPie();
   WebPie2.prototype.constructor = WebPie2;
   
   function WebPie2( p )
   {
   	WebPie.call( this, p );
   }
   
   WebPie2.prototype.preShow = function( e )
   {
   	// do here what you want to do before the menu opens
   
   	return true;
   }
   
   var p = new WebPie2( {
   	icons: [
   		new WebPieIcon(
   			"path/to/icon.png",
   			function(){ alert( "First" ); } ),
   		new WebPieIcon(
   			"path/to/icon.png",
   			function(){ alert( "Second" ); } ),
   		new WebPieIcon(
   			"path/to/icon.png",
   			function(){ alert( "Third" ); } )
   		] } );
   
   p.create();
   
   -->
   </script>

Compatibilty

Works with the latest versions of Opera, Firefox, Chrome, Safari and Internet Explorer.

License

WebPie is licensed under the MIT license.