Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Fix plugin code examples #311

Closed
wants to merge 2 commits into from

1 participant

@rmurphey
Collaborator

addresses #310 plus other minor style issues

@rmurphey rmurphey closed this in 654e3ea
@alimony alimony referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
@rmurphey rmurphey referenced this pull request from a commit in rmurphey/learn.jquery.com
@rmurphey rmurphey Merge branch 'master' into fix_method_refs
* master: (21 commits)
  0.2.7
  Remove remaining trailing whitespace from all pages. Fixes #313.
  Style and typography fixes, and code style adherence in the JavaScript 101 section. Fixes #312.
  0.2.6
  Correct comment in :input selector in Selecting Elements article. Fixes #306.
  Expand the JavaScript 101 'Scope' article with more useful information and explanations. Fixes #201.
  Added 0 to the list of falsy values in JavaScript 101 Conditional Code article. Fixes #300. Fixes #271
  Inserted missing word in the JavaScript 101 Arrays article. Fixes #299.
  Fixed inconsistency in showLinkLocation example in Basic Plugin Creation article. Fixes #307.
  Fix example and other style cleanup in Basic Plugin Creation article. Fixes #310. Fixes #311.
  Update list of reserved words in JavaScript. Fixes #301.
  Style and typography fixes and code style adherence in the Events section. Fixes #294.
  Style and typography fixes, and code style adherence in the Effects section. Fixes #290.
  Style and typography fixes, and code style adherence in the Code Organization section. Fixes #287.
  Remove double ampersands in README header. Fixes #284.
  Code and prose style improvements to all articles in Ajax chapter. Fixes #283.
  Style fixes on the About page. Fixes #279.
  Style guide fixes for the index, contributing, and About jQuery articles. Fixes #270
  relabel queue/dequeue content as advanced
  Added a missing 'i' in the for loop. Fixes #280.
  ...

Conflicts:
	page/ajax/ajax-and-forms.md
	page/ajax/jquery-ajax-methods.md
	page/effects/custom-effects.md
	page/effects/intro-to-effects.md
	page/events/event-basics.md
	page/events/event-helpers.md
	page/events/introduction-to-custom-events.md
	page/events/triggering-event-handlers.md
bac5e33
@arthurvr arthurvr referenced this pull request from a commit in arthurvr/learn.jquery.com
@rmurphey rmurphey Fix example and other style cleanup in Basic Plugin Creation article.…
… Fixes #310. Fixes #311.
a661ef7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 13 additions and 34 deletions.
  1. +13 −34 page/plugins/basic-plugin-creation.md
View
47 page/plugins/basic-plugin-creation.md
@@ -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;
@@ -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
@@ -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
```
@@ -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 ));
```
@@ -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 ));
```
@@ -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
-
});
-
};
```
@@ -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({
@@ -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:
@@ -222,16 +206,11 @@ Our plugin can be optimized though:
```
(function( $ ){
-
$.fn.showLinkLocation = function() {
-
return this.filter("a").append(function() {
-
return " (" + this.href + ")";
-
});
};
-
}( jQuery ));
```
Something went wrong with that request. Please try again.