【ハイクオリティ】iPhone Toggle UIをCSSとjQueryで実現

By matumoto – 2009/08/07

080907

三度の飯よりiPhoneが好き！松本です。iPhoneがつながらないと誇張抜きでテンパリます。

かなりクリーンなソースでiPhoneのトグルスイッチを実現しているコードがあったのでご紹介します。なんてクールなんだ！ iPhone向けのサイトも多くなってきている昨今、これからガシガシ役に立つんじゃないでしょうか。

百聞は一見にしかず、まずはデモサイトをご覧ください。

ダウンロードとインストール

iPhone Toggle Switches // Elijah Millerの【Download】から必要ファイルを一式落とします。
jQuery版とprototype版が用意されてるのも素晴らしいですね。私はjQueryに傾倒しているのでjQueryを選択。

HTMLの内で次のようにJavaScriptとCSSを読み込みます。

<head>
	<script type="javascript" src="jquery/jquery-1.3.2.js" /></script>
	<script type="javascript" src="jquery/iphone-style-checkboxes.js"></script>
	<link rel="stylesheet" href="style.css" />
</head>

簡易記述なのでMETAとかはすっ飛ばしています。

HTMLの記述

これがもうシンプルで素晴らしい。非常にクリーンなXHTMLで文法的にも超正しいです。

labelはちょっとした手間でUIに多大な影響を与えます。ぜひマスターしてください。

  <ol class="on_off">
  	// 通常のトグル
    <li>
      <label class="left" for="on_off">通常のトグルスイッチ</label>
      <input type="checkbox" id="on_off" />
    </li>
   // デフォルトをオン
    <li>
      <label class="left" for="on_off_on">通常のトグルスイッチ（デフォルト：オン）</label>
      <input type="checkbox" checked="checked" id="on_off_on"/>
    </li>
  </ol>
 
  <ol class="css_sized_container">
  	// CSSでサイズ指定＋ハンドル
    <li>
      <label class="left" for="css_sized_container">CSSでサイズ指定＋ハンドル</label>
      <input type="checkbox" id="css_sized_container"/>
    </li>
  </ol>
 
  <ol class="long_tiny">
  	// 長いラベル・短いラベル
    <li>
      <label class="left" for="long_tiny">長いラベル・短いラベル</label>
      <input type="checkbox" id="long_tiny"/>
    </li>
  </ol>
 
  <ol class="onchange">
  	// 自動トグル切り替え
    <li>
      <input type="checkbox" id="onchange"/>
      <br />
      <p>チェックボックスがチェックされている？ <strong><span id="status">...</span></strong>.</p>
    </li>
  </ol>

見ていただくと分かるんですが、全部チェックボックスなんです！超クリーン。
PHPプログラマとかのデータのやり取りも困らなそうで大変助かります。

JavaScriptの記述

もう一度内にJavascriptを記述します。設定のようなものです。
ここはjQueryを理解していないと若干難しいかもしれませんね……
今は時間がないのでさらっと解説しますが、ご要望があれば全文解説します。

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      $('.on_off :checkbox').iphoneStyle();
      $('.css_sized_container :checkbox').iphoneStyle({ resizeContainer: false, resizeHandle: false });
      $('.long_tiny :checkbox').iphoneStyle({ checkedLabel: '長いラベルテキスト', uncheckedLabel: '短い' });
 
      var onchange_checkbox = $('.onchange :checkbox').iphoneStyle();
      setInterval(function toggleCheckbox() {
        onchange_checkbox.attr('checked', !onchange_checkbox.is(':checked')).change();
        $('span#status').html(onchange_checkbox.is(':checked').toString());
      }, 2500);
    });
  </script>