dial-image-background.mustache revision 2ce1b062532c7895a7093b67252dbaf239fbe6a7
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div class="intro">
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff 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">
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff 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>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div id="demo"></div>
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.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffYUI().use('dial', function(Y) {
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff var dial = new Y.Dial({
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff stepsPerRevolution:100,
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>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff <li>Remove some of the CSS styling on the elements we want to display as images.</li>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff <li>Add the background URL to the image rule of the selectors of those objects as shown below.</li>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff{{>dial-image-background-source-css}}