第2回　Tips7 iPhoneのようなチェックボックスをつくりたい

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～」の行で、チェックボックス中の文字数に差がある場合の選択肢を指定することもできる。

body要素内には「＜input type="checkbox" /＞　（※「＜」「＞」は半角）」をいくつか準備しよう【3】。input要素の親となるブロックレベル要素に「class="on_off」と記述すると単純に「ON / OFF」になる。「class="long_tiny」とすると、先ほどの文字数に差がある場合の指定が反映される。

「class="on_off」の場合のデフォルトの文字列を変えたい場合には、「iphone-style-checkboxes.js」の5行目と6行目を変更する。作例では「YES／NO」とした【4】。PC用だけでなく、iPhone用のページに使ってみるのもおもしろいだろう【5】。