2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div class="intro">
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff <p>This example shows how to create a `Dial` widget using background images for the ring and the handle.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div class="example yui3-skin-sam">
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-image-background-source}}
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h3>Creating a Dial With Images as Backgrounds</h3>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>A `Dial` can be created that has its presentation determined by background images.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffThis can be done with CSS, providing the images can be contained within the dimensions of the `Dial` elements.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>The Markup</h4>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>The only markup requirement is an element to contain the `Dial`</p>
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-image-background-markup}}
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>The JavaScript</h4>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>The same JavaScript can be used as in the basic Dial example.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>`Dial` extends the `Widget` class, following the same pattern
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffas any widget constructor, accepting a configuration object to
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffset the initial configuration for the widget.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>After creating and configuring the new `Dial`,
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffcall the `render` method on your `Dial` object passing it
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniffthe selector of a container object.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffThis renders it in the container and makes it usable.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>Some commonly used configuration attributes are shown below.
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-image-background-script}}
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>The CSS</h4>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffIn this example we add an image of a ball bearing to the dial `handle` object's background, this is the class `yui3-dial-handle`.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>We'll also add an image of a circle of radial lines to the background ring object.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffTo make these changes, we only need to do two things. </p>
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff <li>Remove some of the CSS styling on the elements we want to display as images.</li>
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff <li>Add the background URL to the image rule of the selectors of those objects as shown below.</li>
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-image-background-css}}
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff<h3>Complete Example Source</h3>
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-image-background-complete}}