Creating a jQuery plugin

[litewarez]

Thought i would share my knowledge of jQuery plugins !

Ok so lets get started!

Information:
jQuery plugins are functions that are stored within jQuery and calledwhen the function is used on an element, jQuery also passes in the DOM element into the function so you can directly work with that element!

Plugin Structure:
The structure that i like to uses is like so..

(function(){
    $.fn.#PLUGIN_NAME# = function(){
    }
})($) 

Ok so first lets just create a sample plugin so you can see how to do the
basics

(function(){
    $.fn.changeVal = function(newVal){
       $(this).val(newVal);
    }
})($) 

Ok so looking at the above block of code you will notice the following:

1. The plugin is called changeVal
2. Were getting 1 parameter newVal
3. Were using the keyword this to select the element
4. then were using regular jQuery functions to change the val

and this would be used like so

$('a.changeMe').changeVal('New Value here'); 

ok so lets say we have a little more complex function!, lets do it!

(function(){
    $.fn.externalLinks = function(){
        $(this).each(function(){ //As were dealing with multiple itesm we loop this
        //here this is now the single a element.
            if($(this).attr('href').match(/http\:\ /\ //gi))
            {
                 //The link has http:// within it! so we add some external attrubutes.
                $(this).attr('target','_blank').addClass('external_link');
            }
        });
    }
})($) 

Ok so above you can see that its getting a little more complicated.

the usage of this is really simple

$('a').externalLinks(); 

This should get you started of with jQuery plugins and before you go take a look at this plugin I created for Litewarez.

This will give you a little more idea of what you can do with plugins!

(function($){
    $.fn.lwcookie = function(name, value, options){
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }

        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document .cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document . cookie && document .cookie* != '') {
            var cookies = document .cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')){
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};
})($ || jQuery) 

the usage of this function is not $().NAME but $.NAME as its not using any attributes !

Hope this helps you - Say thanks

litewarez Reviewed by litewarez on 9th Jun 2010. Creating a jQuery plugin Thought i would share my knowledge of jQuery plugins ! Ok so lets get started! Information: jQuery plugins are functions that are stored within jQuery and calledwhen the function is used on an element, jQuery also passes in the DOM element into the function so you can directly work with that element! Plugin Structure: The structure that i like to uses is like so.. Rating: 5

[shadow.prx]

Seems alittle advanced for the new people this might be useful to them

http://www.ilovecolors.com.ar/create-jquery-plugin/

[litewarez]

Advanced :/ its basics :/ cant get any basic'er

[shadow.prx]

:\ ok :\ well i was just sayin :\