東京都新宿区のWeb制作会社 ウェブラボ株式会社

スタッフブログ

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

2015.10.26 Posted by

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ahmad-sa3d/rcswitcher

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

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278