ボタンをスイッチデザインに変換する

こんにちは、ウェブラボ技術メモ第17回目です。

デフォルトの「ラジオボタン」や「チェックボックス」のデザインは味気ないですよね。

この味気なさを改善するためにスイッチデザインに変換してくれるJavascriptを実装してみたいと思います。

まずはhtmlのhead内でcssとjquery本体および以下のJavascriptを読み込みませます。

次に「ボタン」のhtmlをbody内に記述します。

このとき、「ボタン」を囲うdivに適当なclass名をつけておきましょう。

今回はclass名を【radio01】としました。

最後に、先ほどつけた適当なclass名に対してjavascriptを記述します。

ここで注意して欲しいのが、「ラジオボタン」なら『.クラス名:radio』、「チェックボックス」なら『.class名:checkbox』と記述しなければいけないということです。

作成したDEMOはこちらです。

これでこれまで味気なかった「ラジオボタン」や「チェックボックス」の見栄えが良くなりました。

デザイン性を重視するサイトに使用してみても良いかもしれませんね。

IEは10以上が対応していますので、古いブラウザを気にしない場合に使用しましょう。

ダウンロードは以下から出来ます。

ahmad-sa3d/rcswitcher

以上、ウェブラボ技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。