IOS风格滑动单选按钮开关,jquery判断radio单选按钮的状态控制开关样式
.myradio设置好单选开关的默认样式,jquery判断点击时的按钮状态值,根据open或close进行按钮背景样式控制。
默认关闭样式:class="myradio mrclose" 默认开启样式:class="myradio mropen"
.myradio {
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
width: 80px;
height: 30px;
border-radius: 20px;
position: relative;
overflow: hidden;
}
.mrclose {
background-color: #e8e8e8;
}
.mropen {
background-color: #67e66c;
}
对元素绑定相应的click事件,分别获取多个开关的点击状态。
$(".myradio input").click(function(e){
var state = e.delegateTarget.defaultValue;
var myradio = $(".myradio");
var iclose = $(this).parents(".myradio").find('.close');
// console.log(iclose);
var iopen = $(this).parents(".myradio").find('.open');
// console.log(state);
$(this).parents(".myradio").find(':radio').removeAttr('checked');
$(this).parent('label').addClass('disabled');
$(this).parent('label').siblings('label').find(':radio').attr('checked',true);
if (state == 'open') {
$(this).parents(".myradio").removeClass('mropen').addClass('mrclose');
open();
} else {
$(this).parents(".myradio").removeClass('mrclose').addClass('mropen');
close();
}
function open(){
iopen.animate({left:"50px"},100);
setTimeout(function(){
iopen.hide();
iclose.show();
iopen.css('left',0);
$(".myradio label").removeClass('disabled');
},300);
}
function close(){
iclose.animate({left:"0px"},100);
setTimeout(function(){
iclose.hide();
iopen.show();
iclose.css('left','50px');
$(".myradio label").removeClass('disabled');
},300);
}
})
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791