JavaScriptを使ったスライダーは、ライブラリにまとめられたものから生のJavaScriptまで数多くありますが、今回はjQuery UIのスライダを使用することにしました。
このスライダーは、yonchangeイベントを監視するだけでは操作中の変化を検出できません。マウスドラッグによる操作を終えてはじめてonchangeが発行されるため、ユーザの操作に動的に反応することができません。
そして、onchange以外を監視しているデモコードをあまり見かけません。
まず、jQuery UI公式ページのSliderデモおよび同デモのソースコードを参考にします。
デモコードの通りにしたところ、jQueryおよびjQuery UIを読み込むことができず「 $ is not defined. 」エラーに出会うことになってしまったので、Google APIから引っ張ってくるように書き換えました。
jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
jQuery UI
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
(上記jQueryのバージョンは2014/01時点のものです)<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
また、初期値の設定などはこちらのサイト様で詳しく説明されています。下のサンプルを作る際、参考にさせていただきました。
jQuery UI公式デモでは「スライド中に変化があったとき値を取得する」機能を使用していません。
使う場合は、下記のデモコードのようにします。
なお、console.logの出力が見られるコンソールは、Firefox/Chromiumの場合、Ctrl+Shift+Iで出すことができます。
デモコード：
<html>
<head>
</head>
<body>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Slider</title>
<!-- スライダに必要なjQueryUIなどの読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
// スライダを初期化
$(function() {
// スライダーを作成
$('#slider').slider({
min: 0,
max: 100,
step: 2,
value: 50,
// スライダーの操作終了時に呼び出される
change: function(e, ev) {
console.log('changed slider :' + ev.value);
$('#num').val(ev.value);
},
// スライダーの初期化時に初期値を取得
create: function(e, ev) {
$('#num').val($(this).slider('option', 'value'));
},
// スライド中に変化を取得する
slide: function(e, ev) {
var s_val = $(this).slider('option', 'value')
console.log('changing slider' + s_val);
$('#num').val(s_val);
}
});
});
</script>
</head>
<body>
<input id="num" type="text" size="5" readonly>
<div id="slider" style="width:200px;"></div>
</body>
</html>
0 件のコメント:
コメントを投稿