Skip to content

Commit e6bed33

Browse files
ajpianoajpiano
committed
update formatting on using-jquery-core and plugins chapters
1 parent 7e68369 commit e6bed33

12 files changed

+496
-558
lines changed

‎content/plugins/a_plugin_development_pattern.md‎

Lines changed: 273 additions & 219 deletions
Large diffs are not rendered by default.

‎content/plugins/basic-plugin-creation.md‎

Lines changed: 83 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -4,75 +4,81 @@ section : 2
44
title : How to create a basic plugin
55
attribution: jQuery Fundamentals
66
---
7+
Sometimes you want to make a piece of functionality available throughout your code;
8+
for example, perhaps you want a single method you can call on a jQuery selection that performs a series of operations on the selection.
9+
In this case, you may want to write a plugin.
10+
11+
Most plugins are simply methods created in the `$.fn` namespace. jQuery guarantees that a method called on a jQuery object will be able to access that jQuery object as this inside the method.
12+
In return, your plugin needs to guarantee that it returns the same object it received, unless explicitly documented otherwise.
13+
714
## How to create a basic plugin
815

916
The notation for creating a typical plugin is as follows:
1017

11-
<div class="example" markdown="1">
12-
(function($){
13-
$.fn.myNewPlugin = function() {
14-
return this.each(function(){
15-
// do something
16-
});
17-
};
18-
}(jQuery));
19-
</div>
18+
<javascript>
19+
(function($){
20+
$.fn.myNewPlugin = function() {
21+
return this.each(function(){
22+
// do something
23+
});
24+
};
25+
}(jQuery));
26+
</javascript>
2027

2128
Don't let that confuse you though. The point of a jQuery plugin is to extend
2229
jQuery's prototype object, and that's what's happening on this line:
2330

24-
<div class="example" markdown="1">
25-
$.fn.myNewPlugin = function() { //...
26-
</div>
31+
<javascript>
32+
$.fn.myNewPlugin = function() { //...
33+
</javascript>
2734

2835
We wrap this assignment in an immediately-invoked function:
29-
30-
<div class="example" markdown="1">
31-
(function($){
32-
//...
33-
}(jQuery));
34-
</div>
36+
<javascript>
37+
(function($){
38+
//...
39+
}(jQuery));
40+
</javascript>
3541

3642
This has the effect of creating a "private" scope that allows us to extend
3743
jQuery using the dollar symbol without having to risk the possibility that the
3844
dollar has been overwritten by another library.
3945

4046
So our actual plugin, thus far, is this:
4147

42-
<div class="example" markdown="1">
43-
$.fn.myNewPlugin = function() {
44-
return this.each(function(){
45-
// do something
46-
});
47-
};
48-
</div>
48+
<javascript>
49+
$.fn.myNewPlugin = function() {
50+
return this.each(function(){
51+
// do something
52+
});
53+
};
54+
</javascript>
4955

5056
The `this` keyword within the new plugin refers to the jQuery object on which
5157
the plugin is being called.
5258

53-
<div class="example" markdown="1">
54-
var somejQueryObject = $('#something');
59+
<javascript>
60+
var somejQueryObject = $('#something');
5561

56-
$.fn.myNewPlugin = function() {
57-
alert(this === somejQueryObject);
58-
};
62+
$.fn.myNewPlugin = function() {
63+
alert(this === somejQueryObject);
64+
};
5965

60-
somejQueryObject.myNewPlugin(); // alerts 'true'
61-
</div>
66+
somejQueryObject.myNewPlugin(); // alerts 'true'
67+
</javascript>
6268

6369
Your typical jQuery object will contain references to any number of DOM
6470
elements, and that's why jQuery objects are often referred to as collections.
6571

6672
So, to do something with a collection we need to loop through it, which is most
6773
easily achieved using jQuery's `each()` method:
6874

69-
<div class="example" markdown="1">
70-
$.fn.myNewPlugin = function() {
71-
return this.each(function(){
75+
<javascript>
76+
$.fn.myNewPlugin = function() {
77+
return this.each(function(){
7278

73-
});
74-
};
75-
</div>
79+
});
80+
};
81+
</javascript>
7682

7783
jQuery's `each()` method, like most other jQuery methods, returns a jQuery
7884
object, thus enabling what we've all come to know and love as 'chaining'
@@ -81,43 +87,41 @@ return the this object. Within this loop you can do whatever you want with
8187
each element. Here's an example of a small plugin using some of the techniques
8288
we've discussed:
8389

84-
<div class="example" markdown="1">
85-
(function($){
86-
$.fn.showLinkLocation = function() {
87-
return this.filter('a').each(function(){
88-
$(this).append(
89-
' (' + $(this).attr('href') + ')'
90-
);
91-
});
92-
};
93-
}(jQuery));
94-
95-
// Usage example:
96-
$('a').showLinkLocation();
97-
</div>
90+
<javascript>
91+
(function($){
92+
$.fn.showLinkLocation = function() {
93+
return this.filter('a').each(function(){
94+
$(this).append( ' (' + $(this).attr('href') + ')');
95+
});
96+
};
97+
}(jQuery));
98+
99+
// Usage example:
100+
$('a').showLinkLocation();
101+
</javascript>
98102

99103
This handy plugin goes through all anchors in the collection and appends the
100104
href attribute in brackets.
101105

102-
<div class="example" markdown="1">
103-
&lt;!-- Before plugin is called: -->
104-
&lt;a href="page.html">Foo&lt;/a>
106+
<markup>
107+
<!-- Before plugin is called: -->
108+
<a href="page.html">Foo</a>
105109

106-
&lt;!-- After plugin is called: -->
107-
&lt;a href="page.html">Foo (page.html)&lt;/a>
108-
</div>
110+
<!-- After plugin is called: -->
111+
<a href="page.html">Foo (page.html)</a>
112+
</markup>
109113

110114
Our plugin can be optimized though:
111115

112-
<div class="example" markdown="1">
113-
(function($){
114-
$.fn.showLinkLocation = function() {
115-
return this.filter('a').append(function(){
116-
return ' (' + this.href + ')';
117-
});
118-
};
119-
}(jQuery));
120-
</div>
116+
<javascript>
117+
(function($){
118+
$.fn.showLinkLocation = function() {
119+
return this.filter('a').append(function(){
120+
return ' (' + this.href + ')';
121+
});
122+
};
123+
}(jQuery));
124+
</javascript>
121125

122126
We're using the `append` method's capability to accept a callback, and the
123127
return value of that callback will determine what is appended to each element
@@ -129,15 +133,15 @@ Here's another example of a plugin. This one doesn't require us to loop
129133
through every element with the `each()` method. Instead, we're simply going to
130134
delegate to other jQuery methods directly:
131135

132-
<div class="example" markdown="1">
133-
(function($){
134-
$.fn.fadeInAndAddClass = function(duration, className) {
135-
return this.fadeIn(duration, function(){
136-
$(this).addClass(className);
137-
});
138-
};
139-
}(jQuery));
140-
141-
// Usage example:
142-
$('a').fadeInAndAddClass(400, 'finishedFading');
143-
</div>
136+
<javascript>
137+
(function($){
138+
$.fn.fadeInAndAddClass = function(duration, className) {
139+
return this.fadeIn(duration, function(){
140+
$(this).addClass(className);
141+
});
142+
};
143+
}(jQuery));
144+
145+
// Usage example:
146+
$('a').fadeInAndAddClass(400, 'finishedFading');
147+
</javascript>

‎content/plugins/dex.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
11
---
22
title: Plugins
3+
chapter: plugins
4+
section : 1
5+
attribution: jQuery Fundamentals
36
---
7+
A jQuery plugin is simply a new method that we use to extend jQuery's prototype
8+
object. By extending the prototype object you enable all jQuery objects to
9+
inherit any methods that you add. As established, whenever you call `jQuery()`
10+
you're creating a new jQuery object, with all of jQuery's methods inherited.
11+
12+
The idea of a plugin is to do something with a collection of elements. You
13+
could consider each method that comes with the jQuery core a plugin, like
14+
`fadeOut` or `addClass`.
15+
16+
You can make your own plugins and use them privately in your code or you can
17+
release them into the wild. There are thousands of jQuery plugins available
18+
online. The barrier to creating a plugin of your own is so low that you'll
19+
want to do it straight away!

‎content/plugins/finding-evaluating-plugins.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
chapter : plugins
33
section : 3
4-
title : Finding &amp; Evaluating Plugins
4+
title : Finding & Evaluating Plugins
55
attribution: jQuery Fundamentals
66
---
77
## Finding &amp; Evaluating Plugins

‎content/plugins/whats-a-plugin.md‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎content/plugins/writing-plugins.md‎

Lines changed: 0 additions & 91 deletions
This file was deleted.

0 commit comments

Comments
 (0)