This example shows how to create a Dial widget using an image
+that surrounds (or is larger than) the Dial.
Creating a Dial and Surrounding It With a Larger Image
+ +Some cases may require a Dial that has an image surrounding it such as tick marks, units, or other
+visual enhancements. These images can be larger than the ring of the dial and therefore may not fit as a background image.
+To provide for this use case, an extra image object will need to be added to the DOM.
+In this example we'll simulate the climate control on an car dashboard. +The image we'll add contains two curved wedges of color, blue and red, that wrap around the dial, +signifying the temperature of air conditioning or heat. +
+ +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 a div to contain the Dial.
<div id="demo"></div>+ + +
The JavaScript
+ +The same JavaScript can be used as in the basic Dial example, with a bit of +extra code to add the image object.
+ +Some commonly used configuration attributes are shown below.
+This example also shows how to modify the visible UI strings before the Dial renders.
YUI().use('dial', function(Y) {
+
+ var dial = new Y.Dial({
+ min: -90,
+ max: 90,
+ stepsPerRevolution: 200,
+ value: 0,
+ diameter: 100
+ });
+ //Setting visible HTML strings before Dial renders.
+ dial.set('strings',{'label':'Climate:', 'resetStr':'Off', 'tooltipHandle':'Drag for cool or heat.'});
+ dial.render("#demo");
+
+});
+
+
+
+Inserting the Image
+After rendering the Dial, we create and insert the image object.
//Create an image node.
+var im = Y.Node.create('<img src="http://yuilibrary.com/yui/docs/assets/dial/images/cold_hot.png"/>');
+
+//Position it absolutely to the correct spot depending on it's size.
+im.setStyles({'position':'absolute', 'top':'-3px', 'left':'-9px'});
+
+//Insert it in the DOM.
+//The north-mark is the first object inside the ring.
+//depending on the image, you may need to insert it before the yui3-dial-label
+Y.one('.yui3-dial-north-mark').insert(im, 'before');
+
+
+The CSS
++In the CSS, we're just cleaning out the visible styles of the ring and the +center button to allow for the images. +
+ +Complete Example Source
+<!DOCTYPE HTML>
+<html>
+<script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>
+
+<style>
+/* Adding some margin to allow for the image */
+.yui3-dial{
+ margin:0 0 20px 20px;
+}
+
+/* Here, we are just cleaning out the visible
+styles of the ring and the center button
+to allow for the images. */
+
+/* Remove visible styles of the ring */
+.yui3-skin-sam .yui3-dial-content .yui3-dial-ring{
+ box-shadow: none;
+ -moz-border-radius: none;
+ -webkit-border-radius: none;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ background:none;
+}
+
+/* Remove visible style of the center button */
+.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button {
+ box-shadow: none;
+ -moz-border-radius: none;
+ -webkit-border-radius: none;
+ -moz-box-shadow: none;
+ background:none;
+}
+
+/* Hide all VML ovals in IE. */
+.yui3-skin-sam .yui3-dial-ring-vml v\:oval {
+ visibility:hidden;
+}
+
+/* Show the marker and the handle ovals */
+.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-marker-vml v\:oval,
+.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-handle-vml v\:oval {
+ visibility:visible;
+}
+
+/* Fill center button and ring so their backgrounds accept events in IE */
+.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button-vml,
+.yui3-skin-sam .yui3-dial-content .yui3-dial-ring-vml{
+ background:url(../assets/dial/images/empty.png);
+}
+</style>
+
+<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: -90,
+ max: 90,
+ stepsPerRevolution: 200,
+ value: 0,
+ diameter: 100
+ });
+ dial.set('strings',{'label':'Climate:', 'resetStr':'Off', 'tooltipHandle':'Drag for cool or heat.'});
+ dial.render('#demo');
+
+ var im = Y.Node.create('<img src="http://yuilibrary.com/yui/docs/assets/dial/images/cold_hot.png"/>');
+ im.setStyles({'position':'absolute', 'top':'-3px', 'left':'-9px'});
+ Y.one('.yui3-dial-north-mark').insert(im, 'before');
+
+});
+</script>
+</html>
+
+