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

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

サイトのキャプチャ

iCheck
iCheck -GitHub

iCheckの特徴

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

iCheckのデモ

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

2013032702-01.pngのキャプチャ

デモ

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

2013032702-01.pngのキャプチャ

Minimal Skin

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

2013032702-01.pngのキャプチャ

Square Skin

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

2013032702-01.pngのキャプチャ

Flat Skin

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

2013032702-01.pngのキャプチャ

Line Skin

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

2013032702-01.pngのキャプチャ

Polaris Skin

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

2013032702-01.pngのキャプチャ

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>

top of page

©2017 coliss