【JavaScript】チェックボックスとラジオボタンのデザインをカスタマイズする『iCheck』

checkboxes-and-radio-buttons-customization-icheck

フォームなどで使われるチェックボックスとラジオボタンのデザイン。「jQuery」と「Zepto」を使いチェックボックスとラジオボタンのデザインをカスタマイズするライブラリ『iCheck』をご紹介します。

実装イメージ

『iCheck』はいくつかのスキンデータも用意されてあります。ライブラリはデモページからダウンロードできます。

checkboxes-and-radio-buttons-customization-icheck-skin

構成ファイル

『iCheck』を構成ファイルは以下のようになります。CSSフォルダには6種類のスキンデータがフォルダ別に用意されています。

iCheck
├── css/
│   ├── flat/
│   ├── futurico/
│   ├── line/
│   ├── minimal/
│   ├── polaris/
│   ├── square/
│   └── all.css
└── js/
    ├── zepto.js
    ├── icheck.js
    └── jquery.js

利用方法

最初にライブラリの読み込みです。スキンデータのスタイルシート、「jquery.js(またはzepto.js)」、「icheck.js」の3つを設置します。

続けてオプションを設定します。下記の例では、Skinスタイルが「minimal」カラーセット「red」の設定になりま。

/* ライブラリの読み込み・オプション設定 */
<link href="./css/minimal/red.css" rel="stylesheet">
<script src="./js/jquery.js"></script>
<script src="./js/icheck.js"></script>

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

チェックボックスとラジオボタンは下記の記述で実装ができます。

/* HTML記述例 */
<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

関連記事

【WP】標準ギャラリーをスライド式にするプラグイン『WordPress Canvas Gallery』

『WordPress Canvas Gallery』は、WordPressの標準ギャラリーをスライド式のギャラリーに対応させることができるプラグインです。 『WordPress Canvas Gallery』ダウンロード プラグインは「wordpress.org」のプ...続きを読む

2015.02.18WordPress

公式サイトをリニューアルオープンいたしました

デザインスタジオ・エフの公式WEBサイトをより見やすく、より探しやすくを目指してリニューアルをしました。 制作事例やブログ、私たちのサービスについてご案内いたします。 今後とも引き続きご愛顧のほど、よろしくお願い申し上げます。 ...続きを読む

2015.02.06

【JavaScript】グラフなどの描画をサポートするライブラリまとめ

折線グラフ、棒グラフ、円グラフやレーダーチャートなどを画像を使わずに描画をするJavaScriptライブラリをまとめてみました。 Chart 6種類のグラフを作成できるJavaScriptライブラリです。描画にはHTML5のcanvasを使用しています。 Dem...続きを読む

2015.03.02HTMLコーディング

Hair Lounge Credo様WEBサイト制作

伊豆市小立野にリニューアルオープンした美容室Hair Lounge Credo(ヘアラウンジクレド)様のWEBサイトを制作いたしました。店舗のリニューアルあるに合わせてWEBサイトもリニューアル!店舗の空間デザインに合わせて、ウッドやレンガ調、蔦などのイメージをWEBサイ...続きを読む

2016.07.06WEBサイト制作美容室

【WP】ウェブサイトのパフォーマンスを高めるためのプラグイン

Googleよりウェブサイトの制作・管理を行うウェブマスター向けのガイドラインが告知されております。このガイドラインの目的は「ガイドラインに沿ってサイトを作成すると、Google がサイトを認識し、インデックスに登録し、ランク付けをするプロセスをスムーズにおこなう手助けとなります...続きを読む

2015.03.23WordPress