编写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
附完整代码如下:
1
<html>2
<head>3
<title>jquery</title> 4
<script language="javascript" src="jquery-latest.js"></script> 5
<script language="javascript">6
jQuery.fn.extend({ 7
checkbox: function(opt) {8
$(this).hide().each(function(){9
$('<img>')10
.attr({src: this.checked ? opt.checked : opt.unchecked, name: this.name})11
.click(function(){12
var check = $(this).next()[0].checked == true;13
$(this)14
.attr({src: check ? opt.unchecked : opt.checked})15
.next()[0].checked = !check; 16
})17
.insertBefore(this);18
});19
},20
toggleCheckbox: function(o, opt) {21
o = o || 'on';22
return this.each(function() {23
switch(o) {24
case 'on': 25
$('img[@name='+this.name+']').attr({src: opt.checked});26
this.checked = true;27
break;28
case 'off':29
$('img[@name='+this.name+']').attr({src: opt.unchecked});30
this.checked = false;31
break;32
case 'toggle':33
$('img[@name='+this.name+']').attr({src: this.checked ? opt.unchecked : opt.checked});34
this.checked = !this.checked;35
break;36
}37
});38
} 39
});40
41
$(function() {42
// 单选43
$('input[@type=checkbox]').checkbox(44
{45
checked: 'checked.gif', 46
unchecked: 'unchecked.gif'47
});48
49
// 全选50
$('input[@name=btn1]').click(function() {51
$('input[@type=checkbox]').toggleCheckbox(52
'on', 53
{54
checked: 'checked.gif', 55
unchecked: 'unchecked.gif'56
}); 57
});58
59
// 全不选60
$('input[@name=btn2]').click(function() {61
$('input[@type=checkbox]').toggleCheckbox(62
'off', 63
{64
checked: 'checked.gif', 65
unchecked: 'unchecked.gif'66
}); 67
}); 68
69
// 反选70
$('input[@name=btn3]').click(function() {71
$('input[@type=checkbox]').toggleCheckbox(72
'toggle', 73
{74
checked: 'checked.gif', 75
unchecked: 'unchecked.gif'76
}); 77
}); 78
79
// 查看选择状态80
$('input[@name=btn]').click(function() {81
var sumCheck = $('input[@type=checkbox][@checked]');82
if (sumCheck.size() == 0)83
alert('你一个也没选');84
else85
{86
var s = '';87
sumCheck.each(function() {88
s += $(this).attr("name") + ',';89
});90
alert('你选择了'+s);91
}92
}); 93
94
95
});96
</script>97
</head>98
99
<body>100
<div id="test">101
<p><input type="checkbox" name="box1"/> Option 1</p>102
<p><input type="checkbox" name="box2"/> Option 2</p>103
<p><input type="checkbox" name="box3"/> Option 3</p>104
<p><input type="checkbox" name="box4"/> Option 4</p>105
<input type="button" name="btn" value="Show state" /> 106
<input type="button" name="btn1" value="SelectAll" /> 107
<input type="button" name="btn2" value="DisSelectAll" />108
<input type="button" name="btn3" value="ToggleSelect" />109
</div>110
</body>111
112
</html>