标签:
网上搜索“左右滑动开关”,结果有很多诸如:纯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事件,其他的并没有用到,有必要把这个事件单独取出来引用。这个后期考虑吧~
标签:
原文地址:http://www.cnblogs.com/xiaochongchong/p/5524409.html