フリップスイッチ

フリップスイッチ

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

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

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

Select slider:

        Off
        On

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

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

Flip switch:
        
                No
                Yes
         

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

Flip switch:
        
                No
                Yes
         

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

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

        Flip switch:
        
                No
                Yes
         

このコードにより、ハンドルの色がスウォッチ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";
});

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) { ... }
});