Skip to content

Fix plugin code examples #311

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 13 additions & 34 deletions page/plugins/basic-plugin-creation.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title : How to Create a Basic Plugin
level: intermediate
source: http://jqfundamentals.com/legacy
attribution:
attribution:
- jQuery Fundamentals
---
Sometimes you want to make a piece of functionality available throughout your code;
Expand All @@ -19,7 +19,7 @@ $("a").css( "color", "red" );

This is some pretty basic jQuery code, but do you know what's happening behind the scenes? Whenever you use the `$` function to select elements, it returns a jQuery object. This object contains all of the methods you've been using (`css()`, `click()`, etc.), and all of the elements that fit your selector. The jQuery object gets these methods from the `$.fn` object. This object contains all of the jQuery object methods, and if we want to write our own methods, it will need to contain those as well.

Additionally the jQuery utility method `$.trim()` is used above to remove any leading or trailing empty space characters from the user input. Utility methods are functions that reside directly on
Additionally the jQuery utility method `$.trim()` is used above to remove any leading or trailing empty space characters from the user input. Utility methods are functions that reside directly on
`$` function itself. You may occasionally want to write a utility method plugin when your extension to the jQuery API does not have to do something to a set of DOM elements you've retrieved.

##Basic Plugin Authoring
Expand All @@ -29,7 +29,7 @@ Let's say we want to create a plugin that makes text within a set of retrieved e
```
$.fn.greenify = function() {
this.css( "color", "green" );
}
};

$("a").greenify(); // makes all the links green
```
Expand Down Expand Up @@ -60,14 +60,14 @@ The `$` variable is very popular among JavaScript libraries, and if you're using
$.fn.greenify = function() {
this.css( "color", "green" );
return this;
}
};

$.ltrim = function( str ) {
return str.replace(/^\s+/, '');
}
};
$.rtrim = function( str ) {
return str.replace(/\s+$/, '');
}
};

}( jQuery ));
```
Expand All @@ -81,7 +81,7 @@ In addition, the primary purpose of an Immediately Invoked Function is to allow
$.fn.greenify = function() {
this.css( "color", shade );
return this;
}
};

}( jQuery ));
```
Expand Down Expand Up @@ -110,35 +110,25 @@ It would be much better to have one slot, and use parameters to control what act
(function( $ ) {

$.fn.popup = function( action ) {

if ( action === "open") {

// Open popup code

} if ( action === "close" ) {

// Close popup code

}

};
}( jQuery ));
}( jQuery ));
```

## Using the `each()` Method
Your typical jQuery object will contain references to any number of DOM elements, and that's why jQuery objects are often referred to as collections.
## Using the `each()` Method
Your typical jQuery object will contain references to any number of DOM elements, and that's why jQuery objects are often referred to as collections.
If you want to do any manipulating with specific elements (e.g. getting data an attribute, calculating specific positions) then you need to use `each()` to
loop through the elements.
loop through the elements.

```
$.fn.myNewPlugin = function() {

return this.each(function() {

// do something to each element here

});

};
```

Expand All @@ -155,8 +145,7 @@ accept some options.

```
(function ( $ ) {

$.greenify = function( options ) {
$.fn.greenify = function( options ) {

// This is the easiest way to have default options.
var settings = $.extend({
Expand Down Expand Up @@ -192,15 +181,10 @@ we've discussed:
```
(function( $ ){
$.fn.showLinkLocation = function() {

return this.filter("a").each(function() {

$( this ).append( " (" + $( this ).attr("href") + ")" );

});

};

};
}( jQuery ));

// Usage example:
Expand All @@ -222,16 +206,11 @@ Our plugin can be optimized though:

```
(function( $ ){

$.fn.showLinkLocation = function() {

return this.filter("a").append(function() {

return " (" + this.href + ")";

});
};

}( jQuery ));
```

Expand Down