angularjs 苹果风格开关按钮demo

余倩倩 • 2016年11月21日下午1:05 • 前端大牛 • 阅读 3356

H5就是要求样式美，尽量实现app的风格，所以下面是app风格的开关按钮风格demo;

*{padding:0;margin:0;font-family:”microsoft yahei”!important;}
body{background-color:#efefef;}
ul,li{list-style:none;}
a{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:auto;}

/* switch 开关 */
.ro-switch{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.ro-switch>input{display:none;}
.slider{padding: 2px 25px 2px 2px;background:#cccccc;transition:padding 0.2s ease-in-out,background 0.2s ease-in-out;border-radius:11px;}
.slider-thumb{width:18px;height:18px;background:#FFF;border-radius:50%;}
.ro-switch>input:checked+.slider{background:#2196F3;padding:2px 2px 2px 25px;}

<!DOCTYPE html>
<html ng-app=”myApp”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui”>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
<script src=”http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js“></script>
<title>angular js 苹果风格开关demo</title>
<link rel=”stylesheet” type=”text/css” href=”index.css”>
</head>
<body>
<toggle-btn></toggle-btn>
</body>
<script>
var app=angular.module(“myApp”,[]);
app.directive(“toggleBtn”,function(){
return {
restrict: ‘E’,
place: true,
scope:{
“btnModel”:’=’
},
template:'<label class=”ro-switch”><input type=”checkbox” ng-model=”btnModel” ng-checked=”btnModel”><div class=”slider”><div class=”slider-thumb”></div></div></label>{{btnModel}}’,
link:function(scope,elm,attr){