jQuery Mobile逆引きリファレンス
Sliderウィジェットで、スライダーを作成するには？
つまみをスライドして値を簡単に選択できるスライダーを作成するためのSliderウィジェットの基本的な使い方を説明する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
Sliderウィジェットを利用することで、スライダーを作成できます。スライダーはある決められた範囲の連続した数値を、視覚的に入力させるのに適したウィジェットです。<input type="range">要素で作成できます。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<form>
<div class="ui-field-contain">
<label for="light">明るさ：</label>
<input id="light" name="light" type="range"
min="0" max="50" step="2" value="20" />
</div>
</form>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
スライダーの上限／下限などは、以下の属性で指定できます。
| 属性 | 概要 |
|---|---|
| min | 最小値 |
| max | 最大値 |
| value | 初期値 |
| step | 増減分 |
また、以下のようなスタイル関連のdata-xxxxxx属性も用意されています。
| 属性 | 概要 |
|---|---|
| data-highlight | 値の選択部分をハイライト表示するか |
| data-theme | スライダー（ハンドル、数値ボックスなど）に適用するテーマ |
| data-track-theme | トラック（溝）に適用するテーマ |
以下は、これらの属性を適用した例です。
|
<input id="light" name="light" type="range"
min="0" max="50" step="2" value="20"
data-highlight="true" data-theme="b" data-track-theme="a" />
|
範囲スライダーを作成する
Rangesliderウィジェットを利用することで、範囲スライダーを作成することもできます。範囲スライダーとはツマミ（＝ハンドル）が2個あり、m～nの数値範囲を表すことができるスライダーのことです。
例えば、以下は0～100の範囲で初期値がそれぞれ「25」「75」である範囲スライダーを表示する例です。
|
<div data-role="rangeslider">
<label for="permit_1">許容範囲：</label>
<input id="permit_1" name="permit_1" type="range"
min="0" max="100" step="1" value="25" />
<label for="permit_2">許容範囲2：</label>
<input id="permit_2" name="permit_2" type="range"
min="0" max="100" step="1" value="75" />
</div>
|
範囲スライダーを作成する際には、スライダー（<input type="range">要素）を2個列挙し、そのコンテナー要素（<div>要素）に対して「data-role="rangeslider"」属性を付与します。Rangesliderウィジェットで利用できるdata-xxxxx属性は、Sliderウィジェットと同様ですので、割愛します。
2個のスライダーには、それぞれラベルを指定できますが、画面上に表示されるのは最初のラベルとなりますので、注意してください。
※以下では、本稿の前後を合わせて5回分（第28回～第32回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
28. Filterableウィジェットでリスト／テーブルなどに検索機能を付与するには？
リストやテーブル、ボタングループ／選択ボックスなど、任意の要素グループに対して検索機能を付与できるFilterableウィジェットの基本的な使い方を解説。
29. Filterableウィジェットによる検索ルールをカスタマイズするには？
リスト／テーブルなどに検索機能を付与できるFilterableウィジェット。その検索機能をカスタマイズする方法を解説する。
30. 【現在、表示中】≫ Sliderウィジェットで、スライダーを作成するには？
つまみをスライドして値を簡単に選択できるスライダーを作成するためのSliderウィジェットの基本的な使い方を説明する。
32. $.mobile.pathオブジェクトでパス／URLの情報を取得／操作するには？
パスやURLを取得／操作するには、$.mobile.path.xxxxxメソッドが利用できる。各メソッドの基本的な使い方を解説する。
