kitaokaチェックボックスとラジオボタンをカスタマイズできる「iCheck.js」
フォームでよく使うチェックボックスやラジオボタンを、簡単にカスタマイズできるプラグイン「iCheck.js」をご紹介します。
利用方法は簡単で、通常通りマークアップされたチェックボックスやラジオボタンに対して、.iCheck()メソッドを呼び出すだけです。同梱されているスキンの種類が豊富で、そのまま利用することも、自分でカスタマイズすることもできます。
まずは上記サイトからプラグインをダウンロードします。
・html
特別な属性などを指定する必要はありません。
・JavaScript
1 2 3 4 | $('input').iCheck({ checkboxClass: 'icheckbox_minimal-red', // チェックボックスにclass名を追加 radioClass: 'iradio_minimal-red' // ラジオボタンにclass名を追加}); |
カスタマイズするinput要素に対して.iCheck()メソッドを呼び出します。
（上記は、プラグイン付属のスキンMinimalのredを利用する場合の記述方法です。）
1 2 3 | <script src="jquery.js"></script><script src="jquery.icheck.js"></script><link href="skins/minimal/red.css" rel="stylesheet"> |
また、付属のスキンを利用する場合はjQuery本体とプラグインのほかにCSSも読み込む必要があります。
Minimal, Square, Flat, Line, Polaris, Futurico の６タイプのスキンがあり、サイト上でデザインを見ることができます。
