|
Tips 7 |
|
iPhoneのようなチェックボックスをつくりたい |
JavaScript |
|
＞＞ |
|
point 簡単にリッチな見た目を実現できる |
|
＞＞ |
|
point プレーンなHTMLのままでOK |
iPhoneの設定画面などでよく見かけるデザインに似た「ON／OFF」チェックボックスを手軽に実装できるjQueryのプラグイン「iPhone-style Checkboxes」を紹介しよう（
awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html）。
最初に上記サイトから「iphone-style-checkboxes.zip」をダウンロードする。解凍してできたファイルとフォルダのうち「images」、「jquery」、「style.css」を自分のサーバなどにコピーしよう。
head要素内で【1】のように3つの必要なファイルを読み込んだあと、【2】のような設定を記述する。デフォルトの状態では選択肢は「ON／OFF」だが、「$('.long_tiny～」の行で、チェックボックス中の文字数に差がある場合の選択肢を指定することもできる。
【1】head要素内で必要ファイルを読み込む
【2】checkedLabelとuncheckedLabelの値を変更する
body要素内には「＜input type="checkbox" /＞ （※「＜」「＞」は半角）」をいくつか準備しよう【3】。input要素の親となるブロックレベル要素に「class="on_off」と記述すると単純に「ON / OFF」になる。「class="long_tiny」とすると、先ほどの文字数に差がある場合の指定が反映される。
【3】作例では定義付きリストの中にinput要素を入れた
「class="on_off」の場合のデフォルトの文字列を変えたい場合には、「iphone-style-checkboxes.js」の5行目と6行目を変更する。作例では「YES／NO」とした【4】。PC用だけでなく、iPhone用のページに使ってみるのもおもしろいだろう【5】。
【4】「iphone-style-checkboxes.js」でもcheckedLabelとuncheckedLabelの値を変更できる
【5】iPhoneで閲覧した様子
web creators
この記事をチェックした人はこんな記事も読んでいます。
