基于jquery扩展漂亮的CheckBox-幸凡学习网

基于jquery扩展漂亮的CheckBox

关注我吧

2013/11/19 9:46:49 阅读次数:6248Tags:jq checkbox

大家都知道默认的html复选框控件样式可定义相当有限，无法满足大多用户的美观度。今天跟大家一起分享前一段时间自己编写的CheckBox控件。喜欢的朋友可以拿去使用，有什么好的建议希望你给我留言。废话不多说，切入正题。

效果如下图所示：

Html完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>基于jquery扩展漂亮的CheckBox-幸凡学习网</title>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<style type="text/css">    

li{list-style:none;}
.combox{float:left;background:url(http://img.blog.csdn.net/20131118235940937);}  
.combox{width:16px;height:16px;background-position:-21px -40px;cursor:pointer;font-size:9px;margin-right:1px;}  
.combox.checked{background-position:-37px -40px;}
.cb_txt{display:inline-block;margin-right:3px; cursor:pointer;line-height:16px;}

</style>
</head>
<body>
<div class="content"> <b class="combox _txt" _txt="审核"></b> <b class="combox _txt" _txt="商户管理"></b> <b class="combox _txt" _txt="数据清理"></b> <b class="combox _txt" _txt="产品管理清理"></b> </div>
<script>

    //复选框  
    var CheckBox = function () {  
        this.obj;  
        var _this = this, _obj;  
        //初始化  
        this.init = function () {  
            _obj = _this.obj;  
            var tem = _obj.length > 1 ? _obj.eq(0) : _obj;  
            if (tem.length == 1 && tem.attr('class').indexOf('combox') == -1) {  
                showMessage("控件属性设置有误：部分控件并不是复选框！");  
                return;  
            }  
            //对象单击事件  
            var click_fun = function (obj) {  
                if (obj.attr('class').indexOf('checked') > -1) {  
                    obj.removeClass('checked');  
                    _this.click_cancel();  
                } else {  
                    obj.addClass('checked');  
                    _this.click_callback();  
                }  
            }  
      
            //设置有文字复选框  
            if (_obj.attr('_txt') != undefined) {  
                _obj.each(function (i) {  
                    var cb = _obj.eq(i);  
                    cb.wrapAll('<font class="cb_txt"></font>');  
                    //文本单击事件  
                    cb.parent().append(cb.attr('_txt')).click(function () { click_fun(cb); });  
                });  
            } else//对象点击事件  
                _obj.unbind('click').click(function () { click_fun($(this)); });  
        }  
        //点击回调事件  
        this.click_callback = function () { }  
        //取消选择事件  
        this.click_cancel = function () { }  
    }  

    var checkbox = new CheckBox();  
	checkbox.obj = $('.content .combox');  
	//点击回调事件 根据自己的需求去调整，默认没有相应操作事件，可以不用赋值  
		checkbox.click_callback = function () { 
	//fun_setPay();
	}  
	//取消选择事件  
	checkbox.click_cancel = function () { 
		//fun_setPay(); //可以取消值 
	}  
   checkbox.init();
</script>
</body>
</html>

使用的图片：