Angularjs 实现 switch 开关
发布时间:2020-12-17 10:00:11 所属栏目:安全 来源:网络整理
导读:下面是实现效果: 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="sli
下面是实现效果: 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;} } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |