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 });