jQuery Mobile フリップスイッチを設置する

オン/オフの切り替えなどに使われるフリップスイッチは、タップかスワイプすることでスイッチを切り替えることができるタッチデバイス向けのフォーム部品です。jQuery Mobile でフリップスイッチを実装する2種類の方法を解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. 使用するデータ属性
  2. チェックボックスをベースにしたフリップスイッチ
  3. セレクトボックスをベースにしたフリップスイッチ
  4. オプション指定
  5. 長いテキストを表示する場合のCSS設定

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

使用するデータ属性

データ属性 説明
data-corners true | false 角丸をつけるかどうか
data-disabled true | false 利用できないようにするかどうか
data-mini true | false 小さいサイズにするかどうか
data-off-text string | Off チェックボックスを使ったときのOff状態のテキスト
data-on-text string | On チェックボックスを使ったときのOn状態のテキスト
data-role none jQuery Mobile のスタイルを適用しない
data-theme swatch letter (a-z) 適用するスウォッチ

チェックボックスをベースにしたフリップスイッチ

チェックボックスをベースにしたフリップスイッチは、ON状態のテキストは "On" で、OFF状態のテキストは "Off" となります。ただしこれはデータ属性を使って変更できます。

設置するには input要素に「data-role="flipswitch"」を指定します。
label要素の for属性には input要素の idを指定します。

チェックボックスベースのフリップスイッチ

テキストの変更

デフォルトのテキストは "On" と "Off" ですが、データ属性を使って変更することができます。
data-on-text属性でオン状態のテキストを、data-off-text状態でオフ状態のテキストを指定します。

ただし文字数は半角4文字までです。それ以上の文字数では正しく表示されなくなりますので CSSの設定が必要になります。これについては最後に説明します。

テキストを変更したフリップスイッチ

セレクトボックスをベースにしたフリップスイッチ

セレクトボックスを使ってもフリップボックスを設置することができます。
セレクトボックスでは option要素にオン状態とオフ状態のテキストを記述します。

設置するには select要素に「data-role="flipswitch"」を指定します。そして option要素を2つ設け、オン状態とオフ状態のテキストを記述します。こちらも文字数は半角4文字までです。
label要素の for属性には select要素の idを指定します。

セレクトボックスベースのフリップスイッチ

オプション指定

角丸を解除する

「data-corners="false"」を指定すると、角丸が解除されます。

角丸を解除したフリップスイッチ

ミニサイズにする

「data-mini="true"」を指定すると、ミニサイズになります。

ミニサイズのフリップスイッチ

テーマを変更する

data-theme属性でテーマ(スウォッチ)を変更できます。

テーマを変更したフリップスイッチ

長いテキストを表示する場合のCSS設定

デフォルトではフリップスイッチに表示できるテキストは半角4文字までとなっています。
それ以上の長いテキストを表示したい場合は CSSを上書きする必要があります。

例として以下のようなテキストを表示してみます。

長いテキストを表示したフリップスイッチ

該当部分のCSSはデフォルトで以下のようになっています。

これを HTML内に style要素で以下のように記述します。

フリップスイッチは見た目も ON/OFF がわかりやすい UI要素です。スマートフォンの OS やアプリにもたくさん使われておりユーザーも慣れていますので、二者択一の選択オプションとしてどんどん利用しましょう。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ