@@ -21,6 +21,8 @@ $.widget( "ui.checkbox", {
21
21
22
22
_create : function ( ) {
23
23
24
+ var that = this ;
25
+
24
26
// look for label as container of checkbox
25
27
this . labelElement = this . element . closest ( "label" ) ;
26
28
if ( this . labelElement . length ) {
@@ -40,21 +42,78 @@ $.widget( "ui.checkbox", {
40
42
this . labelElement = $ ( this . element [ 0 ] . ownerDocument ) . find ( "label[for=" + this . element . attr ( "id" ) + "]" ) ;
41
43
}
42
44
43
- // wrap the checkbox in a new div
44
- // move the checkbox's label inside the new div
45
- this . checkboxElement = this . element . wrap ( "<div></div>" ) . parent ( )
45
+ // wrap the checkbox in two new divs
46
+ // move the checkbox's label inside the outer new div
47
+ this . checkboxElement = this . element . wrap ( "<div class='ui-checkbox-inputwrapper'></div>" ) . parent ( ) . wrap ( "<div ></div>" ) . parent ( )
46
48
. addClass ( "ui-checkbox" )
47
49
. append ( this . labelElement ) ;
48
50
51
+ this . boxElement = $ ( "<div class='ui-checkbox-box ui-widget ui-state-active ui-corner-all'><span class='ui-checkbox-icon'></span></div>" ) ;
52
+ this . iconElement = this . boxElement . children ( ".ui-checkbox-icon" ) ;
53
+ this . checkboxElement . append ( this . boxElement ) ;
54
+
55
+ this . element . bind ( "click.checkbox" , function ( ) {
56
+ that . _refresh ( ) ;
57
+ } ) ;
58
+
59
+ this . element . bind ( "focus.checkbox" , function ( ) {
60
+ if ( that . options . disabled ) {
61
+ return ;
62
+ }
63
+ that . boxElement
64
+ . removeClass ( "ui-state-active" )
65
+ . addClass ( "ui-state-focus" ) ;
66
+ } ) ;
67
+
68
+ this . element . bind ( "blur.checkbox" , function ( ) {
69
+ if ( that . options . disabled ) {
70
+ return ;
71
+ }
72
+ that . boxElement
73
+ . removeClass ( "ui-state-focus" )
74
+ . not ( ".ui-state-hover" )
75
+ . addClass ( "ui-state-active" ) ;
76
+ } ) ;
77
+
78
+ this . checkboxElement . bind ( "mouseover.checkbox" , function ( ) {
79
+ if ( that . options . disabled ) {
80
+ return ;
81
+ }
82
+ that . boxElement
83
+ . removeClass ( "ui-state-active" )
84
+ . addClass ( "ui-state-hover" ) ;
85
+ } ) ;
86
+
87
+ this . checkboxElement . bind ( "mouseout.checkbox" , function ( ) {
88
+ if ( that . options . disabled ) {
89
+ return ;
90
+ }
91
+ that . boxElement
92
+ . removeClass ( "ui-state-hover" )
93
+ . not ( ".ui-state-focus" )
94
+ . addClass ( "ui-state-active" ) ;
95
+ } ) ;
96
+
97
+ if ( this . element . is ( ":disabled" ) ) {
98
+ this . _setOption ( "disabled" , true ) ;
99
+ }
100
+ this . _refresh ( ) ;
101
+ } ,
102
+
103
+ _refresh : function ( ) {
104
+ this . iconElement . toggleClass ( "ui-icon ui-icon-check" , this . element . is ( ":checked" ) ) ;
49
105
} ,
50
106
51
107
widget : function ( ) {
52
108
return this . checkboxElement ;
53
109
} ,
54
110
55
111
destroy : function ( ) {
112
+ this . boxElement . remove ( ) ;
56
113
this . checkboxElement
57
- . after ( this . labelElement ) . end ( )
114
+ . after ( this . labelElement ) . end ( ) ;
115
+ this . element
116
+ . unwrap ( "<div></div>" )
58
117
. unwrap ( "<div></div>" ) ;
59
118
60
119
$ . Widget . prototype . destroy . apply ( this , arguments ) ;
0 commit comments