html苹果风格开关,仿iPhone开关式按钮(jQuery+CSS3)
*{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;}
显示图标1：关
显示顶栏1：开
显示图标2：ON
显示顶栏2：OFF
$(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;
});
});