Skip to content

Commit 3a3bebc

Browse files
rdworthrdworth
committed
Checkbox: Added checkbox icon element
Added wrapper element to overflow hide input so it doesn't appear through semi-transparent disabled icon element Set correct disabled and checked state on init Update state on focus, hover, and click
1 parent 4a4b5f1 commit 3a3bebc

File tree

3 files changed

+91
-11
lines changed

3 files changed

+91
-11
lines changed

‎tests/static/checkbox/default.html‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,43 @@
1212
<body>
1313

1414
<div class="ui-checkbox">
15-
<input type="checkbox" id="check1">
15+
<div class="ui-checkbox-inputwrapper">
16+
<input type="checkbox" id="check1">
17+
</div>
1618
<label for="check1">Unchecked</label>
19+
<div class="ui-checkbox-box ui-widget ui-state-active ui-corner-all">
20+
<span class="ui-checkbox-icon"></span>
21+
</div>
1722
</div>
1823

1924
<div class="ui-checkbox">
20-
<input type="checkbox" id="check2" checked="checked">
25+
<div class="ui-checkbox-inputwrapper">
26+
<input type="checkbox" id="check2" checked="checked">
27+
</div>
2128
<label for="check2">Checked</label>
29+
<div class="ui-checkbox-box ui-widget ui-state-active ui-corner-all">
30+
<span class="ui-checkbox-icon ui-icon ui-icon-check"></span>
31+
</div>
2232
</div>
2333

24-
<div class="ui-checkbox">
25-
<input type="checkbox" id="check3" disabled="disabled">
34+
<div class="ui-checkbox ui-state-disabled">
35+
<div class="ui-checkbox-inputwrapper">
36+
<input type="checkbox" id="check3" disabled="disabled">
37+
</div>
2638
<label for="check3">Disabled</label>
39+
<div class="ui-checkbox-box ui-widget ui-state-active ui-corner-all">
40+
<span class="ui-checkbox-icon"></span>
41+
</div>
2742
</div>
2843

29-
<div class="ui-checkbox">
30-
<input type="checkbox" id="check4" checked="checked" disabled="disabled">
44+
<div class="ui-checkbox ui-state-disabled">
45+
<div class="ui-checkbox-inputwrapper">
46+
<input type="checkbox" id="check4" checked="checked" disabled="disabled">
47+
</div>
3148
<label for="check4">Checked and disabled</label>
49+
<div class="ui-checkbox-box ui-widget ui-state-active ui-corner-all">
50+
<span class="ui-checkbox-icon ui-icon ui-icon-check"></span>
51+
</div>
3252
</div>
3353

3454
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>

‎themes/base/jquery.ui.checkbox.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* Checkbox
22
----------------------------------*/
33
.ui-checkbox { position: relative; }
4-
.ui-checkbox input { position: absolute; left: 2px; top: 2px; margin: 0; }
4+
.ui-checkbox .ui-checkbox-inputwrapper { width: 0; height: 0; overflow: hidden; }
55
.ui-checkbox label { display: block; position: relative; padding-right: 1em; line-height: 1; padding: .5em 0 .5em 30px; margin: 0 0 .3em; cursor: pointer; z-index: 1; }
6+
.ui-checkbox .ui-checkbox-box { position: absolute; top: 0; left: 0; width: 1.5em; height: 1.6em; }

‎ui/jquery.ui.checkbox.js‎

Lines changed: 63 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ $.widget( "ui.checkbox", {
2121

2222
_create: function() {
2323

24+
var that = this;
25+
2426
// look for label as container of checkbox
2527
this.labelElement = this.element.closest( "label" );
2628
if ( this.labelElement.length ) {
@@ -40,21 +42,78 @@ $.widget( "ui.checkbox", {
4042
this.labelElement = $( this.element[0].ownerDocument ).find( "label[for=" + this.element.attr("id") + "]" );
4143
}
4244

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()
4648
.addClass("ui-checkbox")
4749
.append(this.labelElement);
4850

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") );
49105
},
50106

51107
widget: function() {
52108
return this.checkboxElement;
53109
},
54110

55111
destroy: function() {
112+
this.boxElement.remove();
56113
this.checkboxElement
57-
.after( this.labelElement ).end()
114+
.after( this.labelElement ).end();
115+
this.element
116+
.unwrap( "<div></div>" )
58117
.unwrap( "<div></div>" );
59118

60119
$.Widget.prototype.destroy.apply( this, arguments );

0 commit comments

Comments
 (0)