Skip to content

Commit 1ed57d0

Browse files
committed
Added section on options to basic plugins article
1 parent 7337bea commit 1ed57d0

File tree

1 file changed

+35
-0
lines changed

1 file changed

+35
-0
lines changed

content/plugins/basic-plugin-creation.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,41 @@ Notice that we return the results of `each()` instead of returning `this`.
9191
Since `each()` is already chainable, it returns `this`, which we then return.
9292
This is a better way to maintain chainability than what we've been doing so far.
9393

94+
##Accepting options
95+
96+
As your plugins get more and more complex, it's a good idea to make your plugin
97+
customizable by accepting options. The easiest way do this, especially if there
98+
are lots of options, is with an object literal. Let's change our greenify plugin to
99+
accept some options.
100+
101+
<javascript>
102+
(function ($) {
103+
$.greenify = function (options) {
104+
// This is the easiest way to have default options.
105+
var settings = $.extend( {
106+
'color' : '#556B2F', // These are the defaults
107+
'background-color' : 'white'
108+
}, options);
109+
110+
// Greenify the collection based on the settings variable
111+
return this.css({
112+
'color': settings['color'],
113+
'background-color': settings['background-color']
114+
});
115+
};
116+
}(jQuery));
117+
</javascript>
118+
119+
Example usage:
120+
121+
<javascript>
122+
$('div').greenify({
123+
'color': 'orange'
124+
});
125+
</javascript>
126+
127+
The default value for `color` of `#556B2F` gets overriden by `$.extend` to be orange.
128+
94129
##Putting it together
95130

96131
Here's an example of a small plugin using some of the techniques

0 commit comments

Comments
 (0)