フリップスイッチ

モバイル端末でよく使われる “フリップ” スイッチは、オン/オフや真/偽値を設定するのに便利です。切り替えにはスイッチをスライダーのようにドラッグするか、タップをします。

このコントロールを作るには、オプションを2つ用意した select 要素をスライダーウィジェットとして追加します。最初のオプションは “on” 、次のオプションは “off” としてスタイルされるので、この順番を守ってください。フリップスイッチで指定可能な属性についてはdata属性リファレンスを参照してください。

ラベルは label 要素に for 属性で input 要素のIDを指定することでセマンティックにつなげられます。もしページレイアウト的な理由からラベルを表示したくない場合、ラベルを隠すことも可能です。しかしセマンティックな、そしてアクセシビリティの観点から、かならずラベルを作成するようにしましょう。

<label for="flip-a">Select slider:</label>
<select name="slider" id="flip-a" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
</select>

このコードにより、次のようなフリップスイッチがつくられます。初期状態で横幅は親要素いっぱいになり、ラベルは他の行に表示されます。

長いラベル

コントロールは、横幅指定により自動的に体裁を整えます。より長いラベルを使いたい場合、CSSで適切な幅を指定してください。たとえば、次のようにマークアップします。

<div class="containing-element">
        <label for="flip-min">Flip switch:</label>
        <select name="slider" id="flip-min" data-role="slider">
                <option value="off">Switch Off</option>
                <option value="on">Switch On</option>
        </select>
</div>

.containing-element .ui-slider-switch { width: 9em }

ミニバージョン

ツールバー内など狭いスペースでは、よりコンパクトな大きさのボタンが便利です。ボタンに data-mini=“true” 属性を追加することで、ミニサイズにできます。

<label for="flip-a">Select slider:</label>
<select name="slider" id="flip-a" data-role="slider" data-mini="true">
        <option value="off">Off</option>
        <option value="on">On</option>
</select>

フィールドコンテナ

これらをコンテナ要素で囲み、そこに data-role=“fieldcontain” 属性を指定することで、見た目を制御することも可能です。

<div data-role="fieldcontain">
<label for="flip-b">Flip switch:</label>
        <select name="slider" id="flip-b" data-role="slider">
                <option value="no">No</option>
                <option value="yes">Yes</option>
        </select> 
</div>

このコードにより、次のように出力されます。

<div data-role="fieldcontain">
<div data-role="fieldcontain">
<label for="flip-b">Flip switch:</label>
        <select name="slider" id="flip-b" data-role="slider">
                <option value="no">No</option>
                <option value="yes">Yes</option>
        </select> 
</div>
</div>

フリップスイッチのテーマ設定

他のフォーム要素同様に、このウィジェットも親要素のテーマ設定を自動的に継承します。特定のテーマを指定したい場合は select 要素に data-theme 属性にスウォッチを指定します。

<div data-role="fieldcontain">
        <label for="flip-c">Flip switch:</label>
        <select name="slider" id="flip-c" data-role="slider" data-theme="a">
                <option value="no">No</option>
                <option value="yes">Yes</option>
        </select> 
</div>

このコードにより、ハンドルの色がスウォッチAのものになります。左側の“on“に該当する色は、アクティブステートの色です。

スウォッチEを指定した場合は次のようになります。

プラグインを手動で呼ぶ

このプラグインは select 要素に data-role=“slider” 属性が指定されたものに対して自動的に初期化されます。しかし、他のjQueryプラグイン同様に直接呼び出したい場合は、たとえば次のようにします。

$('select').slider();

オプション

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

disabled string

default: false

使用不可状態のスライダーを、使用可能にします。

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

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

ここには、自動初期化処理により slider プラグインになるセレクタを定義します。この値を変更するにはmobileinitイベントを使います。

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

default: false

要素のサイズを、よりコンパクトなミニバージョンにする。このオプションは、data属性でも指定可能: data-mini="true"

$('.selector').slider({ mini: "true" });
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');

イベント

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

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

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

create スライダーが生成された時に発生します。
$( ".selector" ).slider({
   create: function(event, ui) { ... }
});