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.