添加一个全局函数，我们只需如下定义：
|
1
2
3
|
jQuery.foo = function() {alert(‘This is a test. This is only a test.‘);}; |
添加多个全局函数，可采用如下定义：
|
1
2
3
4
5
6
7
|
jQuery.foo = function() {alert(‘This is a test. This is only a test.‘);};jQuery.bar = function(param) {alert(‘This function takes a parameter, which is "‘ + param + ‘".‘);};调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar(‘bar‘); |
1.3 使用jQuery.extend(object);
|
1
2
3
4
5
6
7
8
|
jQuery.extend({ foo: function() { alert(‘This is a test. This is only a test.‘); }, bar: function(param) { alert(‘This function takes a parameter, which is "‘ + param +‘".‘); } }); |
|
1
2
3
4
5
6
7
8
9
10
11
|
jQuery.myPlugin = { foo:function() { alert(‘This is a test. This is only a test.‘); }, bar:function(param) { alert(‘This function takes a parameter, which is "‘ + param + ‘".‘);} };采用命名空间的函数仍然是全局函数，调用时采用的方法：$.myPlugin.foo(); $.myPlugin.bar(‘baz‘); |
|
1
2
3
4
5
6
7
|
(function($){ $.fn.extend({ pluginName:function(opt,callback){ // Our plugin implementation code goes here. } }) })(jQuery); |
形式2：
|
1
2
3
4
5
|
(function($) { $.fn.pluginName = function() { // Our plugin implementation code goes here. }; })(jQuery); |
|
1
2
3
4
5
|
$.fn.hilight = function() { // Our plugin implementation code goes here. }; 我们的插件通过这样被调用：$(‘#myDiv‘).hilight(); |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// plugin definition$.fn.hilight = function(options) { var defaults = { foreground: ‘red‘, background: ‘yellow‘ }; // Extend our default options with those provided. var opts = $.extend(defaults, options); // Our plugin implementation code goes here.};我们的插件可以这样被调用：$(‘#myDiv‘).hilight({ foreground: ‘blue‘}); |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// plugin definition$.fn.hilight = function(options) { // Extend our default options with those provided. // Note that the first arg to extend is an empty object - // this is to keep from overriding our "defaults" object. var opts = $.extend({}, $.fn.hilight.defaults, options); // Our plugin implementation code goes here.};// plugin defaults - added as a property on our plugin function$.fn.hilight.defaults = { foreground: ‘red‘, background: ‘yellow‘}; 现在使用者可以包含像这样的一行在他们的脚本里：//这个只需要调用一次，且不一定要在ready块中调用$.fn.hilight.defaults.foreground = ‘blue‘;接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色：$(‘#myDiv‘).hilight(); |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// plugin definition$.fn.hilight = function(options) { // iterate and reformat each matched element return this.each(function() { var $this = $(this); // ... var markup = $this.html(); // call our format function markup = $.fn.hilight.format(markup); $this.html(markup); });};// define our format function$.fn.hilight.format = function(txt) {return ‘‘ + txt + ‘‘;}; |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
(function($) { // plugin definition $.fn.hilight = function(options) { debug(this); // ... }; // private function for debugging function debug($obj) { if (window.console && window.console.log) window.console.log(‘hilight selection count: ‘ + $obj.size()); };// ...})(jQuery); |
|
1
2
3
4
5
6
7
8
9
|
$.fn.hilight = function(options) { // ... // build main options before element iteration var opts = $.extend({}, $.fn.hilight.defaults, options); return this.each(function() { var $this = $(this); // build element specific options var o = $.meta ? $.extend({}, opts, $this.data()) : opts; //... |
|
1
2
3
4
5
6
7
8
9
10
11
|
<div .="hilight { background: ‘red‘, foreground: ‘white‘ }"> Have a nice day!<div .="hilight { foreground: ‘orange‘ }"> Have a nice day!<div .="hilight { background: ‘green‘ }"> Have a nice day!现在我们能高亮哪些div仅使用一行脚本：$(‘.hilight‘).hilight(); |
2.7 整合
下面使我们的例子完成后的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
// 创建一个闭包(function($) { // 插件的定义 $.fn.hilight = function(options) { debug(this); // build main options before element iteration var opts = $.extend({}, $.fn.hilight.defaults, options); // iterate and reformat each matched element return this.each(function() { $this = $(this); // build element specific options var o = $.meta ? $.extend({}, opts, $this.data()) : opts; // update element styles $this.css({ backgroundColor: o.background, color: o.foreground }); var markup = $this.html(); // call our format function markup = $.fn.hilight.format(markup); $this.html(markup); }); }; // 私有函数：debugging function debug($obj) { if (window.console && window.console.log) window.console.log(‘hilight selection count: ‘ + $obj.size()); }; // 定义暴露format函数 $.fn.hilight.format = function(txt) { return ‘‘ + txt + ‘‘; }; // 插件的defaults $.fn.hilight.defaults = { foreground: ‘red‘, background: ‘yellow‘ };// 闭包结束})(jQuery); |
jQuery插件开发全解析，类级别与对象级别开发
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有