Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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
  • Loading branch information...
commit 3a3bebc55484969eb8a9dcc38203b7e7b8a9df11 1 parent 4a4b5f1
@rdworth rdworth authored
View
32 tests/static/checkbox/default.html
@@ -12,23 +12,43 @@
<body>
<div class="ui-checkbox">
- <input type="checkbox" id="check1">
+ <div class="ui-checkbox-inputwrapper">
+ <input type="checkbox" id="check1">
+ </div>
<label for="check1">Unchecked</label>
+ <div class="ui-checkbox-box ui-widget ui-state-active ui-corner-all">
+ <span class="ui-checkbox-icon"></span>
+ </div>
</div>
<div class="ui-checkbox">
- <input type="checkbox" id="check2" checked="checked">
+ <div class="ui-checkbox-inputwrapper">
+ <input type="checkbox" id="check2" checked="checked">
+ </div>
<label for="check2">Checked</label>
+ <div class="ui-checkbox-box ui-widget ui-state-active ui-corner-all">
+ <span class="ui-checkbox-icon ui-icon ui-icon-check"></span>
+ </div>
</div>
-<div class="ui-checkbox">
- <input type="checkbox" id="check3" disabled="disabled">
+<div class="ui-checkbox ui-state-disabled">
+ <div class="ui-checkbox-inputwrapper">
+ <input type="checkbox" id="check3" disabled="disabled">
+ </div>
<label for="check3">Disabled</label>
+ <div class="ui-checkbox-box ui-widget ui-state-active ui-corner-all">
+ <span class="ui-checkbox-icon"></span>
+ </div>
</div>
-<div class="ui-checkbox">
- <input type="checkbox" id="check4" checked="checked" disabled="disabled">
+<div class="ui-checkbox ui-state-disabled">
+ <div class="ui-checkbox-inputwrapper">
+ <input type="checkbox" id="check4" checked="checked" disabled="disabled">
+ </div>
<label for="check4">Checked and disabled</label>
+ <div class="ui-checkbox-box ui-widget ui-state-active ui-corner-all">
+ <span class="ui-checkbox-icon ui-icon ui-icon-check"></span>
+ </div>
</div>
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
View
3  themes/base/jquery.ui.checkbox.css
@@ -1,5 +1,6 @@
/* Checkbox
----------------------------------*/
.ui-checkbox { position: relative; }
-.ui-checkbox input { position: absolute; left: 2px; top: 2px; margin: 0; }
+.ui-checkbox .ui-checkbox-inputwrapper { width: 0; height: 0; overflow: hidden; }
.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; }
+.ui-checkbox .ui-checkbox-box { position: absolute; top: 0; left: 0; width: 1.5em; height: 1.6em; }
View
67 ui/jquery.ui.checkbox.js
@@ -21,6 +21,8 @@ $.widget( "ui.checkbox", {
_create: function() {
+ var that = this;
+
// look for label as container of checkbox
this.labelElement = this.element.closest( "label" );
if ( this.labelElement.length ) {
@@ -40,12 +42,66 @@ $.widget( "ui.checkbox", {
this.labelElement = $( this.element[0].ownerDocument ).find( "label[for=" + this.element.attr("id") + "]" );
}
- // wrap the checkbox in a new div
- // move the checkbox's label inside the new div
- this.checkboxElement = this.element.wrap( "<div></div>" ).parent()
+ // wrap the checkbox in two new divs
+ // move the checkbox's label inside the outer new div
+ this.checkboxElement = this.element.wrap( "<div class='ui-checkbox-inputwrapper'></div>" ).parent().wrap( "<div></div>" ).parent()
.addClass("ui-checkbox")
.append(this.labelElement);
+ this.boxElement = $("<div class='ui-checkbox-box ui-widget ui-state-active ui-corner-all'><span class='ui-checkbox-icon'></span></div>");
+ this.iconElement = this.boxElement.children( ".ui-checkbox-icon" );
+ this.checkboxElement.append(this.boxElement);
+
+ this.element.bind("click.checkbox", function() {
+ that._refresh();
+ });
+
+ this.element.bind("focus.checkbox", function() {
+ if ( that.options.disabled ) {
+ return;
+ }
+ that.boxElement
+ .removeClass( "ui-state-active" )
+ .addClass( "ui-state-focus" );
+ });
+
+ this.element.bind("blur.checkbox", function() {
+ if ( that.options.disabled ) {
+ return;
+ }
+ that.boxElement
+ .removeClass( "ui-state-focus" )
+ .not(".ui-state-hover")
+ .addClass( "ui-state-active" );
+ });
+
+ this.checkboxElement.bind("mouseover.checkbox", function() {
+ if ( that.options.disabled ) {
+ return;
+ }
+ that.boxElement
+ .removeClass( "ui-state-active" )
+ .addClass( "ui-state-hover" );
+ });
+
+ this.checkboxElement.bind("mouseout.checkbox", function() {
+ if ( that.options.disabled ) {
+ return;
+ }
+ that.boxElement
+ .removeClass( "ui-state-hover" )
+ .not(".ui-state-focus")
+ .addClass( "ui-state-active" );
+ });
+
+ if ( this.element.is(":disabled") ) {
+ this._setOption( "disabled", true );
+ }
+ this._refresh();
+ },
+
+ _refresh: function() {
+ this.iconElement.toggleClass( "ui-icon ui-icon-check", this.element.is(":checked") );
},
widget: function() {
@@ -53,8 +109,11 @@ $.widget( "ui.checkbox", {
},
destroy: function() {
+ this.boxElement.remove();
this.checkboxElement
- .after( this.labelElement ).end()
+ .after( this.labelElement ).end();
+ this.element
+ .unwrap( "<div></div>" )
.unwrap( "<div></div>" );
$.Widget.prototype.destroy.apply( this, arguments );
Please sign in to comment.
Something went wrong with that request. Please try again.