This example shows how to create a basic Dial widget.
Drag the handle, or click the ring, to set the value. When the handle has the focus, the following keys update its value: arrow keys, page up/down, home, and end. The action of these keys can be controlled via Dial's configuration attributes.
Creating a Dial
A Dial can be created easily and rendered into existing markup.
The Markup
Note: be sure to add the yui3-skin-sam classname to the
page's <body> element or to a parent element of the widget in order to apply
the default CSS skin. See Understanding Skinning.
<body class="yui3-skin-sam"> <!-- You need this skin class -->
The only markup requirement is an HTML element to contain the Dial.
<div id="demo"></div>
The JavaScript
Dial extends the Widget class, following the same pattern
as any widget constructor. As a result, it accepts a configuration object to
set the initial configuration for the widget.
After creating and configuring the new Dial,
call the render method on the Dial object, passing it
the selector for a container element.
This renders it into the container and makes it usable.
Some commonly used configuration attributes are shown below.
YUI().use('dial', function(Y) {
var dial = new Y.Dial({
min:-220,
max:220,
stepsPerRevolution:100,
value: 30
});
dial.render('#demo');
});
Complete Example Source
<!DOCTYPE HTML>
<html>
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<body class="yui3-skin-sam"> <!-- You need this skin class -->
<div id="demo"></div>
</body>
<script>
YUI().use('dial', function(Y) {
var dial = new Y.Dial({
min:-220,
max:220,
stepsPerRevolution:100,
value: 30
});
dial.render('#demo');
});
</script>
</html>