チェックボックスを装飾するプラグインを作ってみました。
ダウンロードはこちら
通常のチェックボックスの場合、下記のようになりますが、
このプラグインを使用すると、下記のように装飾できます。
サンプルページ
【使い方】
わからない場合は、下記サンプルページをコピペしてみてください。
サンプルページ
ダウンロードはこちら
使い方がわからない場合はご連絡ください。
【オプションも用意してます】
ダウンロードはこちら
通常のチェックボックスの場合、下記のようになりますが、
このプラグインを使用すると、下記のように装飾できます。
【使い方】
- 1.jQuery本体と、mayakashi.js、mayakashi.cssを読み込みます。
- 2.装飾したいチェックボックスをクラス名「mayakashi」をつけたdivで囲みます。
-
3.divの中に下記コードを貼り付けます。複数チェックボックスがある場合は、valueの値を変えてコピペ。
<label> <input type="checkbox" name="test" value="1" /> <span> </span> </label>
-
4.header内に下記ソースをコピペ。
<script type="text/javascript"> <!-- $(function() { $('.mayakashi').mayakashi(); }); --> </script>
わからない場合は、下記サンプルページをコピペしてみてください。
サンプルページ
ダウンロードはこちら
使い方がわからない場合はご連絡ください。
【オプションも用意してます】
デフォルト(未選択時)のテキスト配列。上から順に割り当てられます。
arrDefaultTxt : [‘A’, ‘B’, ‘C’]
選択時のテキスト配列。上から順に割り当てられます。
arrCheckedTxt: [‘A’, ‘B’, ‘C’]
選択時のテキスト一括指定。
checkedTxt : ‘選択済み’
未選択時のボタン背景色。
defaultBg : ‘#EBE8E0’
選択時のボタン背景色。
checkedBg : ‘#F36B6B’
ボタン横幅。
buttonWidth : ‘100px’