jCheckBox.js
2.23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/**
* 单选、复选框
*
*/
define( 'jCheckBox', function( require, exports ) {
var jCheckBox = function ( target, opt ) {
this.el = $( target );
this.options = {
checkboxClass: 'checkbox_square',
radioClass: 'radio_square',
increaseArea: '20%' // optional
};
$.extend( this.options, opt );
// return this.each(function() {
// var checkBox = new jCheckBox( this.target );
// checkBox.init();
// });
this.init();
};
// function jCheckBox(el){
// this.el = el;
// }
jCheckBox.prototype = {
maskStyle:{position: 'absolute', top: '-20%', left: '-20%', display: 'block', width: '140%', height: '140%', margin:0, padding: 0, border: 0, opacity: 0, background:'rgb(255, 255, 255)'},
init:function(){
var className, mask;
if(this.el.data('isBind')){
return;
}
this.el.data('isBind', true);
className = this.el.is(':checkbox') ? this.options.checkboxClass : this.options.radioClass;
className += this.el.is(':checked') ? ' checked' : '';
className += this.el.is(':disabled') ? ' disabled' : '';
this.mask = $('<span />').css(this.maskStyle);
this.el.css(this.maskStyle).wrap(function(){
return '<span class="'+ className+ '" />';
}).after(this.mask);
this.bindEvents();
},
bindEvents:function(){
var _this = this;
this.el.on('change', function(){
var isChecked = $(this).is(':checked');
//$(this).parent().toggleClass('checked', isChecked);
_this.mask.trigger( 'click' );
});
this.mask.on('click', function(){
if(_this.el.is(':disabled')){
return;
}
if(_this.el.is(':checkbox')){
var isChecked = _this.el.is(':checked');
if( _this.el.parents( 'label' ).length > 0 ){
_this.el.attr('checked', isChecked).parent().toggleClass('checked', isChecked);
}else{
_this.el.attr('checked', !isChecked).parent().toggleClass('checked', !isChecked);
}
}else{
_this.el.attr('checked', true).parent().toggleClass('checked', true);
var radioName = _this.el.attr('name');
if(!radioName || !radioName.length){
return;
}
$(':radio[name='+radioName+']').not(_this.el).prop('checked', false).parent().toggleClass('checked', false);
}
});
}
};
return jCheckBox;
});