jQueryのライブラリはWebアプリ作成に便利だ。jQueryには、jQueryUIという公式のユーザインターフェースがある。
ユーザインターフェースは、機械そのものの使い勝手を左右する要素にもなるので大事だ。
（ちなみにユーザインターフェースとは、使う人に対しての表示方法や入力方法などを指す）
今回わたしはスライダーを使ったアプリを作ろうと考えてjQueryUIを使ってみた。
jQueryUIスライダーサンプル
0から100までの値を取得するスライダーを作ってみました。
参考にしたサイトは本家のサイト
Slider | jQuery UI
http://jqueryui.com/slider/
英語表記ですが、割と分かりやすい方だと思います。
jQueryUIの使い方とスライダー設定
jQueryUIを使うには、headタグに以下の記述が必要です。（jqueryフォルダ内にjQueryのライブラリが置いてあると仮定して）
<link rel="stylesheet" href="jquery/jquery-ui.min.css"> <!-- jQueryUIのCSS --> <script src="jquery/jquery-2.2.0.min.js"></script> <!-- jQuery本体 --> <script src="jquery/jquery-ui.min.js"></script> <!-- jQueryUI本体 -->
jQueryUIのCSS－＞jQuery本体ー＞jQueryUI本体の順に読み込みます。
よく使いそうなスライダー設定にコメントを付けてみました。
$(function(){
// スライダ設定
$("#slider1").slider({
range: "min", // min: 左側から色がつく max: 右側から色がつく
min: 0, // 最小値
max: 100, // 最大値
value: 50, // 現在値
step: 1, // 増分
// スライドしたときのイベント処理
slide: function(event, ui) {
$("#slider-caption").text(ui.value); // 現在値をスライダキャプションに設定
}
});
// スライダキャプションの設定（起動時の表示をスライダに合わせるため）
$("#slider-caption").text( $("#slider1").slider( "value" ) );
});
プログラム全体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Slider</title>
<link rel="stylesheet" href="jquery/jquery-ui.min.css"> <!-- jQueryUIのCSS -->
<script src="jquery/jquery-2.2.0.min.js"></script> <!-- jQuery本体 -->
<script src="jquery/jquery-ui.min.js"></script> <!-- jQueryUI本体 -->
<script>
$(function(){
// スライダ設定
$("#slider1").slider({
range: "min", // min: 左側から色がつく max: 右側から色がつく
min: 0, // 最小値
max: 100, // 最大値
value: 50, // 現在値
step: 1, // 増分
// スライドしたときのイベント処理
slide: function(event, ui) {
$("#slider-caption").text(ui.value); // 現在値をスライダキャプションに設定
}
});
// スライダキャプションの設定（起動時の表示をスライダに合わせるため）
$("#slider-caption").text( $("#slider1").slider( "value" ) );
});
</script>
<style>
#slider1{
width: 500px;
}
#slider1 .ui-slider-range { background: #729fcf; } /* スライダの背景色 */
#slider1 .ui-slider-handle { border-color: #729fcf; } /* スライダをドラッグできる部分の枠色 */
#slider-caption{
color:#f6931f;
font-weight:bold;
}
</style>
</head>
<body>
<p><!-- スライダ値表示部分 -->
<label for="slider-caption">Number:</label>
<span id="slider-caption" style="color:#f6931f; font-weight:bold;"></span>
</p>
<div id="slider1"></div><!-- スライダ -->
</body>
</html>
コメント