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;
}
页面的调用
<input class="mui-switch" type="checkbox" ng-model="item[col.field]" ng-change="col.handler.onChange(item)" ng-disabled="item[col.switchDisableCondition]">
另一种采用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 : '<div class="slideThree">'
+ '<input type="checkbox" ng-model="data" ng-disabled="disabled()" ng-change="test()">'
+ '<label ng-click="toggle()" ng-transclude></label>'
+'</div>',
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: '<table><thead>'
+ '<tr>'
+ '<td ng-repeat="item in table.columns">'
+ '<div ng-switch="item.type">'
+ '<div ng-switch-when="check" ng-if="!table.disabledAllCheck && selectAll">'
+ '<span class="ui-checkbox">'
+ '<input type="checkbox" id="selectAll" name="selectAll" class="ui-checkbox-normal" ng-click="selectAll({eve: $event})">'
+ '<label for="selectAll" class="ui-checkbox-simulation"></label>'
+ '</span>'
+ '<label for="selectAll" class="ui-label" ng-cloak>{{item.name}}</label>'
+ '</div>'
+ '<div ng-switch-when="check" ng-if="table.disabledAllCheck">'
+ '<span class="ui-checkbox">'
+ '<input type="checkbox" id="selectAll" name="selectAll" class="ui-checkbox-normal" disabled="">'
+ '<label for="selectAll" class="ui-checkbox-simulation f-not-allowed"></label>'
+ '</span>'
+ '<label for="selectAll" class="ui-label" ng-cloak>{{item.name}}</label>'
+ '</div>'
+ '<div ng-switch-when="normal" ng-cloak>{{item.name}}'
+ '</div>'
+ '<div ng-switch-when="link" ng-cloak>{{item.name}}'
+ '</div>'
+ '<div ng-switch-when="operation" ng-cloak>{{item.name}}'
+ '</div>'
+ '<div ng-switch-when="switch" ng-cloak>{{item.name}}'
+ '</div>'
+ '</div>'
+ '</td>'
+ '</tr>'
+ '</thead>'
+ '<tbody class="ui-table-tbody">'
+ '<tr ng-repeat="item in table.data">'
+ '<td ng-repeat="col in table.columns">'
+ '<div ng-switch="col.type">'
+ '<div ng-switch-when="check" ng-if="!item.disabledCheck">'
+ '<span class="ui-checkbox">'
+ '<input type="checkbox" id="{{item.pendId}}" name="checkbox" class="ui-checkbox-normal" ng-click="checked(item.pendId)" value="{{item.pendId}}">'
+ '<label for="{{item.pendId}}" class="ui-checkbox-simulation"></label>'
+ '</span>'
+ '</div>'
+ '<div ng-switch-when="check" ng-if="item.disabledCheck">'
+ '<span class="ui-checkbox">'
+ '<input type="checkbox" id="{{item.pendId}}" name="checkbox" class="ui-checkbox-normal" disabled="">'
+ '<label for="{{item.pendId}}" class="ui-checkbox-simulation f-not-allowed"></label>'
+ '</span>'
+ '</div>'
+ '<div ng-switch-when="normal" class="{{col.cellClass}}" ng-cloak>{{col.fieldParent? item[col.fieldParent][col.field] : item[col.field]}}'
+ '</div>'
+ '<div ng-switch-when="link" class="{{col.cellClass}}" ng-cloak><a href="javascript:;" ng-click="col.handler($event, item)">{{col.fieldParent? item[col.fieldParent][col.field] : item[col.field]}}</a>'
+ '</div>'
+ '<div ng-switch-when="operation" ng-if="item[col.showOperationCondition]">'
+ '<span ng-repeat="op in col.operations"><span class="ui-divider" ng-if="$index!=0"></span><span>'
+ '<a href="javascript:;" ng-click="op.handler($event,item)" class="{{col.cellClass}}" >{{op.name}}</a>'
+ '</span>'
+ '</span>'
+ '</div>'
+ '<div ng-switch-when="switch">'
// + '<input class="mui-switch" type="checkbox" ng-model="item[col.field]" ng-change="col.handler.onChange(item)" ng-disabled="item[col.switchDisableCondition]">'
// + '<div class="slideThree">'
// + '<input type="checkbox" value="None" id="slideThree" name="check" checked="">'
// + '<label for="slideThree"></label>'
// + '</div>'
+ '<mycheckbox ng-model="item[col.field]" change="col.handler.onChange(item)" disabled="item[col.switchDisableCondition]" beforechange="col.handler.beforeChange(item)"></mycheckbox>'
+ '</div>'
+ '</div>'
+ '</td>'
+ '</tr>'
+ '</tbody>'
+ '</table>',
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: '<div class="ui checkbox">' +
'<input type="checkbox" ng-model="vm.ngModel" ng-disabled="vm.disabled()"/>' +
'<label ng-click="vm.toggle()" ng-transclude></label>' +
'</div>',
link: function() { }
};
});
网友评论