JQuery插件编写

时间：2014-11-03 12:49:02 阅读：143 评论：0 收藏：0 [点我收藏+]

标签：style blog http io color ar 使用 java for

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插件编写

标签：style blog http io color ar 使用 java for

原文地址：http://www.cnblogs.com/yangda/p/4063992.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行