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.10.3/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>
+
+
+