移动端网页特效：左右滑动开关

网上搜索“左右滑动开关”，结果有很多诸如：纯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;
     52px;
    height: 22px;
    line-height: 1em;
    margin-right: 50px;
    margin-top: 5px;
}

.ui-switch .input {
     52px;
    height: 22px;
    position: absolute;
    z-index: 10;
    border: 0;
    background: 0 0;
    -webkit-appearance: none;
    outline: 0
}

.ui-switch .input:before {
    content: '';
     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: '';
     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事件，其他的并没有用到，有必要把这个事件单独取出来引用。这个后期考虑吧~