This example shows how to create a Dial widget using background images for the ring and the handle.
Creating a Dial With Images as Backgrounds
+ +A Dial can be created that has its presentation determined by background images.
+This can be done with CSS, providing the images can be contained within the dimensions of the Dial elements.
+
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 element to contain the Dial
<div id="demo"></div>+ + +
The JavaScript
+ +The same JavaScript can be used as in the basic Dial example.
+Dial extends the Widget class, following the same pattern
+as any widget constructor, accepting a configuration object to
+set the initial configuration for the widget.
After creating and configuring the new Dial,
+call the render method on your Dial object passing it
+the selector of a container object.
+This renders it in 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');
+
+});
+
+The CSS
+ +
+In this example we add an image of a ball bearing to the dial handle object's background, this is the class yui3-dial-handle.
We'll also add an image of a circle of radial lines to the background ring object. +To make these changes, we only need to do two things.
+ +-
+
- Remove some of the CSS styling on the elements we want to display as images. +
- Add the background URL to the image rule of the selectors of those objects as shown below. +
.yui3-skin-sam .yui3-dial-content .yui3-dial-handle{
+ background:url(../assets/dial/images/ball_bearing.png) no-repeat;
+ opacity:1; /* Normally the handle is not full opacity in non-VML case */
+}
+.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:url(../assets/dial/images/bkg_ring_of_lines.png) no-repeat scroll 0px 0px;
+}
+.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 the VML ovals in IE. */
+.yui3-skin-sam .yui3-dial-ring-vml v\:oval {
+ visibility:hidden;
+}
+/* Show the marker VML oval */
+.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-marker-vml v\:oval {
+ visibility:visible;
+}
+.yui3-skin-sam .yui3-dial-content .yui3-dial-ring-vml{
+ background:url(../assets/dial/images/bkg_ring_of_lines.png) no-repeat scroll 0px 0px;
+}
+.yui3-skin-sam .yui3-dial-content .yui3-dial-handle-vml{
+ background:url(../assets/dial/images/ball_bearing_8.png) no-repeat scroll 0px 0px;
+}
+.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button-vml {
+ background:url(../assets/dial/images/empty.png);
+}
+
+Complete Example Source
+ +<!DOCTYPE HTML>
+<html>
+<script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>
+
+<style>
+.yui3-skin-sam .yui3-dial-content .yui3-dial-handle{
+ background:url(../assets/dial/images/ball_bearing.png) no-repeat;
+ opacity:1; /* Normally the handle is not full opacity in non-VML case */
+}
+.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:url(../assets/dial/images/bkg_ring_of_lines.png) no-repeat scroll 0px 0px;
+}
+.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 the VML ovals in IE. */
+.yui3-skin-sam .yui3-dial-ring-vml v\:oval {
+ visibility:hidden;
+}
+/* Show the marker VML oval */
+.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-marker-vml v\:oval {
+ visibility:visible;
+}
+.yui3-skin-sam .yui3-dial-content .yui3-dial-ring-vml{
+ background:url(../assets/dial/images/bkg_ring_of_lines.png) no-repeat scroll 0px 0px;
+}
+.yui3-skin-sam .yui3-dial-content .yui3-dial-handle-vml{
+ background:url(../assets/dial/images/ball_bearing_8.png) no-repeat scroll 0px 0px;
+}
+.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button-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:-220,
+ max:220,
+ stepsPerRevolution:100,
+ value: 30
+ });
+ dial.render('#demo');
+
+});
+</script>
+</html>
+
+