Webを入力しやすくするjQueryプラグイン-チェックボックスやラジオボタンを見映え良く

jQueryで便利なコントロールを随時していきたいと思います。

今回は『チェックボックスにjQueryの「Checkbox」プラグインを適用してON/OFFのイメージで表示する』 ようにします。

 Webブラウザを起動してサンプルを表示すると、チェックボックスがON/OFFでイメージ化されて表示されます。ON/OFFのイメージにマウスを移動すると、左右に動きます。ラベルまたはイメージをクリックするとON/OFFに切り替わります。

ステップ1:CSSとライブラリをCDN経由で組み込む

 お好みの開発ツールまたはエディタを起動して、新規ファイルを作成したら、<head>要素に<link>要素と<script>要素を追加して、CSSとjQueryのライブラリを組み込みます。

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />……【1】
  <link href="jquery.checkbox.css" rel="stylesheet" type="text/css" />……【2】
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>……【3】
  <script src="jquery.checkbox.js" type="text/javascript"></script>……【4】
</head>
  1. Webページの基本スタイルが宣言されている
  2. Checkboxプラグインのスタイルが宣言されている
  3. jQueryのライブラリをGoogle CDN経由で取り込む
  4. Checkboxプラグインのライブラリを取り込む

 Checkboxプラグインの最新版は、下記サイトからダウンロードできます。

kawika.org – is on maui

ステップ2:XHTMLで骨格を定義する

 <body>要素に<input>(checkbox)要素と<label>要素を追加してチェックボックスを配置します。<label>要素のfor属性には、<input>(checkbox)要素のid(check1)を設定します。ここでは、checked属性に「checked」を設定してチェックされた状態にしています。同様の手順で複数のチェックボックスを配置します。<input>(checkbox)のname属性には、ユニーク(一意)な名前を設定します。

<input id="check1" name="checkbox.1.1" type="checkbox" checked="checked" />
<label for="check1">チェック済み</label>

ステップ3:プラグインを組み込む

 <head>要素に<script>要素を追加したら、次のようなコードを追加してCheckboxプラグインを組み込みます。ここでは、jQueryのセレクタ「input:checkbox」でチェックボックスの要素を検索して、checkbox()メソッドを実行しています。

<script type="text/javascript">
  $(function() {
      $('input:checkbox').checkbox();
  });
</script>

 これで、先ほどのサンプルが出来上がりました。

ラジオボタンに適用するには

 <input>(radio)要素のname属性に同じ名前(radio.1)を設定します。これで、複数のラジオボタンがグループ化されて1個だけ選択できるようになります(実行サンプルを表示)

<label><input name="radio.1" value="1" type="radio" />ラジオボタン #1</label>
<label><input name="radio.1" value="2" type="radio" />ラジオボタン #2</label>
<label><input name="radio.1" value="3" type="radio" />ラジオボタン #3</label>
$('input:radio').checkbox();

By saito

 

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中