スライダー

スライダーウィジェットをページ上に追加するには、まず input 要素にHTML5で追加された type=“range” を指定します。そして value (現在の値)と mix / max 属性を指定し、スライダーの設定をします。フレームワークはこれらの属性を解析し、スライダーウィジェットを作成します。スライダーに設定可能な属性についてはdata属性リファレンスを参照してください。

スライダーをドラッグすればテキスト入力域の数値が自動的に変わり、逆もまた同様です。テキストとスライダーは常に同期するため、どちらの方法でも簡単に値を入力し、submitできます。

ラベルは label 要素に for 属性で input 要素のIDを指定することでセマンティックにつなげられます。それらをひとつの div で囲み data-role=“fieldcontain” 属性を指定してグループ化するようにしてください。デザイン上の理由からラベルを表示したくないような場合はアクセシビリティを保ったままラベルを非表示にすることも可能です。

フレームワークは type=“range” 属性の指定された input を見つけると、自動的にスライダーウィジェットに変換します。この時 data-role を指定する必要はありません。こうした自動初期化を止めるには data-role=“none” 属性を input に指定してください。

このコードにより、次のようなスライダーがつくられます。

また、スライダーとラベルの組み合わせを data-role=“fieldcontain” 属性を指定したコンテナ要素で囲むことで、特に幅の広いフォームでの見栄えを向上させることもできます。

このスライダーは次のようになります。

スライダーはまた、キーボードによるショートカットもサポートします。値を増やすには右矢印や上矢印、Page Upキーなどが使えます。逆に減らすには左矢印、下矢印、Page Downなどです。また Home と End でスライダを最大/最小値に移すことができます。

スライダープラグインの呼び出し

このプラグインは input 要素に type=“range” 属性が指定されたものに対して自動的に初期化されます。しかし、他のjQueryプラグイン同様に直接任意のセレクタに対して slider を呼びたい場合は、たとえば次のようにします。

$('input').slider();

スライダーのテーマ設定

スライダーにスウォッチを適用するには input 要素に data-theme 属性を指定します。この時、スウォッチは入力域、ハンドル、トラックに適用されます。トラックのスウォッチは、これとは別に data-track-theme 属性で設定できます。

このコードでつくられたスライダーは、次のようにテーマ設定されます。

オプション

スライダープラグインは、次のようなオプションを持ちます。

disabled string

default: false

この値が true の時、スライダーは使用不可状態になります。

$('.selector').slider({ disabled: "true" });
initSelector CSS selector string

default: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"

自動的にスライダーに初期化される対象のセレクタを定義します。初期化要素を変更するには、mobileinitイベントで行ないます。

$( document ).bind( "mobileinit", function(){
   $.mobile.slider.prototype.options.initSelector = ".myslider";
});
theme string

default: null, inherited from parent

ウィジェットのスウォッチを設定します。指定可能な値は、テーマに設定の含まれるaからzまでのアルファベット一文字です。初期状態では、この値は親要素から自動的に継承します。このオプションはdata属性を使って次のように行うことも可能です: data-theme="a"

$('.selector').slider({ theme: "a" });
trackTheme string

default: null, inherited from parent

スライダーの特にトラック部分のスウォッチを設定します。指定可能な値は、テーマに設定の含まれるaからzまでのアルファベット一文字です。

$('.selector').slider({ theme: "a" });

この設定は、マークアップでinput要素にdata属性を指定することで上書き可能です: data-track-theme="a";

メソッド

このプラグインは次のようなメソッドを持ちます。

enable 使用不可状態のスライダーを使用可能にします。
$('.selector').slider('enable');
disable スライダーを使用不可にします。
 $('.selector').slider('disable');
refresh スライダーの更新

JavaScriptなどから動的にスライダーを変更した場合、refresh を実行して見栄えを更新する必要があります。

$('.selector').slider('refresh');

イベント

直接 input 要素イベントにバインドしてください。jQuery Mobileによる仮想的なイベント、もしくは change, focus, blur などのような標準的な
JavaScriptのイベントにバインドできます

$( ".selector" ).bind( "change", function(event, ui) {
  ...
});

スライダープラグインは、次のようなイベントを持っています。

create triggered when a slider is created

$( ".selector" ).slider({
   create: function(event, ui) { ... }
});