How to Create a Jquery Plugin

This post is explains how easy you can built a jQuery plugin, we made a 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 eight steps and learn how to create your own jquery plugin. Take a look the live demo. Thanks!

Download Script     Live Demo

jquery.LinkColor.js

/**
* jQuery LinkColor Plugin 1.0
*
* http://www.9lessons.info/
*
* Copyright (c) 2011 Arun Kumar Sekar
*/
(function($){
$.fn.LinkColors = function(){
//Link background colors
var colors = new Array('4AC7ED', 'FDC015', '9F78EC', 'F25C33');
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

...................
....Content...
...................

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 3
Initiating 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();

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'
});

Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome

A newer and better crossbrowser solution for custom checkbox and radio button styling is available on this page, or you can go directly to the example. The full example for this blogpost is available for download at this link. You can play with the online demo on this page.
WebKit browsers (Safari, Chrome, Konqueror) have vendor-specific implementation of the CSS appearance property, as well as full support for the :checked and :disabled pseudo classes. The property is called -khtml-appearance and it’s default value is visual. When set to none, it turns the specified control(s) to a blank slate, and this, combined with :checked, :hover and :disabled facilitates any styling of checkboxes and radiobuttons without JavaScript or complex layout tricks. All we need is a sprite that contains all possible states (checked, unchecked, hover) of checkboxes and radiobuttons and as few as 50 lines of CSS:
1. The image sprite

2. The HTML:

    
                  Checkbox 1     
    
                  Checkbox 2     
    
                  Checkbox 2     
    
                  Radio 1     
    
                  Radio 2     
    
                  Radio 2     

3. And the CSS, where we make use of attribute selectors, pseudo classes, and of course -khtml-appearance set to none:

label
{
 font: normal 12px/20px Arial, Sans-serif;
 color: black;
 vertical-align: middle;
}
/* common settings checkbox and radiobutton */
input[type="checkbox"],
input[type="radio"]
{
 -khtml-appearance: none;
 background: url('RadioAndCheckBoxSprite.gif') no-repeat;
 width: 20px;
 height: 20px;
 vertical-align: middle;
}
input[type="checkbox"]
{
 background-position-x: left;
}
input[type="radio"]
{
 background-position-x: right;
}
input[type="checkbox"]:hover,
input[type="radio"]:hover
{
 background-position-y: -40px;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked
{
 background-position-y: -20px;
}
input[type="checkbox"]:checked:hover,
input[type="radio"]:checked:hover
{
 background-position-y: -60px;
}
/* disabled settings for checkbox and radiobutton */
input[type="radio"]:disabled,
input[type="checkbox"]:disabled
{
 opacity: .3;
}

FireFox has a similar implementation of the property called -moz-appearance, however its default value is none, and at present the above approach cannot be used for any browser but Safari and Google Chrome.
The full example is available for download at this link. You can play with the online demo on this page.
You may also be interested in the following scripts that take control on the visual appearance of other form elements.
Find more experiments here.