Datasheet

Chapter 1: Enhancing Development with Dojo Core
Figure 1-3
Finally, it’s time to see a little bit of scripting make an appearance in the page:
<label for="fnum">Favorite Number</label><br />
<input name="fnum" id="fnum" type="text" length="15"
dojoType="dijit.form.TextBox" /><br />
<div dojoType="dijit.form.HorizontalSlider"
id="horiz1" name="horiz1" value="10"
maximum="100" minimum="0"
intermediateChanges="true" showButtons="false"
onChange="dojo.byId(‘fnum’).value=arguments[0]"
style="width:10em; height: 20px;">
</div>
</form>
</div>
</div>
</body>
</html>
If you missed the scripting, look for the
onChange
attribute of the
HorizontalSlider
widget. That small
bit of glue code copies updates of the widget as a number to the
TextBox
before it. Otherwise, the two
widgets used here aren’t much more complex than those found in the rest of the sample page. Take a
look at Figure 1-4 to see the end result.
Though it might seem strange to introduce a JavaScript framework mostly through HTML, this is a major
part of the Dojo magic. In the coming chapters, you’ll see that many aspects of Dojo can be used through
both declarative and programmatic means. You can do it all strictly through JavaScript, but you may
7