Comment créer un plugin jQuery avec des méthodes?

J'essaie d'écrire un plugin jQuery qui fournira des fonctions / méthodes supplémentaires à l'objet qui l'appelle. Tous les didacticiels que j'ai lus en ligne (que j'ai parcourus ces 2 dernières heures) comprennent au maximum comment ajouter des options, mais pas des fonctions supplémentaires.

Voici ce que je cherche à faire:

// formater div pour être un conteneur de messages en appelant le plugin pour ce div

$("#mydiv").messagePlugin();
$("#mydiv").messagePlugin().saySomething("hello");

Ou quelque chose de ce genre. Voici à quoi cela se résume: j'appelle le plugin, puis j'appelle une fonction associée à ce plugin. Je n'arrive pas à trouver un moyen de le faire, et j'ai déjà vu de nombreux plugins le faire.

Voici ce que j'ai jusqu'à présent pour le plugin:

jQuery.fn.messagePlugin = function() {
  return this.each(function(){
    alert(this);
  });

  //i tried to do this, but it does not seem to work
  jQuery.fn.messagePlugin.saySomething = function(message){
    $(this).html(message);
  }
};

Comment puis-je réaliser quelque chose comme ça?

Merci!

Mise à jour du 18 novembre 2013: J'ai changé la bonne réponse en celle des commentaires et votes positifs suivants de Hari.

Selon la page jQuery Plugin Authoring ( http://docs.jquery.com/Plugins/Authoring ), il vaut mieux ne pas brouiller les espaces de noms jQuery et jQuery.fn. Ils suggèrent cette méthode:

(function( $ ){

    var methods = {
        init : function(options) {

        },
        show : function( ) {    },// IS
        hide : function( ) {  },// GOOD
        update : function( content ) {  }// !!!
    };

    $.fn.tooltip = function(methodOrOptions) {
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tooltip' );
        }    
    };


})( jQuery );

Fondamentalement, vous stockez vos fonctions dans un tableau (étendu à la fonction d'encapsulation) et recherchez une entrée si le paramètre passé est une chaîne, en revenant à une méthode par défaut ("init" ici) si le paramètre est un objet (ou nul).

Ensuite, vous pouvez appeler les méthodes comme ça ...

$('div').tooltip(); // calls the init method
$('div').tooltip({  // calls the init method
  foo : 'bar'
});
$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method

La variable Javascripts "arguments" est un tableau de tous les arguments passés afin qu'elle fonctionne avec des longueurs arbitraires de paramètres de fonction.

Voici le modèle que j'ai utilisé pour créer des plugins avec des méthodes supplémentaires. Vous l'utiliseriez comme:

$('selector').myplugin( { key: 'value' } );

ou, pour invoquer directement une méthode,

$('selector').myplugin( 'mymethod1', 'argument' );

Exemple:

;(function($) {

    $.fn.extend({
        myplugin: function(options,arg) {
            if (options && typeof(options) == 'object') {
                options = $.extend( {}, $.myplugin.defaults, options );
            }

            // this creates a plugin for each element in
            // the selector or runs the function once per
            // selector.  To have it do so for just the
            // first element (once), return false after
            // creating the plugin to stop the each iteration 
            this.each(function() {
                new $.myplugin(this, options, arg );
            });
            return;
        }
    });

    $.myplugin = function( elem, options, arg ) {

        if (options && typeof(options) == 'string') {
           if (options == 'mymethod1') {
               myplugin_method1( arg );
           }
           else if (options == 'mymethod2') {
               myplugin_method2( arg );
           }
           return;
        }

        ...normal plugin actions...

        function myplugin_method1(arg)
        {
            ...do method1 with this and arg
        }

        function myplugin_method2(arg)
        {
            ...do method2 with this and arg
        }

    };

    $.myplugin.defaults = {
       ...
    };

})(jQuery);

Qu'en est-il de cette approche:

jQuery.fn.messagePlugin = function(){
    var selectedObjects = this;
    return {
             saySomething : function(message){
                              $(selectedObjects).each(function(){
                                $(this).html(message);
                              });
                              return selectedObjects; // Preserve the jQuery chainability 
                            },
             anotherAction : function(){
                               //...
                               return selectedObjects;
                             }
           };
}
// Usage:
$('p').messagePlugin().saySomething('I am a Paragraph').css('color', 'red');

Les objets sélectionnés sont stockés dans la fermeture messagePlugin, et cette fonction renvoie un objet qui contient les fonctions associées au plugin, dans chaque fonction, vous pouvez effectuer les actions souhaitées sur les objets actuellement sélectionnés.

Vous pouvez tester et jouer avec le code ici .

Edit: code mis à jour pour préserver la puissance de la chaînabilité jQuery.

Le problème avec la réponse actuellement sélectionnée est que vous ne créez pas réellement une nouvelle instance du plugin personnalisé pour chaque élément du sélecteur comme vous pensez que vous le faites ... le sélecteur lui-même comme champ d'application.

Regardez ce violon pour une explication plus approfondie.

Au lieu de cela, vous devrez parcourir le sélecteur en utilisant jQuery.each et instancier une nouvelle instance du plugin personnalisé pour chaque élément du sélecteur.

Voici comment:

(function($) {

    var CustomPlugin = function($el, options) {

        this._defaults = {
            randomizer: Math.random()
        };

        this._options = $.extend(true, {}, this._defaults, options);

        this.options = function(options) {
            return (options) ?
                $.extend(true, this._options, options) :
                this._options;
        };

        this.move = function() {
            $el.css('margin-left', this._options.randomizer * 100);
        };

    };

    $.fn.customPlugin = function(methodOrOptions) {

        var method = (typeof methodOrOptions === 'string') ? methodOrOptions : undefined;

        if (method) {
            var customPlugins = [];

            function getCustomPlugin() {
                var $el          = $(this);
                var customPlugin = $el.data('customPlugin');

                customPlugins.push(customPlugin);
            }

            this.each(getCustomPlugin);

            var args    = (arguments.length > 1) ? Array.prototype.slice.call(arguments, 1) : undefined;
            var results = [];

            function applyMethod(index) {
                var customPlugin = customPlugins[index];

                if (!customPlugin) {
                    console.warn('$.customPlugin not instantiated yet');
                    console.info(this);
                    results.push(undefined);
                    return;
                }

                if (typeof customPlugin[method] === 'function') {
                    var result = customPlugin[method].apply(customPlugin, args);
                    results.push(result);
                } else {
                    console.warn('Method \'' + method + '\' not defined in $.customPlugin');
                }
            }

            this.each(applyMethod);

            return (results.length > 1) ? results : results[0];
        } else {
            var options = (typeof methodOrOptions === 'object') ? methodOrOptions : undefined;

            function init() {
                var $el          = $(this);
                var customPlugin = new CustomPlugin($el, options);

                $el.data('customPlugin', customPlugin);
            }

            return this.each(init);
        }

    };

})(jQuery);

Et un violon qui fonctionne .

Vous remarquerez que dans le premier violon, tous les div sont toujours déplacés vers la droite du même nombre de pixels. En effet, un seul objet d'options existe pour tous les éléments du sélecteur.

En utilisant la technique écrite ci-dessus, vous remarquerez que dans le deuxième violon, chaque div n'est pas aligné et est déplacé aléatoirement (à l'exclusion du premier div car son randomiseur est toujours réglé sur 1 à la ligne 89). C'est parce que nous instancions maintenant correctement une nouvelle instance de plugin personnalisée pour chaque élément du sélecteur. Chaque élément a son propre objet d'options et n'est pas enregistré dans le sélecteur, mais dans l'instance du plugin personnalisé lui-même.

Cela signifie que vous serez en mesure d'accéder aux méthodes du plugin personnalisé instancié sur un élément spécifique du DOM à partir de nouveaux sélecteurs jQuery et que vous ne serez pas obligé de les mettre en cache, comme vous le seriez dans le premier violon.

Par exemple, cela renvoie un tableau de tous les objets d'options en utilisant la technique du second violon. Il reviendrait indéfini dans le premier.

$('div').customPlugin();
$('div').customPlugin('options'); // would return an array of all options objects

Voici comment vous devriez accéder à l'objet d'options dans le premier violon, et ne retourneriez qu'un seul objet, pas un tableau d'entre eux:

var divs = $('div').customPlugin();
divs.customPlugin('options'); // would return a single options object

$('div').customPlugin('options');
// would return undefined, since it's not a cached selector

Je suggère d'utiliser la technique ci-dessus, pas celle de la réponse actuellement sélectionnée.

jQuery a rendu cela beaucoup plus facile avec l'introduction de la Widget Factory .

Exemple:

$.widget( "myNamespace.myPlugin", {

    options: {
        // Default options
    },

    _create: function() {
        // Initialization logic here
    },

    // Create a public method.
    myPublicMethod: function( argument ) {
        // ...
    },

    // Create a private method.
    _myPrivateMethod: function( argument ) {
        // ...
    }

});

Initialisation:

$('#my-element').myPlugin();
$('#my-element').myPlugin( {defaultValue:10} );

Appel de méthode:

$('#my-element').myPlugin('myPublicMethod', 20);

(C'est ainsi que la bibliothèque d'interface utilisateur jQuery est construite.)

Une approche plus simple consiste à utiliser des fonctions imbriquées. Ensuite, vous pouvez les chaîner de manière orientée objet. Exemple:

jQuery.fn.MyPlugin = function()
{
  var _this = this;
  var a = 1;

  jQuery.fn.MyPlugin.DoSomething = function()
  {
    var b = a;
    var c = 2;

    jQuery.fn.MyPlugin.DoSomething.DoEvenMore = function()
    {
      var d = a;
      var e = c;
      var f = 3;
      return _this;
    };

    return _this;
  };

  return this;
};

Et voici comment l'appeler:

var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin.DoSomething();
pluginContainer.MyPlugin.DoSomething.DoEvenMore();

Attention cependant. Vous ne pouvez pas appeler une fonction imbriquée tant qu'elle n'a pas été créée. Vous ne pouvez donc pas faire ceci:

var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin.DoSomething.DoEvenMore();
pluginContainer.MyPlugin.DoSomething();

La fonction DoEvenMore n'existe même pas car la fonction DoSomething n'a pas encore été exécutée, ce qui est nécessaire pour créer la fonction DoEvenMore. Pour la plupart des plugins jQuery, vous n'aurez vraiment qu'un seul niveau de fonctions imbriquées et non deux comme je l'ai montré ici.
Assurez-vous simplement que lorsque vous créez des fonctions imbriquées, vous définissez ces fonctions au début de leur fonction parente avant que tout autre code de la fonction parente ne soit exécuté.

Enfin, notez que le membre "this" est stocké dans une variable appelée "_this". Pour les fonctions imbriquées, vous devez renvoyer "_this" si vous avez besoin d'une référence à l'instance dans le client appelant. Vous ne pouvez pas simplement renvoyer "this" dans la fonction imbriquée car cela renverra une référence à la fonction et non à l'instance jQuery. Le renvoi d'une référence jQuery vous permet d'enchaîner des méthodes jQuery intrinsèques au retour.

Je l'ai obtenu de jQuery Plugin Boilerplate

Également décrit dans jQuery Plugin Boilerplate, reprise

// jQuery Plugin Boilerplate
// A boilerplate for jumpstarting jQuery plugins development
// version 1.1, May 14th, 2011
// by Stefan Gabos

// remember to change every instance of "pluginName" to the name of your plugin!
(function($) {

    // here we go!
    $.pluginName = function(element, options) {

    // plugin's default options
    // this is private property and is accessible only from inside the plugin
    var defaults = {

        foo: 'bar',

        // if your plugin is event-driven, you may provide callback capabilities
        // for its events. execute these functions before or after events of your
        // plugin, so that users may customize those particular events without
        // changing the plugin's code
        onFoo: function() {}

    }

    // to avoid confusions, use "plugin" to reference the
    // current instance of the object
    var plugin = this;

    // this will hold the merged default, and user-provided options
    // plugin's properties will be available through this object like:
    // plugin.settings.propertyName from inside the plugin or
    // element.data('pluginName').settings.propertyName from outside the plugin,
    // where "element" is the element the plugin is attached to;
    plugin.settings = {}

    var $element = $(element), // reference to the jQuery version of DOM element
    element = element; // reference to the actual DOM element

    // the "constructor" method that gets called when the object is created
    plugin.init = function() {

    // the plugin's final properties are the merged default and
    // user-provided options (if any)
    plugin.settings = $.extend({}, defaults, options);

    // code goes here

   }

   // public methods
   // these methods can be called like:
   // plugin.methodName(arg1, arg2, ... argn) from inside the plugin or
   // element.data('pluginName').publicMethod(arg1, arg2, ... argn) from outside
   // the plugin, where "element" is the element the plugin is attached to;

   // a public method. for demonstration purposes only - remove it!
   plugin.foo_public_method = function() {

   // code goes here

    }

     // private methods
     // these methods can be called only from inside the plugin like:
     // methodName(arg1, arg2, ... argn)

     // a private method. for demonstration purposes only - remove it!
     var foo_private_method = function() {

        // code goes here

     }

     // fire up the plugin!
     // call the "constructor" method
     plugin.init();

     }

     // add the plugin to the jQuery.fn object
     $.fn.pluginName = function(options) {

        // iterate through the DOM elements we are attaching the plugin to
        return this.each(function() {

          // if plugin has not already been attached to the element
          if (undefined == $(this).data('pluginName')) {

              // create a new instance of the plugin
              // pass the DOM element and the user-provided options as arguments
              var plugin = new $.pluginName(this, options);

              // in the jQuery version of the element
              // store a reference to the plugin object
              // you can later access the plugin and its methods and properties like
              // element.data('pluginName').publicMethod(arg1, arg2, ... argn) or
              // element.data('pluginName').settings.propertyName
              $(this).data('pluginName', plugin);

           }

        });

    }

})(jQuery);

Trop tard mais peut-être que ça pourra aider quelqu'un un jour.

J'étais dans la même situation que créer un plugin jQuery avec certaines méthodes, et après avoir lu quelques articles et quelques pneus, je crée un plugin jQuery standard ( https://github.com/acanimal/jQuery-Plugin-Boilerplate ).

De plus, je développe avec lui un plugin pour gérer les tags ( https://github.com/acanimal/tagger.js ) et rédige deux articles de blog expliquant pas à pas la création d'un plugin jQuery ( http: // acuriousanimal. com / blog / 2013/01/15 / choses-que-j'ai-apprises-en-creant-un-plugin-jquery-partie-i / ).

Tu peux faire:

(function($) {
  var YourPlugin = function(element, option) {
    var defaults = {
      //default value
    }

    this.option = $.extend({}, defaults, option);
    this.$element = $(element);
    this.init();
  }

  YourPlugin.prototype = {
    init: function() { },
    show: function() { },
    //another functions
  }

  $.fn.yourPlugin = function(option) {
    var arg = arguments,
        options = typeof option == 'object' && option;;
    return this.each(function() {
      var $this = $(this),
          data = $this.data('yourPlugin');

      if (!data) $this.data('yourPlugin', (data = new YourPlugin(this, options)));
      if (typeof option === 'string') {
        if (arg.length > 1) {
          data[option].apply(data, Array.prototype.slice.call(arg, 1));
        } else {
          data[option]();
        }
      }
    });
  };
});

De cette façon, votre objet plugins est stocké en tant que valeur de données dans votre élément.

//Initialization without option
$('#myId').yourPlugin();

//Initialization with option
$('#myId').yourPlugin({
  // your option
});

// call show method
$('#myId').yourPlugin('show');

Qu'en est-il des déclencheurs? Quelqu'un connaît-il un inconvénient de les utiliser? L'avantage est que toutes les variables internes sont accessibles via les déclencheurs, et le code est très simple.

Voir sur jsfiddle .

Exemple d'utilisation

<div id="mydiv">This is the message container...</div>

<script>
    var mp = $("#mydiv").messagePlugin();

    // the plugin returns the element it is called on
    mp.trigger("messagePlugin.saySomething", "hello");

    // so defining the mp variable is not needed...
    $("#mydiv").trigger("messagePlugin.repeatLastMessage");
</script>

Brancher

jQuery.fn.messagePlugin = function() {

    return this.each(function() {

        var lastmessage,
            $this = $(this);

        $this.on('messagePlugin.saySomething', function(e, message) {
            lastmessage = message;
            saySomething(message);
        });

        $this.on('messagePlugin.repeatLastMessage', function(e) {
            repeatLastMessage();
        });

        function saySomething(message) {
            $this.html("<p>" + message + "</p>");
        }

        function repeatLastMessage() {
            $this.append('<p>Last message was: ' + lastmessage + '</p>');
        }

    });

}

Ici, je veux suggérer des étapes pour créer un plugin simple avec des arguments.

(function($) {
  $.fn.myFirstPlugin = function(options) {
    // Default params
    var params = $.extend({
      text     : 'Default Title',
      fontsize : 10,
    }, options);
    return $(this).text(params.text);
  }
}(jQuery));

$('.cls-title').myFirstPlugin({ text : 'Argument Title' });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="cls-title"></h1>

Ici, nous avons ajouté un objet par défaut appelé paramset défini les valeurs par défaut des options à l'aide de extendfunction. Par conséquent, si nous passons un argument vide, il définira les valeurs par défaut à la place, sinon il sera défini.

Lire la suite: Comment créer un plugin JQuery

Essaye celui-là:

$.fn.extend({
"calendar":function(){
    console.log(this);
    var methods = {
            "add":function(){console.log("add"); return this;},
            "init":function(){console.log("init"); return this;},
            "sample":function(){console.log("sample"); return this;}
    };

    methods.init(); // you can call any method inside
    return methods;
}}); 
$.fn.calendar() // caller or 
$.fn.calendar().sample().add().sample() ......; // call methods

Voici ma version simple de ceci. Semblable à ceux publiés précédemment, vous appelleriez comme:

$('#myDiv').MessagePlugin({ yourSettings: 'here' })
           .MessagePlugin('saySomething','Hello World!');

-ou accéder directement à l'instance @ plugin_MessagePlugin

$elem = $('#myDiv').MessagePlugin();
var instance = $elem.data('plugin_MessagePlugin');
instance.saySomething('Hello World!');

MessagePlugin.js

;(function($){

    function MessagePlugin(element,settings){ // The Plugin
        this.$elem = element;
        this._settings = settings;
        this.settings = $.extend(this._default,settings);
    }

    MessagePlugin.prototype = { // The Plugin prototype
        _default: {
            message: 'Generic message'
        },
        initialize: function(){},
        saySomething: function(message){
            message = message || this._default.message;
            return this.$elem.html(message);
        }
    };

    $.fn.MessagePlugin = function(settings){ // The Plugin call

        var instance = this.data('plugin_MessagePlugin'); // Get instance

        if(instance===undefined){ // Do instantiate if undefined
            settings = settings || {};
            this.data('plugin_MessagePlugin',new MessagePlugin(this,settings));
            return this;
        }

        if($.isFunction(MessagePlugin.prototype[settings])){ // Call method if argument is name of method
            var args = Array.prototype.slice.call(arguments); // Get the arguments as Array
            args.shift(); // Remove first argument (name of method)
            return MessagePlugin.prototype[settings].apply(instance, args); // Call the method
        }

        // Do error handling

        return this;
    }

})(jQuery);

La structure de plugin suivante utilise la méthode data()jQuery- pour fournir une interface publique aux méthodes / paramètres internes du plugin (tout en préservant la chaînabilité de jQuery):

(function($, window, undefined) { 
  const defaults = {
    elementId   : null,
    shape       : "square",
    color       : "aqua",
    borderWidth : "10px",
    borderColor : "DarkGray"
  };

  $.fn.myPlugin = function(options) {
    // settings, e.g.:  
    var settings = $.extend({}, defaults, options);

    // private methods, e.g.:
    var setBorder = function(color, width) {        
      settings.borderColor = color;
      settings.borderWidth = width;          
      drawShape();
    };

    var drawShape = function() {         
      $('#' + settings.elementId).attr('class', settings.shape + " " + "center"); 
      $('#' + settings.elementId).css({
        'background-color': settings.color,
        'border': settings.borderWidth + ' solid ' + settings.borderColor      
      });
      $('#' + settings.elementId).html(settings.color + " " + settings.shape);            
    };

    return this.each(function() { // jQuery chainability     
      // set stuff on ini, e.g.:
      settings.elementId = $(this).attr('id'); 
      drawShape();

      // PUBLIC INTERFACE 
      // gives us stuff like: 
      //
      //    $("#...").data('myPlugin').myPublicPluginMethod();
      //
      var myPlugin = {
        element: $(this),
        // access private plugin methods, e.g.: 
        setBorder: function(color, width) {        
          setBorder(color, width);
          return this.element; // To ensure jQuery chainability 
        },
        // access plugin settings, e.g.: 
        color: function() {
          return settings.color;
        },        
        // access setting "shape" 
        shape: function() {
          return settings.shape;
        },     
        // inspect settings 
        inspectSettings: function() {
          msg = "inspecting settings for element '" + settings.elementId + "':";   
          msg += "\n--- shape: '" + settings.shape + "'";
          msg += "\n--- color: '" + settings.color + "'";
          msg += "\n--- border: '" + settings.borderWidth + ' solid ' + settings.borderColor + "'";
          return msg;
        },               
        // do stuff on element, e.g.:  
        change: function(shape, color) {        
          settings.shape = shape;
          settings.color = color;
          drawShape();   
          return this.element; // To ensure jQuery chainability 
        }
      };
      $(this).data("myPlugin", myPlugin);
    }); // return this.each 
  }; // myPlugin
}(jQuery));

Vous pouvez maintenant appeler des méthodes de plugin internes pour accéder ou modifier les données du plugin ou l'élément pertinent en utilisant cette syntaxe:

$("#...").data('myPlugin').myPublicPluginMethod(); 

Tant que vous retournez l'élément actuel (this) de l'intérieur, votre implémentation de myPublicPluginMethod()jQuery-chainability sera préservée - donc les travaux suivants:

$("#...").data('myPlugin').myPublicPluginMethod().css("color", "red").html("...."); 

Voici quelques exemples (pour plus de détails, consultez ce violon ):

// initialize plugin on elements, e.g.:
$("#shape1").myPlugin({shape: 'square', color: 'blue', borderColor: 'SteelBlue'});
$("#shape2").myPlugin({shape: 'rectangle', color: 'red', borderColor: '#ff4d4d'});
$("#shape3").myPlugin({shape: 'circle', color: 'green', borderColor: 'LimeGreen'});

// calling plugin methods to read element specific plugin settings:
console.log($("#shape1").data('myPlugin').inspectSettings());    
console.log($("#shape2").data('myPlugin').inspectSettings());    
console.log($("#shape3").data('myPlugin').inspectSettings());      

// calling plugin methods to modify elements, e.g.:
// (OMG! And they are chainable too!) 
$("#shape1").data('myPlugin').change("circle", "green").fadeOut(2000).fadeIn(2000);      
$("#shape1").data('myPlugin').setBorder('LimeGreen', '30px');

$("#shape2").data('myPlugin').change("rectangle", "red"); 
$("#shape2").data('myPlugin').setBorder('#ff4d4d', '40px').css({
  'width': '350px',
  'font-size': '2em' 
}).slideUp(2000).slideDown(2000);              

$("#shape3").data('myPlugin').change("square", "blue").fadeOut(2000).fadeIn(2000);   
$("#shape3").data('myPlugin').setBorder('SteelBlue', '30px');

// etc. ...     

Cela peut en fait être fait pour fonctionner de manière "agréable" en utilisant defineProperty. Où «nice» signifie sans avoir à utiliser ()pour obtenir l'espace de noms du plugin ni à passer le nom de la fonction par chaîne.

Compatibilité nit: defineProperty ne fonctionne pas dans les anciens navigateurs tels que IE8 et inférieurs. Attention: $.fn.color.blue.apply(foo, args) ne fonctionnera pas, vous devez utiliser foo.color.blue.apply(foo, args).

function $_color(color)
{
    return this.css('color', color);
}

function $_color_blue()
{
    return this.css('color', 'blue');
}

Object.defineProperty($.fn, 'color',
{
    enumerable: true,
    get: function()
    {
        var self = this;

        var ret = function() { return $_color.apply(self, arguments); }
        ret.blue = function() { return $_color_blue.apply(self, arguments); }

        return ret;
    }
});

$('#foo').color('#f00');
$('#bar').color.blue();

Lien JSFiddle

Selon la norme jquery, vous pouvez créer un plugin comme suit:

(function($) {

    //methods starts here....
    var methods = {
        init : function(method,options) {
             this.loadKeywords.settings = $.extend({}, this.loadKeywords.defaults, options);
             methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
             $loadkeywordbase=$(this);
        },
        show : function() {
            //your code here.................
        },
        getData : function() {
           //your code here.................
        }

    } // do not put semi colon here otherwise it will not work in ie7
    //end of methods

    //main plugin function starts here...
    $.fn.loadKeywords = function(options,method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(
                    arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not ecw-Keywords');
        }
    };
    $.fn.loadKeywords.defaults = {
            keyName:     'Messages',
            Options:     '1',
            callback: '',
    };
    $.fn.loadKeywords.settings = {};
    //end of plugin keyword function.

})(jQuery);

Comment appeler ce plugin?

1.$('your element').loadKeywords('show',{'callback':callbackdata,'keyName':'myKey'}); // show() will be called

Référence: lien

Je pense que cela pourrait vous aider ...

(function ( $ ) {
  
    $.fn.highlight = function( options ) {
  
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#000",
            backgroundColor: "yellow"
        }, options );
  
        // Highlight the collection based on the settings variable.
        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });
  
    };
  
}( jQuery ));

Dans l'exemple ci-dessus, j'avais créé un simple plugin de mise en évidence jquery.J'avais partagé un article dans lequel j'avais discuté de la façon de créer votre propre plugin jQuery de Basic à Advance. Je pense que vous devriez le vérifier ... http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/

Voici un petit plug-in pour avoir une méthode d'avertissement à des fins de débogage. Conservez ce code dans le fichier jquery.debug.js: JS:

jQuery.fn.warning = function() {
   return this.each(function() {
      alert('Tag Name:"' + $(this).prop("tagName") + '".');
   });
};

HTML:

<html>
   <head>
      <title>The jQuery Example</title>

      <script type = "text/javascript" 
         src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script src = "jquery.debug.js" type = "text/javascript"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").warning();
            $("p").warning();
         });
      </script> 
   </head>

   <body>
      <p>This is paragraph</p>
      <div>This is division</div>
   </body>

</html>

Voici comment je le fais:

(function ( $ ) {

$.fn.gridview = function( options ) {

    ..........
    ..........


    var factory = new htmlFactory();
    factory.header(...);

    ........

};

}( jQuery ));


var htmlFactory = function(){

    //header
     this.header = function(object){
       console.log(object);
  }
 }

Ce que vous avez fait, c'est étendre l' objet jQuery.fn.messagePlugin par une nouvelle méthode. Ce qui est utile mais pas dans votre cas.

Vous devez faire est d'utiliser cette technique

function methodA(args){ this // refers to object... }
function saySomething(message){ this.html(message);  to first function }

jQuery.fn.messagePlugin = function(opts) {
  if(opts=='methodA') methodA.call(this);
  if(opts=='saySomething') saySomething.call(this, arguments[0]); // arguments is an array of passed parameters
  return this.each(function(){
    alert(this);
  });

};

Mais vous pouvez accomplir ce que vous voulez. Je veux dire qu'il existe un moyen de faire $ ("# mydiv"). MessagePlugin (). SaySomething ("hello"); Mon ami il a commencé à écrire sur les lugins et comment les étendre avec votre chaîne de fonctionnalités voici le lien vers son blog