From 3a3bebc55484969eb8a9dcc38203b7e7b8a9df11 Mon Sep 17 00:00:00 2001 From: "Richard D. Worth" Date: Thu, 29 Apr 2010 15:39:19 -0400 Subject: [PATCH] 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 --- tests/static/checkbox/default.html | 32 +++++++++++--- themes/base/jquery.ui.checkbox.css | 3 +- ui/jquery.ui.checkbox.js | 67 ++++++++++++++++++++++++++++-- 3 files changed, 91 insertions(+), 11 deletions(-) diff --git a/tests/static/checkbox/default.html b/tests/static/checkbox/default.html index 9d94039171c..d7690b28d56 100644 --- a/tests/static/checkbox/default.html +++ b/tests/static/checkbox/default.html @@ -12,23 +12,43 @@
- +
+ +
+
+ +
- +
+ +
+
+ +
-
- +
+
+ +
+
+ +
-
- +
+
+ +
+
+ +
diff --git a/themes/base/jquery.ui.checkbox.css b/themes/base/jquery.ui.checkbox.css index 838e50c3291..07bd6652e72 100644 --- a/themes/base/jquery.ui.checkbox.css +++ b/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; } diff --git a/ui/jquery.ui.checkbox.js b/ui/jquery.ui.checkbox.js index d706497fa46..94fc666e5cc 100644 --- a/ui/jquery.ui.checkbox.js +++ b/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( "
" ).parent() + // wrap the checkbox in two new divs + // move the checkbox's label inside the outer new div + this.checkboxElement = this.element.wrap( "
" ).parent().wrap( "
" ).parent() .addClass("ui-checkbox") .append(this.labelElement); + this.boxElement = $("
"); + 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( "
" ) .unwrap( "
" ); $.Widget.prototype.destroy.apply( this, arguments );