JavaScript - jQuery UI: Extreme Form Makeover(slider widget)

Head First jQuery
(O'Reilly Media)
Ryan Benedetti(著), Ronan Cranley(著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox, Google Chrome(Webプラウザ)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc.(GUI) (Text Editor)
• JavaScript (プログラミング言語)

Head First jQuery(Ryan Benedetti(著)、Ronan Cranley(著)、O'Reilly Media)のChapter 10(jQuery UI: Extreme Form Makeover)、LONG EXERCISE(No. 5318))を解いてみる。

その他参考書籍

• Head First HTML and CSS
• Head First JavaScript Programming

LONG EXERCISE(No. 5318))

HTML%(BBEdit, Emacs)

<h3>Distance from Creature (in ft.):</h3>
<input type="text" id="distance" class="just_display" name="creture_distance"
       readonly="readonly"/>
<div id="slide_dist"></div>
<h3>Creature Weight (in lbs.):</h3>
<input type="text" id="weight" class="just_display" name="creature_weight"
       readonly="readonly" />
<div id="slide_weight"></div>
<h3>Creature Height (in ft.):</h3>
<input type="text" id="height" class="just_display" name="creature_height"
       readonly="readonly" />
<div id="slide_height"></div>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="my_scripts5318.js"></script>

JavaScript(BBEdit, Emacs)

$('#slide_dist').slider({
    value: 0,
    min:0,
    max:500,
    step: 10,
    slide: function(event, ui) {
        $('#distance').val(ui.value);
    }
});
$('#distance').val($('#slide_dist').slider('value'));

$('#slide_weight').slider({
    value: 0,
    min:0,
    max:5000,
    step: 5,
    slide: function(event, ui) {
        $('#weight').val(ui.value);
    }
});
$('#weight').val($('#slide_weight').slider('value'));

$('#slide_height').slider({
    value: 0,
    min:0,
    max:20,
    step: 1,
    slide: function(event, ui) {
        $('#height').val(ui.value);
    }
});
$('#height').val($('#slide_height').slider('value'));

Distance from Creature (in ft.):

Creature Weight (in lbs.):

Creature Height (in ft.):