フォームのデザインを簡単に整える「iCheck」がとっても便利！
2014.01.06 (月) Sample
フォームのデザインって難しいですよね。でも、ユーザの動きを考えやすくて作りがいがあるかと思います。
しかも、デフォルトのスタイルだと全体のテイストと合わなかったりするので、実装に手間がかかってしまいます。
そこで今回紹介するプラグインは、「iCheck」というjQueryのプラグインです。スタイルの変更が面倒なチェックボックスとラジオボタンをいい感じに整えてくれるすぐれものです。
まずはDEMOを用意したのでご覧ください。
DEMOにあるフォームはサーバーへの送信はしていませんので、お気軽に試して見て下さい！
使い方
HTMLは以下のような感じで、特別なマークアップは必要無いようです。
|
0 1 2 3 4 5 6 7 8 9 |
<label> <input type="checkbox" name="kind[]" value="twitter"> Twitter </label> <label> <input type="checkbox" name="kind[]" value="facebook"> Facebook </label> |
<head>内で使用するCSSテーマとJSを読み込みます。
|
0 1 2 3 4 |
<link rel="stylesheet" type="text/css" href="css/skins/flat/blue.css"> <script type="text/javascript" src="js/icheck.min.js"></script> |
そして、好きなinput要素に対してiCheckを実行します。
|
0 1 2 3 4 5 |
$("input").iCheck({ checkboxClass: "icheckbox_flat-blue", //使用するテーマのスキンを指定する radioClass: "iradio_flat-blue" //使用するテーマのスキンを指定する }); |
使い方は簡単で、必要なのは上記の3点のみで導入も簡単です！
気に入った点
まず、導入が簡単で既存のコードを変更する必要がほとんど無いこと。
それと、プラグインで用意されているスキンテーマがかなり豊富、どれもシンプルで整っていて、どんなサイトでも合わせやすいものなので使い勝手が良い点です。
また、IE7はもちろん、なんとIE6まで対応しているので(最近ではほとんど無いでしょうかね？)、実務でも使いやすい点です！MITライセンスなので商用利用も可能です。
デフォルトのフォームデザインのイメージを手軽に変えたい方に是非オススメです！
- WebChokoTipsではサイト制作に役立つ、役立たない関係なくJS、jQueryなどフロントエンドの技術に関して私の勉強を兼ねてご紹介しています。