CSS classes of the wheel - Source code: wheelnav.style.js

CSS mode

Wheelnav provides predefined css classes for styling. First of all you must set the cssMode property to true.

JavaScript

wheelnav.cssMode = true;

HTML

<div id="divWheel" data-wheelnav data-wheelnav-cssmode"></div>

Important: You must use customized Raphael for css handling (download). Unfortunately VML doesn't support css classes, so if you want VML fallback you must use svg attributes for styling via javascript.

Navitem - JavaScript API

The available class names consist of these parts:

wheelnav-{id of wheelnav div}-{name of navitem}-{state of navitem}-{order of navitem}

• id of wheelnav div: in code samples it is "divWheel"
• name of navitem: available items: slice, title, line
• state of navitem: available states: basic, hover, selected
• order of navitem: from 0 to N

Id of wheelnav div

[class|=wheelnav-divWheel] {
    fill: #1572b6;
    stroke: white;
    stroke-width: 2px;
    cursor: pointer;
}

Name of navitem

[class|=wheelnav-divWheel-slice] {
    fill: #ddd;
    stroke: #555;
    stroke-width: 8px;
    cursor: pointer;
}
[class|=wheelnav-divWheel-line] {
    stroke: #555;
    stroke-width: 4px;
}
[class|=wheelnav-divWheel-title] > tspan {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 29px;
    cursor: pointer;
}
[class|=wheelnav-divWheel-title] {
    fill: #33a9dc;
    cursor: pointer;
}

State of navitem

[class|=wheelnav-divWheel-slice-basic] {
    fill: #1572b6;
    stroke: none;
}
[class|=wheelnav-divWheel-slice-hover] {
    fill: #33a9dc;
    stroke: none;
    cursor: pointer;
}
[class|=wheelnav-divWheel-slice-selected] {
    fill: #33a9dc;
    stroke: none;
}

Order of navitem

.wheelnav-divWheel-slice-basic-1 {
    fill: #1572b6;
    stroke: none;
}
.wheelnav-divWheel-slice-hover-1 {
    fill: #33a9dc;
    stroke: none;
    cursor: pointer;
}
.wheelnav-divWheel-slice-selected-1 {
    fill: #33a9dc;
    stroke: none;
}

Spreader - JavaScript API

.wheelnav-divWheel-spreader-in,
.wheelnav-divWheel-spreader-out {
    fill: #1572b6;
    stroke-width: 3px;
    cursor: pointer;
}
.wheelnav-divWheel-spreadertitle-in,
.wheelnav-divWheel-spreadertitle-in > tspan {
    fill: #FFF;
    cursor: pointer;
    stroke: #fff;
}
.wheelnav-divWheel-spreadertitle-out,
.wheelnav-divWheel-spreadertitle-out > tspan {
    fill: #333;
    cursor: pointer;
    stroke: #333;
}

Marker - JavaScript API

.wheelnav-divWheel-marker {
    stroke: #1572b6;
    stroke-width: 3px;
    fill: #33a9dc;
}