About

チェックボックスやラジオボタンのデザインを簡単に変える方法(jQuery使用)

Share on FriendFeed
[`tweetmeme` not found]

こんにちは、秋永です。
超久しぶりにjQuery案件で重いものがあり、そこでちょっと悩んだことをアウトプットしようかなと思い、記事を書いてみました。

「そんなの常識だよ!」ということもあると思いますが、生暖かい目で見てあげてください。

ラジオボタン、チェックボックスのデザイン変更の仕方

これらは同じプラグインで行えます。
なかにはプルダウンメニューとかいろいろなものも変えられるプラグインもあるのですが、
今から紹介するもののほうが使い方が簡単です。

使うプラグインは「ScrewDefaultButtons」というものです。

使い方

  1. まず、公式サイトにいき、ダウンロードボタンを押します
  2. 「github」というサイトに飛ばされるので、サイトの真ん中より上にある「zip」というボタンを押します。
  3. するとダウンロードが始まるので、解凍してください
  4. 解凍したフォルダの中に入っているjsフォルダの中に入っている「jquery.screwdefaultbuttonsV2.min.js」を、htmlに読み込んでください
  5. 解凍したフォルダに入っている「examples.html」に記述されているjs([JSその1]参照)を、自分で用意したJSファイルに追加します
  6. 「input:radio」と「input:checkbox」の部分のurlを、カスタマイズしたい画像に変更(この時の画像はON/OFFを一枚に合わせて作る、OFF状態が上になるように作る)
  7. それぞれのheightとwidthを指定します(この時の高さは画像の高さではなく、片方の高さのことです)
  8. 完成ー。

実際のデモです。

[jsその1]

[javascript]

$(function(){

$('input:radio').screwDefaultButtons({
image: 'url("images/radioSmall.jpg")',
width: 43,
height: 43
});

$('input:checkbox').screwDefaultButtons({
image: 'url("images/checkboxSmall.jpg")',
width: 43,
height: 43
});

});
[/javascript]

え?js読み込んだだけじゃん、と思うかもですが、その通りですね。

なので簡単と銘打っています。
これ以上簡単なのって存在するの?って感じですよねー。

便利な時代になりました、そのことに感謝しつつそろそろ記事を終えたいと思います。

最後まで読んでくださった方、(いたら)ありがとうございますー。
それではー。

2012/12/22 | JavaScript

関連記事

no image

YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

記事を読む

no image

jQueryでロールオーバーを実装する2つの方法

世界中のakiファンの皆様、おはようございます。今回はjQueryで画...

記事を読む

みんなのアイドル「初音ミク」をブラウザ上で躍らせる「MMD.js」がktkr

はい・・・・タイトルひどいですね。 まぁそんなことはどうでもいいんで...

記事を読む

no image

今すぐ使える!?jQueryプラグイン紹介-part1-

はい、こんばんはです~ 3ヶ月ぶりですが、読者様は果たしているのだろ...

記事を読む

新着記事

no image

WordPressのアイキャッチのサイズを追加しても変更されないのは大体再生成すれば直る件

functions.phpでアイキャッチのサイズを変更する方法といえば...

記事を読む

bbpressのトピックスURLがループ内ですべて同じになってしまう場合の解消法

こんにちは。 今日はWordpressのプラグイン、bbpressの...

記事を読む

WordPressの管理画面をカスタマイズしよう!

最近趣味で「コミサ」というwebサイトを作ったのですが、これが会員サイ...

記事を読む

無料でデータベースも使えるサーバを紹介します!

最近趣味でサイトを運営したいなーと思った際に、このドメイン(ousia...

記事を読む

no image

YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

記事を読む

コメント/トラックバック

トラックバック用URL:

コメントフィード




管理人にのみ公開されます

no image
WordPressのアイキャッチのサイズを追加しても変更されないのは大体再生成すれば直る件

functions.phpでアイキャッチのサイズを変更する方法といえば...

bbpressのトピックスURLがループ内ですべて同じになってしまう場合の解消法

こんにちは。 今日はWordpressのプラグイン、bbpressの...

WordPressの管理画面をカスタマイズしよう!

最近趣味で「コミサ」というwebサイトを作ったのですが、これが会員サイ...

無料でデータベースも使えるサーバを紹介します!

最近趣味でサイトを運営したいなーと思った際に、このドメイン(ousia...

no image
YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

→もっと見る

PAGE TOP ↑