网上搜索“左右滑动开关”，结果有很多诸如：纯CSS3左右滑动开关按钮等。但事实上，这种按钮是click事件触发的。在手机网页上用这种组件，对于IPhone用户，见多了很多这种滑动按钮，如果点击触发，会显得很不协调。
说白了，网上的这种按钮都是点击按钮而非滑动按钮。我们现在要找一个滑动事件来替代click事件，最先想到的是touch相关的事件复，后来在wscschool上找到了
Swipe事件：http://www.w3school.com.cn/jquerymobile/jquerymobile_events_touch.asp；。
这个解决方案需要引入jQuery Mobile；需要注意引入这个js后产生一系列的添加样式。
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/****去掉jquery mobile的loading****/
.ui-loader-default{ display:none}
.ui-mobile-viewport{ border:none;}
.ui-page {padding: 0; margin: 0; outline: 0}
/******滑动开关按钮*****/
.ui-switch {
/*position: absolute;*/
font-size: 16px;
/*right: 15px;*/
top: 6px;
width: 52px;
height: 22px;
line-height: 1em;
margin-right: 50px;
margin-top: 5px;
}
.ui-switch .input {
width: 52px;
height: 22px;
position: absolute;
z-index: 10;
border: 0;
background: 0 0;
-webkit-appearance: none;
outline: 0
}
.ui-switch .input:before {
content: ‘‘;
width: 50px;
height: 25px;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
border-radius: 20px;
cursor: pointer;
display: inline-block;
position: relative;
vertical-align: middle;
-webkit-user-select: none;
user-select: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border-color: #dfdfdf;
-webkit-box-shadow: #dfdfdf 0 0 0 0 inset;
box-shadow: #dfdfdf 0 0 0 0 inset;
-webkit-transition: border .4s, -webkit-box-shadow .4s;
transition: border .4s, box-shadow .4s;
-webkit-background-clip: content-box;
background-clip: content-box
}
.ui-switch.cur .input:before {
border-color: #ed6459;
-webkit-box-shadow: #ed6459 0 0 0 16px inset;
box-shadow: #ed6459 0 0 0 16px inset;
background-color: #ed6459;
transition: border .4s, box-shadow .4s, background-color 1.2s;
-webkit-transition: border .4s, -webkit-box-shadow .4s, background-color 1.2s;
background-color: #ed6459
}
.ui-switch.cur .input:after {
left: 27px
}
.ui-switch .input:after {
content: ‘‘;
width: 25px;
height: 25px;
position: absolute;
top: 1px;
left: 0;
border-radius: 100%;
background-color: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-webkit-transition: left .2s;
transition: left .2s
}
</style>
</head>
<body>
<div>
<label class="ui-switch">
<span class="input"></span>
</label>
</div>
<script src="../../assets/js/jquery.min.js"></script>
<script>
//去掉 jquery mobile默认给input的添加,。顺序在引入之前
$("input").attr(‘data-role‘,‘none‘);
$("select").attr(‘data-role‘,‘none‘);
</script>
<script src="../../assets/js/jquery.mobile.js"></script>
<script>
$(".ui-switch").on(‘swipe‘,function(){
if($(this).attr("class").indexOf("cur")>0) {
$(this).removeClass("cur");
}
else{
$(this).addClass("cur");
}
});
</script>
</body>
</html>
至此，从点击的开关变成了滑动的开关。有点问题，其实我没只用到了jQuery Mobile中的
Swipe事件，其他的并没有用到，有必要把这个事件单独取出来引用。这个后期考虑吧~
时间： 2024-10-10 12:32:57