仿iPhone开关式按钮(jQuery+CSS3)

最新推荐文章于 2024-07-25 14:02:05 发布

weixin_34190136

最新推荐文章于 2024-07-25 14:02:05 发布

阅读量59

点赞数

文章标签： javascript php ViewUI

原文链接：https://my.oschina.net/pandao/blog/83476

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="pandao QQ:272383090" /> 
<title>仿iPhone开关式按钮(jQuery+CSS3)</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;padding:50px;}
a{color:#444;text-decoration: none;}
a:hover{color:#065BC2;text-decoration: none;}
.clear{clear:both;}
img{border:none;vertical-align: middle;}
ul{list-style: none;}
.mwui-switch-btn{
	width:84px;  
	display:block;
	padding:1px;
	background:#3B75FD;
	overflow:hidden;
	margin-bottom:5px;
	border:1px solid #2E58C1;
	border-radius:18px;
	cursor: pointer;
}
.mwui-switch-btn span{
	width:32px;
	font-size:14px;
	height:18px;
	padding:4px 5px 2px 5px;
	display:block; 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f6f6f6,endColorstr=#eeeeee,grandientType=1);
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6), to(#eeeeee));
	background:-moz-linear-gradient(top, #f6f6f6, #eeeeee);
	border-radius:18px;
	float:left;
	color:#3B75FD;
	text-align:center; 
} 
.mwui-switch-btn:hover span{
	background:#fff;
}
.mwui-switch-btn span.off{float:right;}
input[type='submit']{padding:5px 10px;cursor: pointer;}
</style>
</head>
<body>
<form method="post">
	显示图标1：<button class="mwui-switch-btn"><span change="开" class="off">关</span><input type="hidden" name="show_icon" value="0" /></button> 
	显示顶栏1：<button class="mwui-switch-btn"><span change="关">开</span><input type="hidden" name="open_topbar" value="1" /></button> 
	<br />
	显示图标2：<button class="mwui-switch-btn"><span change="OFF">ON</span><input type="hidden" name="show_icon2" value="1" /></button> 
	显示顶栏2：<button class="mwui-switch-btn"><span change="ON" class="off">OFF</span><input type="hidden" name="open_topbar2" value="0" /></button> 
	<br />
	<input type="submit" id="submit" value="提交" />
</form>
<div id="debuger"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
	$(function() { 
		$('.mwui-switch-btn').each(function() {
			$(this).bind("click", function() { 
				var btn = $(this).find("span");
				var change = btn.attr("change");
				btn.toggleClass('off'); 

				if(btn.attr("class") == 'off') { 
					$(this).find("input").val("0");
					btn.attr("change", btn.html()); 
					btn.html(change);
				} else { 
					$(this).find("input").val("1");
					btn.attr("change", btn.html()); 
					btn.html(change);
				}  

				return false;
			});
		});

		$("#submit").click(function() {
			var form = $(this).parent()[0];
			var inputs = form.getElementsByTagName('input'); 
			var params = [];
			$('#debuger').html('');

			for (var i=0; i < inputs.length; i++) { 
				params.push(inputs[i].name+"="+inputs[i].value);
			} 

			$.post("post.php", params.join("&")+"&temp="+Math.random(), function(data) {
				$('#debuger').html(data);
			});

			return false;	
		});
	});
</script> 
</body>
</html>

转载于:https://my.oschina.net/pandao/blog/83476