ページトップへ

【jQuery】チェックボックスを装飾するプラグイン

チェックボックスを装飾するプラグインを作ってみました。
ダウンロードはこちら
通常のチェックボックスの場合、下記のようになりますが、




このプラグインを使用すると、下記のように装飾できます。




サンプルページ

【使い方】
  1. 1.jQuery本体と、mayakashi.js、mayakashi.cssを読み込みます。
  2. 2.装飾したいチェックボックスをクラス名「mayakashi」をつけたdivで囲みます。
  3. 3.divの中に下記コードを貼り付けます。複数チェックボックスがある場合は、valueの値を変えてコピペ。
    <label>
    	<input type="checkbox" name="test" value="1" />
    	<span>
    	</span>
    </label>
    
  4. 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’



ダウンロードはこちら

2015年03月03日

お問い合わせ

※ご依頼の際にはご予算/納期/使用用途を記載していただけるとスムーズに対応が可能です。
※都内近郊であれば直接のお打ち合わせも可能です。希望される際はその旨をご連絡ください。

※作成した作品の著作権譲渡はいたしておりません。
(著作権譲渡の必要がある場合はご依頼時にご相談ください)
※制作実績としてサイトやSNSにて公開させていただくことがございます。(公開NGの場合はご依頼時にご連絡ください)
※イラストの修正については別途費用が発生する場合がございます。
(ラフ段階は基本無償ですが回数や内容によっては費用が発生する場合がございます。また、着色後は基本費用が発生いたします)

お名前 (必須)

メールアドレス (必須)

メッセージ本文(必須)

自動返信メールが送信されます。
返信メールが届いていない場合は正しく送信できていない可能性がございます。