首页 > 代码库 > JQuery插件编写
JQuery插件编写
jQuery插件的开发包括两种:类级别的插件开发和对象级别的插件开发。
类级别的插件开发:
1、添加一个全局函数,如下定义:
jQuery.ABC = function () {alert(‘this is my first extent Program!!‘);}
如果我们需要定义多个,可采用如下定义:
jQuery.AAA = function () {alert(‘this is my first extent Program!!‘);}jQuery.BBB = function (param) {alert(‘this is my first extent Program!!‘ + param);}
调用方式:
jQuery.BBB(‘123‘);
显示结果:
2、使用jQuery.extend(object)方式定义,代码如下:
jQuery.extend({CCC: function () {alert(‘this is my first extent Program!!‘);},DDD: function (param) {alert(‘this is my first extent Program!!‘ + param);}})
3、使用命名空间,为了避免插件中某些变量或者方法与其他插件冲突,我们习惯将一个插件封装到一个命名空间下,代码如下:
jQuery.MyExtent = {EEE: function () {alert(‘this is my first extent Program!!‘);},FFF: function (param) {alert(‘this is my first extent Program!!‘ + param);}}
调用方式:
$.MyExtent.FFF(‘123‘);
二、对象级别的插件开发
对象级别插件开发有两种定义方式,分别如下:
方式一:
$(function ($) {$.fn.extend({AAA: function () {//coding......}})})(jQuery);
方式二:
$(function ($) {$.fn.FirstExtens=function(){//coding}})})(jQuery);
1.接受options参数以控制插件的行为
$(function ($) {$.fn.No2 = function (options) {var defaults = {name: ‘小李‘,age: 32};var opt = $.extend(defaults, options);alert(opt.name + ‘‘ + opt.age);}})(jQuery);
调用:
$("#tt1").No2({name: ‘张三‘});
关于extend用法的详细解释:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html
2.暴露插件的默认设置
$(function ($) {$.fn.No2 = function (options) {var opt = $.extend({}, $.fn.No2.defaults, options);alert(opt.name + ‘‘ + opt.age);}$.fn.No2.defaults = {name: ‘小李‘,age: 32};})(jQuery);
调用:
$.fn.No2.defaults.name = ‘长三‘; //可以这样调用设置值$("#tt1").No2(); //调用方法
3.适当的暴露一些函数
这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件(同时让其他人扩展你的插件)。例如,我们插件的实现里面可以定义一个名叫"format"的函数来格式化高亮文本。我们的插件现在看起来像这样,默认的format方法的实现部分在hiligth函数下面。
$(function ($) {$.fn.No2 = function (options) {var opt = $.extend({}, $.fn.No2.defaults, options);return this.each(function () {var $this = $(this);var content = $this.text();content = content + ‘--此处已经修改--‘;$this.text(content);$.fn.No2.format(opt);})}$.fn.No2.defaults = {name: ‘小李‘,age: 32}; $.fn.No2.format = function (option) {alert(‘Hi, My name is ‘ + option.name + ‘,I\‘m ‘ + option.age + ‘year old...‘);}})(jQuery);
调用:
$.fn.No2.defaults.name = ‘张三‘; //可以这样调用设置值$("#tt1").No2({name: ‘老王‘ //覆盖设置的值});$.fn.No2.format({ //暴露的函数,可以直接在外部调用name: ‘火龙果‘,age: ‘1‘});
结果:
JQuery插件编写
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。