JavaScript - jQuery UI: Extreme Form Makeover(slider widget, negativevalues, decimal intervals)

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)、SHARPEN YOUR PENCIL(No. 5361)を解いてみる。

その他参考書籍

• Head First HTML and CSS
• Head First JavaScript Programming

SHARPEN YOUR PENCIL(No. 5361)

HTML%(BBEdit, Emacs)

<h2>Latitude</h2>
<input type="text" id="latitude" class="just_display" name="creture_distance"
       readonly="readonly"/>
<div id="slide_latitude"></div>
<h2>Longitude</h2>
<input type="text" id="longitude" class="just_display" name="creature_weight"
       readonly="readonly" />
<div id="slide_longitude"></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_scripts5361.js"></script>

JavaScript(BBEdit, Emacs)

$('#slide_latitude').slider({
    value: 0,
    min: -90,
    max: 90,
    step: 0.00001,
    slide: function (event, ui) {
        $('#latitude').val(ui.value);
    }
});
$('#latitude').val($('#slide_latitude').slider('value'));
$('#slide_longitude').slider({
    value: 0,
    min: -180,
    max: 180,
    step: 0.00001,
    slide: function (event, ui) {
        $('#longitude').val(ui.value);
    }
});
$('#longitude').val($('#slide_longitude').slider('value'));

Latitude

Longitude