開発 jQueryMobile

【jQuery Mobile】フリップスイッチ(On⇔Offスライダー)一括変更スクリプト

2014年5月17日

Jquery Mobileでフリップスイッチ(ON⇔OFFスライダー)を使っているのですが、JavaScriptで複数のフリップスイッチをON⇒OFFまたはON⇒OFFに変更する方法のメモ

どうやらselectIndexを変更すればうまく動くようです。 1を指定するとOn、0または-1を指定するとOffになります。 フリップスイッチの再描写は.slider('refresh')で可能です。 selectIndexの修正なのでjqueryのpropでの変更も可能です。 < div "> flip switch off flip switch on
サンプルソース(javascript) [javascript] $(document).ready(function(){ $("#changeButton").on('click',function(){ if($(this).val() == "全件選択"){ $('select[data-role=slider]').each(function(){ //配列を使用するやりかた $(this)[0].selectedIndex = 1; $(this).slider('refresh'); }); $(this).val("全件解除").button('refresh'); }else{ $('select[data-role=slider]').each(function(){ //jqueryを使用するやり方 $(this).prop('selectedIndex', 0); $(this).slider('refresh'); //$(this).prop('selectedIndex', 0).slider('refresh')でも可能 }); $(this).val("全件選択").button('refresh'); } }); }); [/javascript] サンプルソース(html) [html] <div data-role="page" id="selecter" data-theme="b"> <input type="button" name="change" value="全件選択" id="changeButton" /> <div data-role="content" style="text-align:center;" > <label for="flip-a">スライダー1</label> <select name="slider" id="flip-a" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> <label for="flip-b">スライダー2</label> <select name="slider" id="flip-b" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> <label for="flip-c">スライダー3</label> <select name="slider" id="flip-c" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select>
&lt;/div&gt;
</div> [/html] デモはこちらで確認ができます。

-開発, jQueryMobile
-, , ,