タッチデバイス対応、フォームのデザインをミニマルやフラットにしたり機能を強化するスクリプト -iCheck

フォームのラジオボタンとチェックボックスをミニマルやフラットやダークなど、今時のデザイン風に変更したり、コールバック関数や入力をコントロールできるjQueryのプラグインを紹介します。

iCheck
iCheck -GitHub

• iCheckの特徴
• iCheckのデモ
• iCheckの使い方

iCheckの特徴

• 1KBで超軽量
• クロスブラウザ対応
  IE7+, Firefox2+, Chrome, Safari3+, Opera9+
• スマートフォン・タブレットなどのタッチデバイスをサポート
  iOS, Android, BlackBerry, Windows Phone
• キーボード操作をサポート
  タブ、スペース、矢印キー、他のショートカット
• HTML/CSSベースでカスタマイズが簡単
  Retina対応のスタイルを6種類用意
• チェックボックスとラジオボタンは15のオプションでカスタマイズ
• 8つのコールバック関数を用意
• 6つのメソッドを用意
• jQueryのあらゆるセレクタに対応

iCheckのデモ

デモはIE7+をはじめ、モダンブラウザでご覧ください。
まずは、チェックボックスとラジオボタンのプログラムでの操作やコールバック関数の処理です。

デモ

Retinaディスプレイの表示にも対応したスキンが用意されています。

Minimal Skin

シンプルなミニマルデザインで。

Square Skin

Windows8にぴったりなスクエアで。

Flat Skin

2013年のトレンド：フラットで。

Line Skin

パネル状にも変更できます。

Polaris Skin

ダークなカラースキーム用に。

Futurico Skin

Futurico風のデザインで。

iCheckの使い方

Step 1: 外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.icheck.min.js"></script>

スキンを使用する場合は、スタイルシートも外部ファイルとして記述します。

<link href="css/minimal/red.css" rel="stylesheet">

カラースキームは、10色が用意されています。

Step 2: HTML

フォームは、通常通りに実装です。

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio">
<input type="radio" checked>

Step 3: JavaScript

jQueryのセレクタでフォームを指定し、付与するスキンを指定します。

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal',
    increaseArea: '20%' // optional
  });
});
</script>