基于jquery扩展漂亮的CheckBox

最新推荐文章于 2024-11-08 16:09:18 发布

aiqianli4773

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量121

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tiaoceng/p/5634130.html

版权

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

Html部分代码如下：

<b class="combox"></b>

Css部分代码如下：

.combox{float:left;background:url(/img/Icon_BG.png);}
.combox{width:16px;height:16px;background-position:-21px -40px;cursor:pointer;font-size:9px;}
.combox.checked{background-position:-37px -40px;}

Js部分代码如下：

1.自定复选框类

//复选框
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 () { }
}

2。调用如下：

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

使用的图片：

示例展示图：

以下为示例教程：

CheckBox()

Contents

CheckBox()

html代码

<head>

<／head>

<body>

<／div>

<／body>

init()

初始化对象

示例:

$(document).ready(function () {
　　　$('.com_table .combox').each(function (i, item) {
　　　　　　var checkbox = new CheckBox();
　　　　　　checkbox.obj = $(this);
　　　　　　checkbox.init();
　　　})
})

展示效果:

click_callback()

点击回调事件

示例:

$('.com_table .combox').each(function (i, item) {
　　　var checkbox = new CheckBox();
　　　checkbox.obj = $(this);
　　　//已选中该项
　　　checkbox.click_callback = function () {
　　　　　　alert("已选中该项");
　　　}
　　　checkbox.init();
}）

展示效果:

click_cancel()

取消选择事件

示例:

$('.com_table .combox').each(function (i, item) {
　　　var checkbox = new CheckBox();
　　　checkbox.obj = combox;
　　　//取消事件
　　　checkbox.click_cancel = function () {
　　　　　　alert("已取消选择");
　　　}
　　　checkbox.init();
}）

展示效果: