Click here to Skip to main content
12,068,520 members (67,510 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

5K views
7 bookmarked
Posted

Developing a jQuery Plugin

, 19 Jun 2014 MIT
Rate this:
Please Sign up or sign in to vote.
Basic framework for a jQuery plugin

Introduction

So I have written several jQuery plugins and over the years, I have developed a basic foundation for starting a new plugin.

Background

This is a piece of JavaScript code that I have gathered and developed over the years. When I first started to write plugins, a lot of it just confused me. Hopefully, if you are new and/or interested in jQuery and wanting to write your own plugins, this will help.

Using the Code

I have tried to comment the code as reminders for myself when developing a new plugin but also a guide for any other developers starting from scratch.

So I am going to let the following code just speak for itself:

(function($) {
    // using $.fn.extend allows us to expand on jquery
    $.fn.extend({pluginName:function(options){
        // save a link to your instance
        var plugin = this;
        
        var defaultOptions = {
            // add what you know are default values for your options
        };
        
        // connect your default values to what the user has added
        // I connect everything into the current instance so that it 
        // can be referenced later if needed.
        if (options)
            plugin.Settings = $.extend(defaultOptions, options);
        else
            plugin.Settings = defaultOptions;
            
        // private functions
        function functionName(values){
            // code here
        }
        
        // public functions
        plugin.functionName = function(values){
            // code here
        }
        
        // implement get/set for your object properties
        var variableName;
        plugin.variableName = function(v){
            // validate data sent in
            if(undefined !== v){
                variableName = v;
            }
            
            return variableName;
        }
    
        return this.each(function(){
            // initialization code goes here
        });
    }});
})(jQuery);

Happy coding!!!

History

  • 19-Jun-2014 - Initial release

License

This article, along with any associated source code and files, is licensed under The MIT License

Share

About the Author

Dennis E White
Software Developer
United States United States
I am software developer with over 20 years of professional experience. I have been employed as a software developer since the early 90′s back when Microsoft’s Windows 3.1x was gaining popularity and IBM’s OS/2 was the predominant leader in 32-bit PC based Operating Systems.

Prior to choosing this as my profession I had studied architecture and then later Electrical and Mechanical engineering in college. As a young kid growing up I always played with computers, my first computer was a TRS-80 that I would spend countless hours writing programs for, I never really thought of programming as a profession. The story goes that in my final year of college I took a C/C++ programming class and had so much fun working on the various projects that my professor told me something that changed everything.

“You know they pay people to do stuff like this for a living?” – Professor Bolman

Check out my blog here.

My current and ever evolving projects:

jqAlert javascript alerts done right for those using jQueryUI.
DooScrib Doodle and scribble pad written in javascript for use with HTML5 Canvas.

You may also be interested in...

Comments and Discussions

 
Suggestionexamples? Pin
Brian A Stephens25-Jun-14 9:05
professionalBrian A Stephens25-Jun-14 9:05 
GeneralRe: examples? Pin
Dennis E White25-Jun-14 9:40
memberDennis E White25-Jun-14 9:40 
GeneralRe: examples? Pin
Dennis E White25-Jun-14 9:43
memberDennis E White25-Jun-14 9:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160208.1 | Last Updated 20 Jun 2014
Article Copyright 2014 by Dennis E White
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid