Writing Your Own jQuery Plugins

Setting Up

1 <script src="js/jquery-1.9.1.min.js"></script>
2 <script src="js/jquery.hello-world.js"></script>

The jQuery Plugin Structure

1 (function($) {
2
3     $.fn.helloWorld = function() {
4
5         // Future home of "Hello, World!"
6
7     }
8
9 }(jQuery));

Making Our Plugin Do Something

 1 (function($) {
 2
 3     $.fn.helloWorld = function() {
 4
 5         this.each( function() {
 6             $(this).text("Hello, World!");
 7         });
 8
 9     }
10
11 }(jQuery));

Invoke the plugin

1 <script>
2 $(document).ready( function() {
3     $(‘h2‘).helloWorld();
4 });
5 </script>

Return the results of the plugin(necessary)

 1 (function($) {
 2
 3     $.fn.helloWorld = function() {
 4
 5         return this.each( function() {
 6             $(this).text("Hello, World!");
 7         });
 8
 9     }
10
11 }(jQuery));

But Wait, There’s More!

 1 (function($) {
 2
 3     $.fn.helloWorld = function( customText ) {
 4
 5         return this.each( function() {
 6             $(this).text( customText );
 7         });
 8
 9     }
10
11 }(jQuery));

Invoke the plugin

1 <script>
2 $(document).ready( function() {
3     $(‘h2‘).helloWorld(‘¡Hola, mundo!‘);
4 });
5 </script>

Complete Customization

 1 (function($){
 2     //
 3     $.fn.helloWorld = function(options){
 4
 5         var settings = $.extend({
 6             text: "hello girl!",
 7             fontSize: null,
 8             color: null,
 9         },options);
10
11         return this.each(function(){
12             $(this).text(settings.text);
13             if(settings.fontSize != null){
14                 $(this).css("font-size",settings.fontSize);
15             }
16             if(settings.color != null){
17                 $(this).css("color",settings.color);
18             }
19         });
20
21     }
22
23 }(jQuery));

Use a “complete” variable to perform an action when our plugin completes its action.

 1 (function($){
 2     //
 3     $.fn.helloWorld = function(options){
 4
 5         var settings = $.extend({
 6             text: "hello girl!",
 7             fontSize: null,
 8             color: null,
 9             complete: function(){ alert("Done!");}
10         },options);
11
12         return this.each(function(){
13             $(this).text(settings.text);
14             if(settings.fontSize != null){
15                 $(this).css("font-size",settings.fontSize);
16             }
17             if(settings.color != null){
18                 $(this).css("color",settings.color);
19             }
20             if($.isFunction(settings.complete)){
21                 settings.complete.call(this);
22             }
23
24         });
25
26     }
27
28 }(jQuery));

On the invocation side, our code becomes:

1 $(‘h2‘).helloWorld({
2     text        : ‘Salut, le monde!‘,
3     color       : ‘#005dff‘,
4     fontStyle   : ‘italic‘,
5     complete    : function() { alert( ‘Done!‘ ) }
6 });

原文地址：Writing Your Own jQuery Plugins