Jump to Table of Contents

Example: Dial With Image Background

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.

  1. Remove some of the CSS styling on the elements we want to display as images.
  2. 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.8.0/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>

Examples

Examples That Use This Component