Social Networks

You might think yourself “how to develop jquery plugin?”  You know  jQuery well and would like to learn how to create a jQuery plugins. Great! You’re in the right place. Extending jQuery with plugins and methods is very powerful and can save your a lot of development time by abstracting your most useful functions into the plugins.

jquery-LinkColor-screen

This post is explains how easy you can built a jQuery plugin, we made a very simple plugin called LinkColor. It makes your website anchor links so colourful and pretty beautiful, Just few line of code and very simple to use. Follow the steps and learn how to create your own jquery plugin. Enjoy the live demo.

Download Source

Demo

jquery.LinkColor.js
/**
* jQuery LinkColor Plugin 1.0
* http://www.onlinewebapplication.com/
* Copyright (c) 2011 Tech Blog
* Coder: Pankaj Kumar Jha
* License: GNU General Public License, v2 (or newer)
* License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
*/
(function($){
$.fn.LinkColors = function(){
//Link background colors
var colors = new Array('4AC7ED', 'FDC015', '9F78EC', 'F25C33','78D6D0','ACD114');
return this.each(function(i,obj){
$this = $(this);
$anchors = $(obj).find("a").get();
$.each($anchors, function(j,ele){
var randColor = Math.floor ( Math.random() * colors.length );
$(ele).css({
'background-color':'#'+colors[randColor],
'text-decoration':'none',
'color':'#333333',
'padding':'0px 5px 0px 5px'
});
});
});
};
})(jQuery);

How to Use

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="jquery.LinkColor.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('body').LinkColors();
});
</script>
</head>
<body>
...................
....Content...
...................
</body>
</html>

 

How to Develop a jQuery Plugin from Scratch.

Step 1

(function($)
{
// --------------
})(jQuery);

Step 2
fn is function identifier LinkColors is the plugin name.

$.fn.LinkColors = function()
{
// Plugin code ...
};

Step 3Initiating colors variables. You can add some more colors here based on your template color combinations.

var colors = new Array('4AC7ED', 'FDC015', '9F78EC', 'F25C33');

Step 4
Here this refers to selectors. You should use always each function, selectors may be more than one.

return this.each(function(i,obj)
{
//............
});

Step 5
Finding anchors from selectors Eg, body, #divName and .className .
$anchors = $(obj).find(“a”).get();

$anchors = $(obj).find("a").get();

Step 6
Loop available anchors

$.each($anchors, function(j,ele)
{
//.............
});

Step 7
Make a random keys from colors array

var randColor = Math.floor ( Math.random() * colors.length );

Step 8
Applying CSS style for anchor each obj

$(ele).css({
'background-color':'#'+colors[randColor],
'text-decoration':'none',
'color':'#333333',
'padding':'0px 5px 0px 5px'
});
None found.
  1. Plugins/Authoring says:

    Best Practices while creating the JQuery Plugin –

    1. Always wrap your plugin in a closure: (function( $ ){ /* plugin goes here */ })( jQuery );
    2. Don’t redundantly wrap the this keyword in the immediate scope of your plugin’s function
    3. Unless you’re returning an intrinsic value from your plugin, always have your plugin’s function return the this keyword to maintain chainability.
    4. Rather than requiring a lengthy amount of arguments, pass your plugin settings in an object literal that can be extended over the plugin’s defaults.
    5. Don’t clutter the jQuery.fn object with more than one namespace per plugin.
    6. Always namespace your methods, events and data.

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>