jQuery表单单选按钮美化制作滑动式单选按钮选择样式美化



135 536 179



特效描述:单选按钮美化 滑动式单选按钮 选择样式美化,

代码结构

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

加群请备注:从官网了解到