Hello HC!


Nowadays, it is very hard to develop a website or web application without using Jquery. It became very powerful along the years mainly because of the vast amount of available plugins in the internet, doing all kind of stuff.

In this quick tutorial, we will learn how to create a model for jquery plugins, which can be used in several different forms.


This is the model:

Code:

// You need to create the definition of the plugin within a onload. (function( $ ){ // Add your plugin to the jquery Function object $.fn.nameofyourplugin = function(options) { // Definição dos valores padrões var defaults = { 'parameter1' : 'value1', 'parameter2' : 'value2', }; // Creating the settings var settings = $.extend( {}, defaults, options ); // Loop that passes through all the items involved in the use of the plugin // This ensures ALL items wil be used! return this.each(function() { // Your code here! // To use the parameters: settings.parameter1 }); }; })( jQuery );

using the provided model, let's create a plugin to simply change the background color of a given html element:

Code:

(function( $ ){ $.fn.Colorize = function(options) { var defaults = { 'color' : 'red' }; var settings = $.extend( {}, defaults, options ); return this.each(function() { $(this).css({ background: settings.color }); }); }; })( jQuery );

Now we'll save it as myplugin.js.

In the page you want to apply yor plugin, you must load it along with jquery.

Example:

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type='text/javascript' src='http://mywebsite.org/js/myplugin.js></script>

Now we are all set! all we need to do now is calling the script to do its job. If you want to apply the plugin to change the background color of all links in that page, here is the code:

Code:

<script type="text/javascript"> $(document).ready(function() { $(function(){ $("a").Colorize; }); }); </script>

you can also override the default parameters:

Code:

<script type="text/javascript"> $(document).ready(function() { $(function(){ $("a").Colorize({color:'red'}); }); }); </script>

Hope you enjoy!

(07-18-2013, 03:30 PM)Psycho_Coder Wrote: Nice write up. Thank you for this post. Specially because I am working on a project and because of which I need to learn elements of web design and your past tutorials have been help me.

Thank you,
Sincerely,
Psycho_Coder.

(07-18-2013, 03:30 PM)Psycho_Coder Wrote: Nice write up. Thank you for this post. Specially because I am working on a project and because of which I need to learn elements of web design and your past tutorials have been help me.

Thank you,
Sincerely,
Psycho_Coder.

(07-19-2013, 09:34 AM)The Alchemist Wrote: Just one thing I'd like you to modify or um...
The part about including jQuery :
Instead of keeping a copy of jQuery in your website and including it like this :

Code:

<script type='text/javascript' src='http://mywebsite.org/js/jquery.js></script>

I thinks its better to include it like this :

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Most website include it like this, so it gets stored in the viewer's cache.
Keeping a copy of it in your own site would require the viewer's browser to load it again and hence some speed is lost.

Just a suggestion.

(07-19-2013, 09:34 AM)The Alchemist Wrote: Just one thing I'd like you to modify or um...
The part about including jQuery :
Instead of keeping a copy of jQuery in your website and including it like this :

Code:

<script type='text/javascript' src='http://mywebsite.org/js/jquery.js></script>

I thinks its better to include it like this :

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Most website include it like this, so it gets stored in the viewer's cache.
Keeping a copy of it in your own site would require the viewer's browser to load it again and hence some speed is lost.

Just a suggestion.