HTML tags of the wheel - Source code: wheelnav.parse.js

Basics - JavaScript API

Wheelnav can be initialized via HTML5 data attributes. The data-wheelnav attribute is required. The supported attributes are in code samples below.

HTML

<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>

JavaScript

var wheel = new wheelnav("divWheel");
wheel.createWheel(["0", "1", "2", "3"]);

Navitem - JavaScript API

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.

HTML

<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>

JavaScript

In this case you don't need to call createWheel.

var wheel = new wheelnav("divWheel");

Spreader - JavaScript API

HTML

<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>

JavaScript

var wheel = new wheelnav("divWheel");

Marker - JavaScript API

HTML

<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>

JavaScript

var wheel = new wheelnav("divWheel");

Key navigation - JavaScript API

Wheelnav can be handle keydown event via HTML5 data attributes. The data-wheelnav-keynav attribute is required.

HTML

<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>

JavaScript

var wheel = new wheelnav("divWheel");

Need more? - Documentation

You can set further properties on parsed wheel with data-wheelnav-init attribute.

HTML

<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>

JavaScript

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();