web-dev-qa-db-fra.com

Appel d'une fonction à l'intérieur d'un plugin jQuery depuis l'extérieur

J'essaie de trouver comment appeler des fonctions dans mon plugin jQuery depuis l'extérieur du plugin. Le code que j'ai essayé ne fonctionne pas. Je suis sûr que je devrai restructurer mon plugin pour permettre cela, mais je ne sais pas comment. Dans cet exemple, j'essaie d'accéder à la fonction underline().

jsFiddle

Plugin jQuery 

(function($) {
    "use strict";

    $.fn.testPlugin = function(options) {

        // Settings
        var settings = $.extend({
            newText : "Yabadabado"
        }, options);

        return this.each(function(i, el) {            

            var init = function(callback) {
                if( $(el).attr("class") === "red" ) {
                    $(el).css("color","red");
                }

                $(el).text(settings.newText);

                if( callback && typeof(callback) === "function" ) {
                    callback();
                }
            };

            var underline = function() {
                $(el).addClass("underline");
            };

            init();
        });
    };

}(jQuery));

Attribuer le plugin aux sélecteurs 

var doTest = $("#testItem").testPlugin({
    newText: "Scoobydoo"
});

var doNewTest = $("#newTestItem").testPlugin({
    newText: "kapow!"
});

Appeler une fonction qui se trouve dans le plugin 

$("#underline").click(function(e) {
    e.preventDefault();
    doTest.underline();
});
javascriptjqueryjquery-plugins
15
Fisu

Jetez un oeil à fermetures .

Voici un exemple de base de ce à quoi ressemble une fermeture dans un plugin jQuery.

$.fn.plugin = function() {

    return {
        helloWorld: function() {
            console.log('Hello World!');
        }
    }
};

// init plugin.
var test = $('node').plugin();

// call a method from within the plugin outside of the plugin.
test.helloWorld();

Vous pouvez voir un autre exemple dans jsfiddle suivant.

http://jsfiddle.net/denniswaltermartinez/DwEFz/

29
Dennis Martinez

Tout d'abord, nous devons comprendre chaque étape de la construction d'un plugin jQuery, c'est comme construire un plugin javascript (classe) mais nous avons en plus une classe jQuery.

//We start with a function and pass a jQuery class to it as a 
//parameter $ to avoid the conflict with other javascript 
//plugins that uses '$ as a name
(function($){
    //We now append our function to the jQuery namespace, 
    //with an option parameter
    $.fn.myplugin = function(options) {
        //the settings parameter will be our private parameter to our function
        //'myplugin', using jQuery.extend append 'options' to our settings
        var settings = jQuery.extend({
            param:'value',
        }, options);
        //Define a reference to our function myplugin which it's 
        //part of jQuery namespace functions, so we can use later
        //within inside functions
        var $jquery=this;

        //Define an output object that will work as a reference
        //for our function
        var output={
            //Setup our plugin functions as an object elements
            'function1':function(param){
                //Call jQuery reference that goes through jQuery selector
                $jquery.each(function(){
                    //Define a reference of each element of jQuery 
                    //selector elements
                    var _this=this;
                });
                //This steps is required if you want to call nested
                //functions like jQuery.
                return output;
            },
            //If we want to make our plugin to do a specific operations
            //when called, we define a function for that
            'init':function(){
                $jquery.each(function(){
                    var _this=this;
                    //Note that _this param linked to each jQuery 
                    //functions not element, thus wont behave like 
                    //jQuery function.
                    //And for that we set a parameter to reference the
                    //jQuery element
                    _this.$this=$(this);

                    //We can define a private function for 'init'
                    //function
                    var privatefun=function(){}
                    privatefun();

                    //We can now do jQuery stuffs on each element
                    _this.$this.on('click',function(){
                        //jQuery related stuffs
                    });
                });
                //We can call whatever function we want or parameter
                //that belongs to our plugin
                output.function1("value");
            }
        };
        //Our output is ready, if we want our plugin to execute a
        //function whenever it called we do it now
        output.init();

        //And the final critical step, return our object output to
        //the plugin
        return output;
    };
//Pass the jQuery class so we can use it inside our plugin 'class'
})(jQuery);

Utiliser notre fonction maintenant est très simple

<div class="plugintest">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>

<script>
    $(function(){
        var myplugin=$(".plugintest > span").myplugin({
            param:'somevalue'
        });
        myplugin.function1(1).function1(2).function1(3);
    });
</script>

En bref, les plugins jQuery et tous les plugins Javascript concernent simplement la portée des paramètres.

Version violon https://jsfiddle.net/eiadsamman/a59uwmga/

18
Eiad Samman