ボタンをスイッチデザインに変換する
2015.10.26 Posted by Kitamura
こんにちは、ウェブラボ技術メモ第17回目です。
デフォルトの「ラジオボタン」や「チェックボックス」のデザインは味気ないですよね。
この味気なさを改善するためにスイッチデザインに変換してくれるJavascriptを実装してみたいと思います。
まずはhtmlのhead内でcssとjquery本体および以下のJavascriptを読み込みませます。
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script><script src="js/rcswitcher.js" type="text/javascript"></script> |
次に「ボタン」のhtmlをbody内に記述します。
このとき、「ボタン」を囲うdivに適当なclass名をつけておきましょう。
今回はclass名を【radio01】としました。
最後に、先ほどつけた適当なclass名に対してjavascriptを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script>// <![CDATA[ window.onload = function(){ $('.radio01 :radio').rcSwitcher({ // reverse: true, theme: 'light', // width: 70, blobOffset: 0, // inputs: true, autoStick: true, }) // Listen to status changes .on( 'turnon.rcSwitcher', function( e, data ){ console.log( data.$input[0].checked ); } ); }; // ]]></script> |
ここで注意して欲しいのが、「ラジオボタン」なら『.クラス名:radio』、「チェックボックス」なら『.class名:checkbox』と記述しなければいけないということです。
作成したDEMOはこちらです。
これでこれまで味気なかった「ラジオボタン」や「チェックボックス」の見栄えが良くなりました。
デザイン性を重視するWebサイトに使用してみても良いかもしれませんね。
IEは10以上が対応していますので、古いブラウザを気にしない場合に使用しましょう。
ダウンロードは以下から出来ます。
以上、ウェブラボ技術メモでした。
関連記事こちらの記事も合わせてどうぞ。
