<div id="divWheel" data-wheelnav data-wheelnav-wheelradius="100" data-wheelnav-navangle="90" data-wheelnav-slicepath="DonutSlice" data-wheelnav-colors="#E34C26,#F06529" data-wheelnav-rotateoff> </div>
var wheel = new wheelnav("divWheel"); wheel.createWheel(["0", "1", "2", "3"]);
You can create the wheel by data-wheelnav-navitemtext or data-wheelnav-navitemicon or data-wheelnav-navitemimg attribute, one of them is required. The icon names come from raphael.icons.js. The data-wheelnav-titlewidth and data-wheelnav-titleheight properties supported by navitemicon and navitemimg.
Wheelnav processes the onmouseup event of div for navigateFunction, and inner anchor element for href navigation.
<div id="divWheel" data-wheelnav data-wheelnav-titlewidth="50" data-wheelnav-titleheight="50"> <div data-wheelnav-navitemicon="smile"></div> <div data-wheelnav-navitemtext="1" onmouseup="alert('Place your logic here.');"></div> <div data-wheelnav-navitemtext="2"><a href="#navitem"></a></div> <div data-wheelnav-navitemimg="../wheelnav_favicon.png"></div> </div>
var wheel = new wheelnav("divWheel");
<div id="divWheel" data-wheelnav data-wheelnav-spreader data-wheelnav-spreaderradius="50" data-wheelnav-spreaderpath="AntiStarSpreader"> <div data-wheelnav-navitemtext="0"></div> <div data-wheelnav-navitemtext="1"></div> <div data-wheelnav-navitemtext="2"></div> <div data-wheelnav-navitemtext="3"></div> </div>
var wheel = new wheelnav("divWheel");
<div id="divWheel" data-wheelnav data-wheelnav-marker data-wheelnav-markerpath="DropMarker"> <div data-wheelnav-navitemtext="0"></div> <div data-wheelnav-navitemtext="1"></div> <div data-wheelnav-navitemtext="2"></div> <div data-wheelnav-navitemtext="3"></div> </div>
var wheel = new wheelnav("divWheel");
<div id="divWheel" data-wheelnav data-wheelnav-wheelradius="100" data-wheelnav-slicepath="DonutSlice" data-wheelnav-colors="#E34C26,#F06529" data-wheelnav-keynav data-wheelnav-keynavonlyfocus data-wheelnav-keynavdowncode="65" data-wheelnav-keynavdowncodealt="83" data-wheelnav-keynavupcode="68" data-wheelnav-keynavupcodealt="87"> <div data-wheelnav-navitemtext="D"></div> <div data-wheelnav-navitemtext="S"></div> <div data-wheelnav-navitemtext="A"></div> <div data-wheelnav-navitemtext="W"></div> </div>
var wheel = new wheelnav("divWheel");
<div id="divWheel" data-wheelnav data-wheelnav-colors="#E34C26,#F06529" data-wheelnav-slicepath="DonutSlice" data-wheelnav-navangle="30" data-wheelnav-init> <div data-wheelnav-navitemtext=""></div> <div data-wheelnav-navitemtext=""></div> <div data-wheelnav-navitemtext=""></div> <div data-wheelnav-navitemtext=""></div> <div data-wheelnav-navitemtext=""></div> <div data-wheelnav-navitemtext=""></div> </div>
var wheel = new wheelnav("divWheel"); wheel.navItems[1].slicePathFunction = slicePath().PieSlice; wheel.navItems[3].slicePathFunction = slicePath().PieSlice; wheel.navItems[5].slicePathFunction = slicePath().PieSlice; wheel.createWheel();