Response title
This is preview!
fix + enhancement of ui.checkbox , third state
in Developing jQuery UI
•
11 years ago
get it from github
check the filesi've changed the focus and blur events with hover for the element
and
changed focus and blur to mouseover and mouseout for the checkboxElement
also i added the keydown event for managing the third state
js , css, and images
and because i can't atach the js and css i'll paste the here
- /*
- * jQuery UI Checkbox @VERSION
- *
- * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT (MIT-LICENSE.txt)
- * and GPL (GPL-LICENSE.txt) licenses.
- *
- * {{TODO replace with docs link once plugin is released}}
- * http://wiki.jqueryui.com/Checkbox
- * {{/TODO}}
- *
- * Depends:
- * jquery.ui.core.js
- * jquery.ui.widget.js
- */
- (function( $ ) {
- var checkboxId = 0;
- $.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 ) {
- // move the checkbox outside (before) the label
- this.element.insertBefore( this.labelElement );
- // the checkbox needs an id since it's no longer inside the label
- if ( !this.element.attr( "id" ) ) {
- this.element.attr( "id", "ui-checkbox-" + checkboxId );
- checkboxId += 1;
- }
- // associate label by for=id of checkbox
- this.labelElement.attr( "for", this.element.attr("id") );
- } else {
- // look for label by for=id of checkbox
- this.labelElement = $( this.element[0].ownerDocument ).find( "label[for=" + this.element.attr("id") + "]" );
- }
- // 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("hover.checkbox",
- function() {
- if ( that.options.disabled ) {
- return;
- }
- that.boxElement
- .removeClass( "ui-state-active" )
- .addClass( "ui-state-focus" );
- },
- 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" );
- });
- this.checkboxElement.bind("mouseup.checkbox", function() {
- if ( that.options.disabled ) {
- return;
- }
- that.boxElement
- .removeClass( "ui-state-highlight" );
- });
- this.checkboxElement.bind("mousedown.checkbox", function() {
- if ( that.options.disabled ) {
- return;
- }
- that.boxElement
- .addClass( "ui-state-highlight" );
- });
- 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() {
- return this.checkboxElement;
- },
- destroy: function() {
- this.boxElement.remove();
- this.checkboxElement
- .after( this.labelElement ).end();
- this.element
- .unwrap( "<div></div>" )
- .unwrap( "<div></div>" );
- $.Widget.prototype.destroy.apply( this, arguments );
- },
- _setOption: function( key, value ) {
- if ( key === "disabled" ) {
- this.element
- .attr( "disabled", value );
- this.checkboxElement
- [ value ? "addClass" : "removeClass" ]( "ui-checkbox-disabled" );
- }
- $.Widget.prototype._setOption.apply( this, arguments );
- },
- });
- $.extend( $.ui.checkbox, {
- version: "@VERSION"
- });
- }( jQuery ));
- /* Checkbox
- ----------------------------------*/
- .ui-checkbox { position: relative; margin-top:.3em; font-weight:normal;}
- .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 3em; margin: 0 0 .3em; cursor: pointer; z-index: 1; color:#555555; }
- .ui-checkbox label:hover{ color:#212121;}
- .ui-checkbox .ui-checkbox-box { position: absolute; top: 0; left: 0; width: 1.5em; height: 1.6em; }
- .ui-checkbox .ui-state-highlight, .ui-widget-content .ui-checkbox .ui-state-highlight, .ui-widget-header .ui-checkbox .ui-state-highlight {border: 1px solid #FFD27A; background: #FBEDD0 url(images/ui-bg_glass_55_fbedd0_1x400.png) 50% 50% repeat-x; color: #363636; }
- .ui-checkbox .ui-state-highlight .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); }
1