Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to write a simple jQuery plugin [closed]

I wanted to create simple plugin using jquery. Also suggest me standard practice while writing jQuery plugin.

Please folks suggest me some better pointers.

like image 384
pravin Avatar asked Oct 18 '10 10:10

pravin


People also ask

What is $() in jQuery library?

It is common to see jQuery programs call $(document) or $(this) , for example. jQuery objects can represent more than one element in a document, and you can also pass an array of elements to $() . In this case, the returned jQuery object represents the set of elements in your array.

What is FN in jQuery?

fn is an alias for jQuery. prototype which allows you to extend jQuery with your own functions. For Example: $.fn.

How do I get jQuery plugins?

There are plenty of jQuery plug-in available which you can download from repository link at https://jquery.com/plugins.

What is a jQuery plugin?

A jQuery plugin is simply a new method that we use to extend jQuery's prototype object. By extending the prototype object you enable all jQuery objects to inherit any methods that you add. As established, whenever you call jQuery() you're creating a new jQuery object, with all of jQuery's methods inherited.


3 Answers

a good starting pattern looks like:

(function($){
   $.fn.yourplugin = function() {
   };
}(jQuery));
like image 133
jAndy Avatar answered Sep 28 '22 18:09

jAndy


A simple template I created years ago and still works great:

(function($) {
    if (!$.myExample) { // check your plugin namespace does not already exist
        $.extend({  //  this will allow you to add your plugin to the jQuery lib
            myExample: function(elm, command, args) {
                //  keep in mind, right here you might want to do a class or data check to determine which direction this call is going
                //  for example, upon init the plugin on an element you may add the plugin name as a class, 
                //      this way, when it's recalled, you can see it alrady has that class and might be calling a command,
                //          thus make an if statemnt to push the process through
                return elm.each(function(index){
                    // do work to each element as its passed through
                    // be sure to use something like
                    //    return elm.each(function(e) { dor work });
                    // as your final statement in order to maintain "chainability"
                });
            }
        });
        $.fn.extend({   //  this gives the chainability functionality seen with $ funcs like: $("#eleID").css("color", "red") <--returns original element object
            myExample: function(command) {
                return $.myExample($(this), command, Array.prototype.slice.call(arguments, 1));
            }
        });
        $.myExample.props = {   //  Here you can establish specific properties to your plugin, prehaps even make them "Over-writable"
            key1: "value",
            key2: "value"
        };
        $.myExample.methods = { //  Here you can establish specific methods/functions for your plguin to carry out and maintain your namespace as well
            key1: function(param) {
                /*  do work */
            },
            key2: function(param) {
                /*  do work */
            }
        };
        //  This next part is not seen in many plugins but useful depending on what you're creating
        $.myExample.init = function(param) {    //  If you have an initialize method to apply, namespace it in here and calll on initializing your plugin
            var key = "value",
                key2 = {
                    subKey: "value"
                };
                /*
                /  run any number of initializing functions here
                /  I prefer to make my param a value that can be a
                /   string with a possible object
                /   the string for holding a base configuration
                /   the object for any change in properties or base values for that config
                */
        };
        $.myExample.defaults = {    //  establish base properties here that can be over-written via .props, but their values should never truly change
            key1: "value",
            key2: {
                prop1: {
                    subKey1: "value",
                    subKey2: "value"
                },
                prop2: {
                    subKey1: "value"
                }
            },
            key3: function(param) {

            }
        };
    }
})(jQuery);
like image 31
SpYk3HH Avatar answered Sep 28 '22 19:09

SpYk3HH


Summary and Best Practices while writing a jQuery Plugin

(function($){
  // $('p').greenify() turns all text in p elements green.
  $.fn.greenify = function() {
    this.css( "color", "green" ); // set text color
    return this; // for chaining;
  };
})(jQuery);
like image 32
Shoban Avatar answered Sep 28 '22 18:09

Shoban