编写jQuery插件来扩展checkbox


本文主要实现两个功能,第一使用图片代替html checkbox一成不变的样式并可以使用checkbox的正常功能,其次是前者的基础之上实现checkbox的全选,全不选和反选.同时也捎带介绍了jQuery最基本的插件写法.


jQuery插件的编写可以通过jQuery.fn.extend方法来实现

jQuery.fn.extend({
    foo: function() {
        alert('i'm foo');
    },
    bar: function() {
        alert('i'm bar');
    }
})

在接下来的代码中,我们就可以在jQuery对象中直接使用这两个方法了

$(function(){
    $('#btn').click(function() {$(this).foo();});
    $('#btn1').click(function() {$(this).bar();});
})

接下来介绍如何编写一个简单的checkbox插件

首先实现checkbox的单选以及改变checkbox的样式,我们需要准备两张图片,一张是选中时,另一张是未选中时,实现的原理很简单,首先把checkbox的原本样式隐藏,然后构造一个<img>对象,分别赋于src和name属性,添加click事件,实现在选择的时候图片替换.最后插入这个构造对象.

            checkbox: function(opt) {
                $(this).hide().each(function(){
                            $('<img>')
                            .attr({src: this.checked ? opt.checked : opt.unchecked, name: this.name})
                            .click(function(){
                                var check = $(this).next()[0].checked == true;
                                $(this)
                                    .attr({src: check ? opt.unchecked : opt.checked})
                                    .next()[0].checked = !check;                                
                            })
                            .insertBefore(this);
                });
            }

完成之后,如何使用呢?

            $('input[@type=checkbox]').checkbox(
                {
                    checked: 'checked.gif', 
                    unchecked: 'unchecked.gif'
                });

把它绑定到$(function(){})中

第二步,实现全选,全不选和单选,网上已经有很多这样的例子了,在这里我添加了一行图片替换的代码来模拟选择和取消选择.

            toggleCheckbox: function(o, opt) {
                o = o || 'on';
                return this.each(function() {
                    switch(o) {
                        case 'on':                            
                            $('img[@name='+this.name+']').attr({src: opt.checked});
                            this.checked = true;
                            break;
                        case 'off':
                            $('img[@name='+this.name+']').attr({src: opt.unchecked});
                            this.checked = false;
                            break;
                        case 'toggle':
                            $('img[@name='+this.name+']').attr({src: this.checked ? opt.unchecked : opt.checked});
                            this.checked = !this.checked;
                            break;
                    }

绑定下面的代码到$(function(){})中使用

            // 全选
            $('input[@name=btn1]').click(function() {
                $('input[@type=checkbox]').toggleCheckbox(
                    'on', 
                    {
                        checked: 'checked.gif', 
                        unchecked: 'unchecked.gif'
                    }); 
            });

到这里,我们就可以大功告成了.如果你使用过163的信箱,利用上述代码稍微修改下应该就可以很简单的实现它的checkbox选择了吧? :)

参考资料:
1. http://kawika.org/jquery/checkbox/
2. http://bbs.jquery.org.cn/thread-130-1-1.html

附完整代码如下:

posted on 2007-04-28 18:32  andyran  阅读(2830)  评论(2)  编辑  收藏  举报

导航