jQuery表單單選按鈕美化制作滑動式單選按鈕選擇樣式美化



149 594 199



特效描述:單選按鈕美化 滑動式單選按鈕 選擇樣式美化,

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jtumbler.css" type="text/css" media="screen" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-jtumbler-1.0.1.min.js"></script>

3. HTML代碼

<div style="width:720px;margin:0 auto;">
	<h3>當選按鈕</h3>
	<p><button id="toggle-jtumbler">美化樣式 打開或關閉</button></p>
	<h3>改樣式</h3>
	<p>
		<ul class="colors">
			<li class="jtumbler-magenta"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-purple"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-teal"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-lime"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-brown"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-pink"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-orange"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-blue"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-red"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-green"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-marine"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-white"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-black"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-dark-gray current"><a href="javascript:;">&nbsp;</a></li>
			<li class="jtumbler-light-gray"><a href="javascript:;">&nbsp;</a></li>
		</ul>
	</p>
	<div style="clear:both;"></div>
	<div id="options-container">
		<div class="option-left">
			<h4>質量保證</h4>
			<div class="radio-switch">
				<input type="radio" name="options[qa]" value="no" id="no-qa">
				<label for="no-qa">No QA</label>
				<input type="radio" name="options[qa]" value="standard" id="standard-qa" checked="true">
				<label for="standard-qa">Standard QA</label>
				<input type="radio" name="options[qa]" value="middle" id="middle-qa">
				<label for="middle-qa">Middle QA</label>
				<input type="radio" name="options[qa]" value="full" id="full-qa">
				<label for="full-qa">Full QA</label>
			</div>
		</div>
		<div class="option-right">
			<h4>周轉時間</h4>
			<div class="radio-switch">
				<input type="radio" name="options[time]" value="no" id="no-rush">
				<label for="no-rush">No Rush</label>
				<input type="radio" name="options[time]" value="normal" id="normal-delivery" checked="true">
				<label for="normal-delivery">Normal Delivery</label>
				<input type="radio" name="options[time]" value="rush" id="rush-delivery">
				<label for="rush-delivery">Rush Delivery</label>
			</div>
		</div>
		<div class="clear"></div>
		<div class="option-left">
			<h4>肖像</h4>
			<div class="radio-switch">
				<input type="radio" name="options[images]" value="yes" id="images-yes" checked="true">
				<label for="images-yes">Yes</label>
				<input type="radio" name="options[images]" value="no" id="images-no">
				<label for="images-no">No</label>
			</div>
		</div>
		<div class="option-right">
			<h4>簡單?</h4>
			<div class="radio-switch">
				<input type="radio" name="options[notarized]" value="yes" id="notarized-yes" checked="true">
				<label for="notarized-yes">Yes</label>
				<input type="radio" name="options[notarized]" value="no" id="notarized-no">
				<label for="notarized-no">No</label>
			</div>
		</div>
		<div class="clear"></div>
		<div class="option-left">
			<h4>證明書</h4>
			<div class="radio-switch">
				<input type="radio" name="options[certified]" value="1" id="certified-1" checked="true">
				<label for="certified-1">1</label>
				<input type="radio" name="options[certified]" value="" id="certified-2">
				<label for="certified-2">2</label>
				<input type="radio" name="options[certified]" value="" id="certified-3">
				<label for="certified-3">3</label>
				<input type="radio" name="options[certified]" value="" id="certified-4">
				<label for="certified-4">4</label>
				<input type="radio" name="options[certified]" value="" id="certified-5">
				<label for="certified-5">5</label>
				<input type="radio" name="options[certified]" value="" id="certified-6">
				<label for="certified-6">6</label>
				<input type="radio" name="options[certified]" value="" id="certified-7">
				<label for="certified-7">7</label>
			</div>
		</div>
	</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片滑動 圖片滑塊 顏色選擇 顏色選擇器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表