/**
* 复选框按钮
*/
;(function($) {
function checkToUI(target, checked ){
var tar = $(target);
var box = tar.next('span');
var opts = tar.data('opts');
tar.prop('checked', !!checked );
if( checked ) {
box.css('background-color', opts.checkedBoxColor );
box.text(opts.checkText );
}
else {
box.css('background-color', opts.uncheckedBoxColor);
box.text('');
}
}
function disable(target) {
var tar = $(target);
var opts = tar.data('opts');
var box = tar.next('span');
var body = tar.parent();
tar.attr('disabled', true );
body.off('click').off('mouseover').off('mouseout');
var lab = body.find('span:last');
if( tar.prop('checked'))
box.css('background-color', opts.disableBoxColor);
box.css('border-color', opts.disableBorderColor);
lab.css('color', opts.disableTextColor);
}
function enable(target) {
var tar = $(target);
var opts = tar.data('opts');
var box = tar.next('span');
var body = tar.parent();
var lab = body.find('span:last');
tar.removeAttr('disabled');
checkToUI( target, tar.prop('checked'));
lab.css('color', opts.textColor );
body.on('click', function(){
if( tar.prop('checked')) {
tar.prop('checked', false );
box.css('background-color', opts.uncheckedBoxColor);
box.text('');
}
else {
tar.prop('checked', true );
box.css('background-color', opts.checkedBoxColor );
box.text(opts.checkText );
}
}).on('mouseover',function(){
box.css('border-color', opts.mouseOnBoxBoderColor);
lab.css('color', opts.mouseOnTextColor);
}).on('mouseout',function(){
box.css('border-color', opts.boxBorderColor);
lab.css('color', opts.textColor);
});
}
function init( target, opts ) {
var tar = $(target);
tar.data('opts', opts );
var body = $('<span></span>')
.css('margin', '0')
.css('padding', '0')
.css('display', 'inline-block')
.css('height', opts.height === 0 ? 'auto' : opts.height )
.css('width', opts.width === 0 ? 'auto' : opts.width )
.css('vertical-align', 'middle')
.css('cursor', 'pointer')
.css('text-align', opts.align)
.off('click')
.off('mouseover')
.off('mouseout')
.insertBefore(tar);
tar.attr('type', 'hidden')
.css('display', 'none')
.appendTo(body);
var boxHeight = opts.height === 0 ? 16 : opts.height;
$('<span></span>')
.css('vertical-align', 'middle')
.css('margin', '0 2px 0 0')
.css('padding', '0')
.css('width', boxHeight + 'px')
.css('height', boxHeight + 'px')
.css('display', 'inline-block')
.css('border-color', opts.boxBorderColor)
.css('border-radius', '4px')
.css('border-style', 'solid')
.css('border-width', '1px')
.css('font-size', opts.checkTextSize + 'px')
.css('text-align', 'center')
.css('line-height', boxHeight + 'px' )
.css('overflow', 'hidden')
.css('color', opts.boxTextColor)
.css('font-weight', 'bold')
.appendTo(body);
if( opts.iconCls !== '' ) {
$('<span></span>')
.css('vertical-align', 'middle')
.css('margin', '0 2px')
.css('padding', '0')
.css('width', '16px')
.css('height', '16px')
.css('display', 'inline-block')
.addClass(opts.iconCls)
.appendTo(body);
}
$('<span></span>')
.css('vertical-align', 'middle')
.css('margin', '0 0 0 2px')
.css('padding', '0')
.css('display', 'inline-block')
.text(opts.text)
.css('color', opts.textColor )
.appendTo(body);
enable( target );
}
$.fn.hxCheckbox = function( opts, param ) {
if (typeof opts === 'string') {
var method = $.fn.hxCheckbox.methods[opts];
if (method) {
return method(this, param);
}
}
else {
opts = $.extend({}, $.fn.hxCheckbox.defaults, opts || {} );
return this.each(function () {
init( this, opts);
});
}
};
$.fn.hxCheckbox.methods = {
getValue: function(tar){
return $(tar[0]).prop('checked');
},
setValue: function(tar, param){
return tar.each(function(){
checkToUI(this, param);
});
},
clear: function(tar){
return tar.each(function(){
checkToUI(this, false);
});
},
disable: function(tar){
return tar.each(function(){
disable(this);
});
},
enable: function(tar) {
return tar.each(function(){
enable(this);
});
},
show: function(tar){
return tar.each(function(){
$(this).parent().show();
});
},
hide: function(tar){
return tar.each(function(){
$(this).parent().hide();
});
},
destory: function(tar){
return tar.each(function(){
$(this).parent().off('click').off('mouseover').off('mouseout').remove();
});
}
};
$.fn.hxCheckbox.defaults = {
textColor: '#31708f',
mouseOnTextColor: 'orangered',
boxBorderColor: '#95B8E7',
mouseOnBoxBoderColor: 'orangered',
uncheckedBoxColor: 'unset',
checkedBoxColor: 'darkorange',
boxTextColor: 'white',
disableBorderColor: 'grey',
disableBoxColor: '#8d8d8d',
disableTextColor: 'grey',
checkText: '√',
checkTextSize: 12,
align: 'left',
text: '',
iconCls: '',
width: 0,
height: 0
};
})(jQuery);
使用方法:
<input id="check_box"/>
<script type=text/javascript>
$(function(){
$('#check_box').hxCheckBox({
text: '复选框测试',
checkText: '●', // 默认为'√'
//.....其他的属性,颜色等,请参照源码中 default值
});
});
</script>