下面是实现效果:
AngularJS 实现代码:
ro.directive('toggle',[function(){ return { restrict: 'E',replace: true,scope:{ 'ngModel':'=' },template:'<label class="ro-switch"><input type="checkBox" ng-model="ngModel" ng-checked="ngModel"><div class="slider"><div class="slider-thumb"></div></div></label>',link:function(scope,elm,attr){ } } }]);
CSS端代码:
/* switch 开关 */ .ro-switch{ display: inline-block;cursor:pointer; > input{display: none;} .slider{ padding: 2px 25px 2px 3px; background:#CCCCCC; > .slider-thumb { width:18px;height:18px;background:#FFF; } transition: padding 0.2s ease-in-out,background 0.2s ease-in-out; } > input:checked + .slider{background:#2196F3;padding: 2px 3px 2px 25px;} }