wheelnav.js - spinning ever | documentation

Navitem basics

navItems

navItem

navSlice

navLine

navTitle

navItems
Wheelnav contains a zero based navItems array. You can override properties of a navItem before createWheel().

wheel = new wheelnav('wheelDiv');
wheel.wheelRadius = 100;
wheel.maxPercent = 1.6;
wheel.slicePathFunction = slicePath().MenuSlice;
wheel.initWheel(["item", "slice", "line", "title"]);
wheel.navItems[0].slicePathFunction = slicePath().MenuSliceWithoutLine;
wheel.createWheel();

After createWheel() is called, you can register callback functions to be triggered by specific SVG DOM events or the internal navigateFunction.

wheel.navItems[0].navigateFunction = function () { alert('Hello wheel!'); };
wheel.navItems[1].navSlice.mousedown(function () { alert('Hello navSlice!'); });
wheel.navItems[2].navLine.mouseover(function () { alert('Hello navLine!'); });
wheel.navItems[3].navTitle.mouseup(function () { alert('Hello navTitle!'); });

navItem
The navItem created by slicePathFunction, this stores svg data for navSlice, navLine and navTitle.
Every navItem stores his itemIndex and can be selected or hovered state.

!!! Source code !!!
navItem.itemIndex = itemIndex from wheelnav;
navItem.selected = false;
navItem.hovered = false;

navSlice
The navSlice is a svg path, created by slicePathString property.
You can override background color of navSlice with fillAttr.

!!! Source code !!!
navItem.navSlice = navItem.wheelnav.raphael.path(slicePath.slicePathString);
navItem.fillAttr = { fill: "#CCC" };

navLine
The navLine is a svg path, created by linePathString property.

!!! Source code !!!
navItem.navLine = navItem.wheelnav.raphael.path(slicePath.linePathString);

navTitle
The navTitle can be text, svg path, image and positioned by titlePosX and titlePosY properties.
You can override font of text with titleFont and set the width and height of an image or path with titleWidth and titleHeight properties.

!!! Source code !!!
//Title defined by path
navItem.navTitle = navItem.wheelnav.raphael.path(currentTitle.path);
//Title defined by image
navItem.navTitle = navItem.wheelnav.raphael.image(currentTitle.title, slicePath.titlePosX, slicePath.titlePosY);
navitem.titleWidth = 32;
navitem.titleHeight = 32;

//Title defined by text
navItem.navTitle = navItem.wheelnav.raphael.text(slicePath.titlePosX, slicePath.titlePosY, currentTitle.title);
navItem.titleFont = '100 24px Impact, Charcoal, sans-serif';

Navitem attributes

default

basic

hover

select

Here is the default wheel.
Default basic, hovered, and selected attributes.
You can use null in createWheel/initWheel methods for an empty navItem.

basic attributes
Every navItem element has an Attr property.

hover attributes
You can set attributes over hovered state.

selected attributes
You can set attributes over selected state.

Navitem animations

default

animate

path

transform

percent

Navigation item of the wheel - Source code: wheelnav.navItem.js

Navitem basics

navItems
Wheelnav contains a zero based navItems array. You can override properties of a navItem before createWheel().

After createWheel() is called, you can register callback functions to be triggered by specific SVG DOM events or the internal navigateFunction.

navItem
The navItem created by slicePathFunction, this stores svg data for navSlice, navLine and navTitle.
Every navItem stores his itemIndex and can be selected or hovered state.

navSlice
The navSlice is a svg path, created by slicePathString property.
You can override background color of navSlice with fillAttr.

navLine
The navLine is a svg path, created by linePathString property.

navTitle
The navTitle can be text, svg path, image and positioned by titlePosX and titlePosY properties.
You can override font of text with titleFont and set the width and height of an image or path with titleWidth and titleHeight properties.

Navitem attributes

Here is the default wheel.
Default basic, hovered, and selected attributes.
You can use null in createWheel/initWheel methods for an empty navItem.

basic attributes
Every navItem element has an Attr property.

hover attributes
You can set attributes over hovered state.

selected attributes
You can set attributes over selected state.

Navitem animations

Here is the default wheel.
Default animation, path, transform and percent.

animate
You can set the number of milliseconds for animation to run and the easing type.

path
The path of a navItem can be animated on hover and selection.
The slicePath class contains some default paths.

transform
The transformation of a navItem can be animated on hover and selection.
The sliceTransform class contains some default transforms.

percent
The percent of a navItem can be animated on hover and selection.

Navigation item of the wheel - Source code: wheelnav.navItem.js

Navitem basics

navItems Wheelnav contains a zero based navItems array. You can override properties of a navItem before createWheel().

After createWheel() is called, you can register callback functions to be triggered by specific SVG DOM events or the internal navigateFunction.

navItem The navItem created by slicePathFunction, this stores svg data for navSlice, navLine and navTitle. Every navItem stores his itemIndex and can be selected or hovered state.

navSlice The navSlice is a svg path, created by slicePathString property. You can override background color of navSlice with fillAttr.

navLine The navLine is a svg path, created by linePathString property.

navTitle The navTitle can be text, svg path, image and positioned by titlePosX and titlePosY properties. You can override font of text with titleFont and set the width and height of an image or path with titleWidth and titleHeight properties.

Navitem attributes

Here is the default wheel. Default basic, hovered, and selected attributes. You can use null in createWheel/initWheel methods for an empty navItem.

basic attributes Every navItem element has an Attr property.

hover attributes You can set attributes over hovered state.

selected attributes You can set attributes over selected state.

Navitem animations

Here is the default wheel. Default animation, path, transform and percent.

animate You can set the number of milliseconds for animation to run and the easing type.

path The path of a navItem can be animated on hover and selection. The slicePath class contains some default paths.

transform The transformation of a navItem can be animated on hover and selection. The sliceTransform class contains some default transforms.

percent The percent of a navItem can be animated on hover and selection.

navItems
Wheelnav contains a zero based navItems array. You can override properties of a navItem before createWheel().

navItem
The navItem created by slicePathFunction, this stores svg data for navSlice, navLine and navTitle.
Every navItem stores his itemIndex and can be selected or hovered state.

navSlice
The navSlice is a svg path, created by slicePathString property.
You can override background color of navSlice with fillAttr.

navLine
The navLine is a svg path, created by linePathString property.

navTitle
The navTitle can be text, svg path, image and positioned by titlePosX and titlePosY properties.
You can override font of text with titleFont and set the width and height of an image or path with titleWidth and titleHeight properties.

Here is the default wheel.
Default basic, hovered, and selected attributes.
You can use null in createWheel/initWheel methods for an empty navItem.

basic attributes
Every navItem element has an Attr property.

hover attributes
You can set attributes over hovered state.

selected attributes
You can set attributes over selected state.

Here is the default wheel.
Default animation, path, transform and percent.

animate
You can set the number of milliseconds for animation to run and the easing type.

path
The path of a navItem can be animated on hover and selection.
The slicePath class contains some default paths.

transform
The transformation of a navItem can be animated on hover and selection.
The sliceTransform class contains some default transforms.

percent
The percent of a navItem can be animated on hover and selection.