/** * 复选框按钮 */ ;(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);
使用方法:javascript
<input id="check_box"/> <script type=text/javascript> $(function(){ $('#check_box').hxCheckBox({ text: '复选框测试', checkText: '●', // 默认为'√' //.....其余的属性,颜色等,请参照源码中 default值 }); }); </script>