チェックボックスやラジオボタンを画像にするjQueryプラグイン「Screw Default Buttons」!

2014/06/05

screw_default_buttons

こんにちは。
今回はチェックボックスやラジオボタンを画像にするjQueryプラグイン「Screw Default Buttons」の紹介をしたいと思います。

チェックボックスやラジオボタンをカスタマイズするプラグインは他にもありますが、こちらのプラグインが簡単に設置できるので紹介します。

 

まずはダウンロードしてみよう!

Screw Default Buttons」の「DOWNLOAD」のボタンをクリックします。
githubのサイトに飛ばされて「Download ZIP」のボタンをクリックしダウンロードします。

 

設置してみよう!

body閉じタグの直前にjQueryのファイルを読み込みます。
ダウンロードしたZIPファイルを解凍し、jquery.screwdefaultbuttonsV2.min.jsを任意の場所にコピーして読み込みます。
解凍したファイルの画像もコピーして読み込みます。

 

オリジナルの画像にする。

チェックボックスやラジオボタンをオリジナルの画像変更する方法です。

まずはオリジナルの画像を作ります。ONとOFFの画像を一枚の画像にし、OFFの方を上にします。
画像を読み込ますコードを変更します。

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。簡単にできますのでオススメです。
以上でチェックボックスやラジオボタンを画像にするjQueryプラグイン「Screw Default Buttons」の紹介でした。

topへ戻る