Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery Mobile逆引きリファレンス

jQuery Mobile逆引きリファレンス

Flipswitchウィジェットでオン/オフ選択のためのフリップスイッチを作成するには?

2014年5月29日

オン/オフに特化した選択ボタンを設置するには、CheckboxradioウィジェットよりもFlipswitchウィジェットが便利。その基本的な使い方を解説する。

  • このエントリーをはてなブックマークに追加

jQuery Mobileとは?

 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス: jQuery Mobileを利用するには?」を参照してください。

 オン/オフに特化した選択ボタンを設置するならば、Flipswitchウィジェット(フリップスイッチ)が便利です。単一のチェックボックスでもオン/オフを表現できますが、フリップスイッチの方が「オン/オフの状態がより視覚的に明快である」「オン/オフをタップ、フリップいずれの動作でも切り替えられる」などの利点があります。「トグルスイッチ」、「フリップトグル」とも呼びます。

 チェックボックスについては、別稿「Checkboxradioで単一/複数選択のボックスを作成するには?」も併せて参照してください。

選択ボックスからフリップスイッチを生成する

 フリップスイッチは、<select>要素、もしくは<input type="checkbox">要素を基に生成できます。まずは、<select>要素を基にした例からです。

HTML
<!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.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.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 method="POST" action="">
      <div data-role="fieldcontain">
        <label for="dm_select">メールニュースの送信を希望</label>
        <select id="dm_select" name="dm_select" data-role="flipswitch">
          <option value="no">No</option>
          <option value="yes">Yes</option>
        </select>
      </div>
    </form>
  </div>
  <div data-role="footer">
    <h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
  </div>
</div>
</body>
</html>
タップ、またはフリップ操作でオン/オフを切り替えられる

 フリップスイッチを表すには、<select>要素に二択のオプションを設置した上で、「data-role="flipswitch"」属性を付与します*1。オプションの順序は、オフ→オンの順序とします(一見して逆に思えるかもしれませんが、これが正しい順序です)。

 また、表示テキストはせいぜい2~3文字で収めるべきです。標準的なスタイルシートでは、それ以上の文字数で正しくテキストが表示されなくなるようです。

  • *1 jQuery Mobile 1.3までは「data-role="slider"」属性を利用していましたが、1.4以降は非推奨です。Flipswitchウィジェットを優先して利用してください。
チェックボックスからフリップスイッチを生成する

 フリップスイッチはチェックボックスから生成することもできます。

HTML
<div data-role="fieldcontain">
  <label for="dm_check">メールニュースの送信を希望</label>
  <input id="dm_check" type="checkbox" data-role="flipswitch"
    data-off-text="No" data-on-text="Yes" />
</div>
<input type="checkbox">要素を基にフリップスイッチを作成する作成する例(flip.html)
<select>要素の場合と同じ結果を得られる

 <select>要素との使い分けは、入力値の処理側でどのように値を受け取りたいかによって決めればよいでしょう。見た目の結果は、いずれを利用しても変わりありません。

 チェックボックスの場合は、オン/オフのテキストを持ちませんので、data-off-text/data-on-text属性で指定します(デフォルト値はOff/On)。これらの値は、<select>要素では無視されます。

※以下では、本稿の前後を合わせて5回分(第18回~第22回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery Mobile逆引きリファレンス
18. jQuery Mobileページで複数列からなるグリッドレイアウトを作成するには?

標準機能を使ってグリッドレイアウトを作成する方法を解説。複数行にまたがるレイアウトや、レスポンシブレイアウトへの対応も説明する。

jQuery Mobile逆引きリファレンス
19. Checkboxradioでラジオボタン/チェックボックスを作成するには?

標準のラジオボタン/チェックボックスをリッチな選択ボタンに整形できるCheckboxradioウィジェットの基本的な使い方を解説する。

jQuery Mobile逆引きリファレンス
20. 【現在、表示中】≫ Flipswitchウィジェットでオン/オフ選択のためのフリップスイッチを作成するには?

オン/オフに特化した選択ボタンを設置するには、CheckboxradioウィジェットよりもFlipswitchウィジェットが便利。その基本的な使い方を解説する。

jQuery Mobile逆引きリファレンス
21. Selectmenuウィジェットで選択メニューを作成するには?

複数の選択肢から1つもしくは複数をページ閲覧者に選択させたいときに、通常の「ラジオボタン/チェックボックス」ではなく、タップして初めて選択オプションが表示される「選択メニュー」を使いたい場合がある。これを手軽に作成する方法を説明する。

jQuery Mobile逆引きリファレンス
22. jQuery Mobileで入力フォームを設置するには?

jQuery Mobileでフォームを設置する際の、よりjQuery Mobileらしいフォームを実装するために知っておきたいポイントと特性方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!