State button case - jQuery

by Juan Lanus

HTML

<input /><br />
<label title="click to check me">
    <input type="checkbox" class="sbTest" />
    check me
</label><br />
<input type="checkbox" id="sbtestCheckBox" class="sbTest"/>
<label for="sbtestCheckBox" title="click to check me">
    check me
</label>
<br />
<input />

<pre>
The script hides the state button (checkbox) 
The text inputs are there in order to test tabbing.
The control reacts visually to focus, hover and state
change. 
It can also be disabled. 
It can be selected and operated with the keyboard. 


Inline images made here: 
http://www.scalora.org/projects/uriencoder/ 

In IE8 the label does not change its looks. 
</pre>

CSS

.sb-checkBox { font-family:sans-serif; border:3px solid rgb(160,160,160); display:inline-block; border-radius:4px; }

/*
.sb-checkBoxinput[type="checkbox"] + span {
    border:1px solid transparent;
}
.sb-checkBox input[type="checkbox"]:checked + span {
    background-repeat: no-repeat;
    background-position: 5px center;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAQMAAACTYuVlAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAqSURBVHicY/h/gOF/A8N/BoZ/CgxzEhgkHjAIPmBgfsDA/oCB/wHD/AcA2fQMeXzFYwcAAAAASUVORK5CYII=);    
}
.sb-checkBox input[type="checkbox"]:focus + span {
    border:1px solid red;
}
.sb-checkBox input[type="checkbox"] { 
    opacity:0; 
    margin:0;
    padding:0;
    display:inline-block;
    position:absolute;
    left:0px;
    top:0px;
}
.sb-checkBox label { position:relative; display:inline-block; }
.sb-checkBox span { padding-left:18px; }
.sb-checkBox label:focus { color:blue; }

.sb-checkBox span:hover { 
    cursor:pointer;
    background-repeat: no-repeat;
    background-position: 5px center;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAQMAAACTYuVlAAAABlBMVEXf39/AwMDyrNXMAAAAAXRSTlMAQObYZgAAAChJREFUeF4FwLENABAABMCzidE+sYjRjKLTiVKhECphKkPrFpvH5RAfepMIHnYve4wAAAAASUVORK5CYII=);
    }
*/

JavaScript

(function($) {
  $.fn.sbStateButton = function(options) {
    options = options || {}; 
    var defaultOpt = { 
        checkboxCls     : options.checkboxCls || 'ez-checkbox' , 
        radioCls : options.radioCls || 'ez-radio' ,    
        checkedCls      : options.checkedCls  || 'ez-checked'  ,
        selectedCls : options.selectedCls || 'ez-selected' , 
        hideCls         : 'ez-hide'
    };
    return this.each(function() {
        var $this = $(this);
        if( $this.attr('type') == 'checkbox') {
        
        
        var wrapTag = $this.attr('type') == 'checkbox' ? '<div class="'+defaultOpt.checkboxCls+'">' : '<div class="'+defaultOpt.radioCls+'">';
        // for checkbox
        if( $this.attr('type') == 'checkbox') {
            $this.addClass(defaultOpt.hideCls).wrap(wrapTag).change(function() {
                if( $(this).is(':checked') ) { 
                    $(this).parent().addClass(defaultOpt.checkedCls); 
                } 
                else {  $(this).parent().removeClass(defaultOpt.checkedCls);    }
            });
            
            if( $this.is(':checked') ) {
                $this.parent().addClass(defaultOpt.checkedCls);         
            }
        } 
    });
  }
})(jQuery);