标签:
添加一个全局函数,我们只需如下定义:
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 ‘<strong>‘ + txt + ‘</strong>‘ ; }; |
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 > < div . = "hilight { foreground: ‘orange‘ }" > Have a nice day! </ div > < div . = "hilight { background: ‘green‘ }" > Have a nice day! </ div > 现在我们能高亮哪些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 ‘<strong>‘ + txt + ‘</strong>‘ ; }; // 插件的defaults $.fn.hilight.defaults = { foreground: ‘red‘ , background: ‘yellow‘ }; // 闭包结束 })(jQuery); |
标签:
原文地址:http://www.cnblogs.com/cxxjohnson/p/5722430.html