本文主要实现两个功能,第一使用图片代替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' }); });
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。