dial-interactive.mustache revision fe0e87d09da3f6bc93c56f8cf194455b06039fd4
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div class="intro">
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>This `Dial` widget example shows the following:</p>
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff <li>A demonstration of a large value range combined with fine increment control.</li>
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff <li>Setting UI strings before rendering</li>
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff <li>Setting configuration attributes</li>
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff <li>Construction-time event subscription allowing Dial to control an interactive UI</li>
fe0e87d09da3f6bc93c56f8cf194455b06039fd4Jeff Conniff <li>Calling one of Dial's value change methods from the click of a link. `<a>Hubble</a>`</li>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>Notice the Dial can traverse the entire 6,000+ pixels of the scene height, but by pulling the handle
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Connifffarther away from the Dial's center while rotating, the user can get 1 pixel movements, without strain.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffAfter the dial has focus, the following keys also opperate the Dial, arrow up/down/left/right, page up/down, home, end. The action of these keys can be controlled via <a href="index.html#attributes" title="YUI 3: Dial">Dial's configuration attributes</a>.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<div class="example yui3-skin-sam">
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff {{>dial-interactive-source}}
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h3>Making a Dial Drive an Interactive UI</h3>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>The `valueChange` event of a `Dial` can be the means of controlling other UI displayed on a page.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>The Markup</h4>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>The only markup requirement for the `Dial` itself is an element to contain the Dial.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffThe rest of the markup and CSS in this example is just for the Hubble telescope visualization.
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-basic-markup}}
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h4>The JavaScript</h4>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>This example builds on previous examples by showing how to modify the visible UI strings before the dial renders.</p>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<p>During instatiation of a Dial, several configuration attributes can be set (see the code-block below); note the construction-time event subscription:</p>
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-interactive-script}}
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff<h5>The Event Handler</h5>
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffPreceding the code that instantiates the `Dial` widget, declare the event handler.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffWe can use the value of the `Dial` to do whatever we want, but
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniffin this example the event handler updates the CSS `top` property of the pictorial scene `<div id="scene">` of Hubble's relationship to Earth.
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff ConniffThis scene is moved up or down inside a framing element `<div class="viewframe">` that has CSS `overflow:hidden;`.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffThe reason `e.newVal` is multiplied by `10` is so that the scene moves 10px for every 1 kilometer of the `Dial`'s value.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff* The Dial's valueChange event is passed to this.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff* sets the CSS top value of the pictoral scene of the earth to the hubble.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff* This scene is an absolute positioned div inside another div with
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff Conniff* overflow set to hidden.
2ce1b062532c7895a7093b67252dbaf239fbe6a7Jeff ConniffsetSceneY = function(e) {
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff Y.one('#scene').setStyle('top', (originY + (e.newVal * 10)) + 'px');
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff<h3>Complete Example Source</h3>
5cdd1d5bb84599836fa8ad9e8ced04ff5bceabccJeff Conniff{{>dial-interactive-complete}}