Skip to content

Commit

Permalink
Checkbox: Added checkbox icon element
Browse files Browse the repository at this point in the history 
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
@rdworth
rdworth committed Apr 29, 2010
1 parent 4a4b5f1 commit 3a3bebc
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 11 deletions.
32 changes: 26 additions & 6 deletions tests/static/checkbox/default.html
View file
Expand Up @@ -12,23 +12,43 @@
<body> <body>


<div class="ui-checkbox"> <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> <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>


<div class="ui-checkbox"> <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> <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>


<div class="ui-checkbox"> <div class="ui-checkbox ui-state-disabled">
<input type="checkbox" id="check3" disabled="disabled"> <div class="ui-checkbox-inputwrapper">
<input type="checkbox" id="check3" disabled="disabled">
</div>
<label for="check3">Disabled</label> <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>


<div class="ui-checkbox"> <div class="ui-checkbox ui-state-disabled">
<input type="checkbox" id="check4" checked="checked" disabled="disabled"> <div class="ui-checkbox-inputwrapper">
<input type="checkbox" id="check4" checked="checked" disabled="disabled">
</div>
<label for="check4">Checked and disabled</label> <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> </div>


<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
Expand Down
3 changes: 2 additions & 1 deletion themes/base/jquery.ui.checkbox.css
View file
@@ -1,5 +1,6 @@
/* Checkbox /* Checkbox
----------------------------------*/ ----------------------------------*/
.ui-checkbox { position: relative; } .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 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; }
67 changes: 63 additions & 4 deletions ui/jquery.ui.checkbox.js
View file
Expand Up @@ -21,6 +21,8 @@ $.widget( "ui.checkbox", {


_create: function() { _create: function() {


var that = this;

// look for label as container of checkbox // look for label as container of checkbox
this.labelElement = this.element.closest( "label" ); this.labelElement = this.element.closest( "label" );
if ( this.labelElement.length ) { if ( this.labelElement.length ) {
Expand All @@ -40,21 +42,78 @@ $.widget( "ui.checkbox", {
this.labelElement = $( this.element[0].ownerDocument ).find( "label[for=" + this.element.attr("id") + "]" ); this.labelElement = $( this.element[0].ownerDocument ).find( "label[for=" + this.element.attr("id") + "]" );
} }


// wrap the checkbox in a new div // wrap the checkbox in two new divs
// move the checkbox's label inside the new div // move the checkbox's label inside the outer new div
this.checkboxElement = this.element.wrap( "<div></div>" ).parent() this.checkboxElement = this.element.wrap( "<div class='ui-checkbox-inputwrapper'></div>" ).parent().wrap( "<div></div>" ).parent()
.addClass("ui-checkbox") .addClass("ui-checkbox")
.append(this.labelElement); .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() { widget: function() {
return this.checkboxElement; return this.checkboxElement;
}, },


destroy: function() { destroy: function() {
this.boxElement.remove();
this.checkboxElement this.checkboxElement
.after( this.labelElement ).end() .after( this.labelElement ).end();
this.element
.unwrap( "<div></div>" )
.unwrap( "<div></div>" ); .unwrap( "<div></div>" );


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

0 comments on commit 3a3bebc

Please sign in to comment.