checkbox组件的封装
组件的css样式的实现
这种采用纯css伪类的方式实现，为input组件重写样式。这种方式可以兼容webkit内核的浏览器。
但对于火狐浏览器而言checkbox样式无法重写
/**/
.mui-switch {
width: 60px;
height: 20px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
-moz-appearance : none;
user-select: none;
outline: none;
top: 8px;}
.mui-switch:before {
display: block;
content: '';
width: 27px;
height: 16px;
position: absolute;
top: 1px;
left: 0;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.mui-switch:disabled:before{
background-color: #dfdfdf;
}
.mui-switch:checked {
border-color: #64bd63;
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63; }
.mui-switch:checked:before {
left: 30px; }
.mui-switch:after {
width: 20px;
height: 30px;
content: '关';
position: absolute;
right: 0
}
.mui-switch:checked:after {
width: 20px;
height: 30px;
content: '开';
position: absolute;
left: 8px;
}
页面的调用
另一种采用label模拟的方式实现的switch样式的checkbox
.slideThree {
width: 80px;
height: 26px;
/*background: #333;*/
border: 1px solid #eeeeee;
/*border-color: #64bd63;*/
/*box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;*/
margin: 20px auto;
position: relative;
-moz-border-radius: 50px;/*
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);*/
}
.slideThree:after {
content: '关';
/*color: #000;*/
position: absolute;
right: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.slideThree:before {
content: '开';
color: #00bf00;
position: absolute;
left: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
}
.slideThree label {
display: block;
width: 34px;
height: 20px;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
background: #fcfff4;
/*background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;*/
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.slideThree input[type=checkbox] {
visibility: hidden;
}
.slideThree input[type=checkbox]:checked + label {
left: 43px;
}
.slideThree input[type=checkbox]:disabled + label {
background-color: #eeeeee;
}
app.directive('mycheckbox',function(){
return {
restrict : 'E',
replace : true,
transclude:true,
scope : {
disabled : '&?',
change: '&',
data : '=ngModel',
beforechange : '&'
},
controller : function($scope){
$scope.toggle = function() {
if(angular.isFunction($scope.disabled) && $scope.disabled()) return;
var result = $scope.beforechange();
if(result){
$scope.data = !$scope.data;
}
}
},
require : 'ngModel',
template : '',
link : function(scope,iElement,iAttrs){
scope.$watch('data',function(newValue,oldValue,scope){
console.log('')
if(newValue != oldValue){
scope.change();
}
})
}
}
})
app.directive('cTable', [
function() {
return {
restrict: 'E,A',
replace: true,
scope: {
table: '=ngModel',
selectAll: '&'
},
template: ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ '{{item.name}}'
+ ''
+ '{{item.name}}'
+ ''
+ '{{item.name}}'
+ ''
+ '{{item.name}}'
+ ''
+ ''
+ ' '
+ ' '
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ ''
+ '{{col.fieldParent? item[col.fieldParent][col.field] : item[col.field]}}'
+ ''
+ ''
+ ''
+ ''
+ '{{op.name}}'
+ ''
+ ''
+ ''
+ ''
// + ''
// + ''
+ ' '
+ ' '
+ ''
+ '
',
link: function(scope, el, attr) {
},
controller : function(){
}
};
}
]);
var vm = {
currentPage: 1,
pageSize: 10,
urlCode: getUrlParam('code'),
tableData: {
columns: [
{
'field' : 'assetPoolState',
'name' : '自定义的开关',
'type' : 'switch',
'handler' : {
// 'onChange' : function(item){
// console.log(item);
// var assetPoolState = item.assetPoolState ? 'ON' : 'OFF'
// _changeCirculateBuyState(item , assetPoolState);
// }
'onChange' : function(item){
console.log(item);
var assetPoolState = item.assetPoolState ? 'ON' : 'OFF'
_changeCirculateBuyState(item , assetPoolState);
}
},
'switchDisableCondition' : 'switchDisable'
}
],
data: []
}
};
_sendAjax('/XXX/XXX', 'get', params, function(data) {
if (!data) {
return ShowMessage("对不起您没有权限");
}
if (data.success && data.results && data.results._defaultResult && data.results._defaultResult.length) {
var items = [];
angular.forEach(data.results._defaultResult, function(value,index){
value.switchDisable = (value.status === '已购买' ? false : true) ;
value.assetPoolState = (value.assetPoolState == 'ON' ? true : false);
items.push(value);
});
vm.tableData.data = items;
_pageConfig.pno = data.results.currentPage;
_pageConfig.totalRecords = data.results.totalData;
tablePager.init(_pageConfig);
} else {
if (!data.success) {
return ShowMessage(data.message);
}
vm.tableData.data = [];
_pageConfig.pno = 0;
_pageConfig.totalRecords = 0;
tablePager.init(_pageConfig);
}
});
参考的代码
https://github.com/angularify/angular-semantic-ui/blob/master/src/checkbox/checkbox.js
'use strict';
angular.module('angularify.semantic.checkbox', [])
.directive('checkbox', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
checked: '&?',
disabled: '&?',
ngModel: '=ngModel'
},
controller: function() {
var vm = this;
// TODO: assert this is usefull ?
// if(angular.isUndefined(vm.ngModel)) { vm.ngModel = !!vm.ngModel; }
if(angular.isFunction(vm.checked)) { vm.ngModel = !!vm.checked(); }
vm.toggle = function() {
if(angular.isFunction(vm.disabled) && vm.disabled()) return;
vm.ngModel = !vm.ngModel;
}
},
controllerAs: 'vm',
bindToController: true,
require: 'ngModel',
template: '' +
'' +
'' +
'',
link: function() { }
};
});