jQueryとCSSで作るiPhone風ラジオボタン・チェックボックス

いつも使っているラジオボタンやチェックボックスにもっと彩りを!ここではCSSとjQueryを使ってiPhone風のデザインに変える方法を紹介します。使用する画像は一枚のみ。CSSスプライトで表示位置を変えます。サンプルも用意してみたので覗いてみてくださいね!


↑私が10年以上利用している会計ソフト!

サンプルはこちら。IE7, IE8, FF, Chromeで正常動作

See the Pen Mobile like radio/check buttons by Mana (@manabox) on CodePen.

ファイルを準備

必要なファイルを準備します

コーディング

ファイルを読み込む

ヘッダー内にjQueryを読み込ませます。

<script type='text/javascript' src='/sample/js/jquery.js'></script>

HTML

<p class="field switch">
	<input type="radio" id="radio1" name="field"  checked />
	<input type="radio" id="radio2" name="field" />
	<label for="radio1" class="cb-enable selected"><span>Enable</span></label>
	<label for="radio2" class="cb-disable"><span>Disable</span></label>
</p>
<br /><br />
<p class="field switch">
	<label class="cb-enable"><span>On</span></label>
	<label class="cb-disable selected"><span>Off</span></label>
	<input type="checkbox" id="checkbox" class="checkbox" name="field2" />
</p>

JavaScript

jQueryでラジオボタンやチェックボックスが選択されたときにクラスを加え、背景画像の表示位置を変更します。

$(document).ready( function(){ 
	$(".cb-enable").click(function(){
		var parent = $(this).parents('.switch');
		$('.cb-disable',parent).removeClass('selected');
		$(this).addClass('selected');
		$('.checkbox',parent).attr('checked', true);
	});
	$(".cb-disable").click(function(){
		var parent = $(this).parents('.switch');
		$('.cb-enable',parent).removeClass('selected');
		$(this).addClass('selected');
		$('.checkbox',parent).attr('checked', false);
	});
});

CSS

CSSスプライト使用のため、背景画像の表示位置が重要。

.cb-enable, .cb-disable, .cb-enable span, .cb-disable span { background: url(/sample/images/switch.gif) repeat-x; display: block; float: left; }
	.cb-enable span, .cb-disable span { line-height: 30px; display: block; background-repeat: no-repeat; font-weight: bold; }
	.cb-enable span { background-position: left -90px; padding: 0 10px; }
	.cb-disable span { background-position: right -180px;padding: 0 10px; }
	.cb-disable.selected { background-position: 0 -30px; }
	.cb-disable.selected span { background-position: right -210px; color: #fff; }
	.cb-enable.selected { background-position: 0 -60px; }
	.cb-enable.selected span { background-position: left -150px; color: #fff; }
	.switch label { cursor: pointer; }
	.switch input { display: none; }

意外と簡単にできあがりました :)

参照サイト: DEV GROW

シェアする

コメント

“jQueryとCSSで作るiPhone風ラジオボタン・チェックボックス” への7件のフィードバック

  1. hide より:

    ども。
    これはいいですね。とてもおしゃれでスマートですな。ソースコードもシンプルで簡単に設置できますね。参考にして使ってみます。今jQueryに夢中です。

  2. […] Posted jQueryとCSSで作る<b>iPhone</b>風ラジオボタン・チェックボックス | Web…. […]

  3. Webクリエイターボックス より:

    私もjQueryに夢中です!

  4. Monji より:

    Thanks for the mention! Cool site too! :)

  5. freewebdev.jp より:

    jQueryとCSSで作るiPhone風ラジオボタン・チェックボックス…

    「iPhone Style Radio and Checkbox Switches using JQuery and CSS」 いつも使っているラジオボタンやチェックボックスにもっと彩りを!ここではCSSとjQueryを使ってiPhone風のデザインに変える方法を紹介します。使用する画像は一枚のみ。CSSスプライトで表示位置を変えます。サンプルも用意してみたので覗いてみてくださいね!…

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)