独特のデザインで仕上げるjQueryチェックボタンとリストボタン

11_7_27_i

こりゃ~インパクトあるわっ!目立つチェックボタンとリストボタン
リストボタンとチェックボタンって見慣れているけどよぉ~く見ると地味ですね。これをインパクトあるボタンに変えてしまうのが今回紹介するjQueryのScrew Default Buttons!です。導入は簡単です!

インパクトあるボタンをjQueryでつくろう!Screw Default Buttons!

実際の設置してみました。


HTMLコードサンプル

<div class="radioExample">
 <input type="radio" name="size" id="large"/><label for="large">Large</label><br />
 <input type="radio" name="size" id="medium"/><label for="medium">Medium</label><br />
 <input type="radio" name="size" id="small"/><label for="small">Small</label><br />
</div>

<div class="checkboxExample">
 <input type="checkbox" name="apple" id="selectAll"/><label for="selectAll">Select All</label><br />
 <input type="checkbox" name="apple" id="apples"/><label for="apples">Apples</label><br />
 <input type="checkbox" name="orange" id="oranges"/><label for="oranges">Oranges</label><br />
 <input type="checkbox" name="banana" id="bananas"/><label for="bananas">Bananas</label><br />
</div>
<br style="clear:both;">

CSSコードサンプル

.radioExample {
	float:			left;
	width:			300px;
	height:			335px;
	margin-top:		20px;
	}

.checkboxExample {
	float:			right;
	width:			300px;
	height:			335px;
	margin-top:		20px;
	}

.styledRadio {
	float:			left;
	clear:			both;
	margin-bottom:	10px;
	}

.styledCheckbox {
	float:			left;
	clear:			both;
	margin-bottom:	10px;
	}

label {
	float:			left;
	line-height:	85px;
	font-size:		40px;
	padding-left:	5px;
	color:			#0580a8;
	font-weight:	bold;
	text-shadow:	1px 2px 4px rgba(255,255,255, 1);
	font-family:	Arial, Helvetica, sans-serif;
	}

head部コードサンプル

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="js/jquery.screwdefaultbuttons.js"></script>

<script>

$(document).ready(function(){

	$('input:radio').screwDefaultButtons({
		checked: 	"url(images/radio_Checked.jpg)",
		unchecked:	"url(images/radio_Unchecked.jpg)",
		width:		85,
		height:		85
	});

	$('input:checkbox').screwDefaultButtons({
		checked: 	"url(images/checkbox_Checked.jpg)",
		unchecked:	"url(images/checkbox_Unchecked.jpg)",
		width:		85,
		height:		85,
		selectAll:  "#selectAll"
	});

});
</script>

一言

うぅ~ん地味を脱却と思いきや・・・ちょっとインパクトありすぎるような・・・。こうなったらフォーム全体をこんな感じに仕上げていく感じになりますね。それはそれで面倒な話です。まぁ~使えるときに使おうって程度ですね。

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/jquery/397/trackback/