fonction d'appel à l'intérieur d'un plugin jquery imbriqué

Question

Il y a beaucoup de sujets liés à ma question et j'ai été à travers la plupart d'entre eux, mais je ne l'ai pas eu raison. Le poste le plus proche de ma question est la suivante:

How to call functions that are nested inside a JQuery Plugin?

est en dessous du plugin jquery j'utilise. Lors du redimensionnement, les tailles des éléments sont recalculées. Je suis en train d'appeler maintenant la fonction resizeBind() à l'extérieur du plugin jquery et il me donne l'erreur

J'ai essayé les combinaisons suivantes pour appeler la fonction

.fn.splitter $(). ResizeBind()

.fn.splitter.resizeBind $()

Toutes les idées, où je reçois mal?

;(function($){ 
$.fn.splitter = function(args){ 
//Other functions ...... 

$(window).bind("resize", function(){      
resizeBind(); 
}); 

function resizeBind(){ 
    var top = splitter.offset().top; 
    var wh = $(window).height(); 
    var ww = $(window).width(); 
    var sh = 0; // scrollbar height  
if (ww <0 && !jQuery.browser.msie) 
    sh = 17;   
    var footer = parseInt($("#footer").css("height")) || 26; 
    splitter.css("height", wh-top-footer-sh+"px"); 
    $("#tabsRight").css("height", splitter.height()-30+"px");      
    $(".contentTabs").css("height", splitter.height()-70+"px");    
    } 
return this.each(function() { 
}); 
}; 
})(jQuery); 

Answer 1

fonction resizeBind est définie comme privée de sorte que vous ne pouvez pas y accéder à l'extérieur de celui-ci est portée. Si vous voulez l'utiliser dans d'autres champs d'application, vous devez définir comme ça

$.fn.resizeBind = function() { ... } 

Ensuite, vous appeler comme ça $(selector').resizeBind()

Answer 2

Vous avez défini la fonction resizeBind dans un champ qui est différent du monde portée. Si vous dont'use un autre framework javascript ou toute autre chose qui utilise la fonction $ (pour prévenir les conflits), vous pouvez supprimer la déclaration

(function($){ 

... 

})(jQuery); 

et de cette façon la fonction sera appelable partout sans erreurs

Answer 3

I ne l'a pas testé:

this.resizeBind = function() { .... } 

Answer 4

J'ai eu le même problème. Ces réponses sur des sujets connexes n'ont pas non plus fonctionné pour mon cas. Je l'ai résolu en rond en utilisant des événements.

L'exemple ci-dessous illustre l'appel d'une fonction qui multiplie trois valeurs de données internes par un multiplicateur donné et renvoie le résultat. Pour appeler la fonction, vous déclenchez un événement. Le gestionnaire à son tour déclenche un autre événement qui contient le résultat. Vous devez configurer un écouteur pour l'événement de résultat.

Voici le plugin - la plupart du temps l'architecture de plugin jQuery norme créée par un assistant en ligne:

(function($){ 

    $.foo = function(el, options){ 

     // To avoid scope issues, use 'base' instead of 'this' 
     var base = this; 
     // Access to jQuery and DOM versions of element 
     base.$el = $(el); 
     base.el = el; 
     // Add a reverse reference to the DOM object 
     base.$el.data("foo", base); 

     base.init = function(){ 

      base.options = $.extend({},$.foo.defaultOptions, options); 

      // create private data and copy in the options hash 
      base.private_obj = {}; 
      base.private_obj.value1 = (base.options.opt1); 
      base.private_obj.value2 = (base.options.opt2); 
      base.private_obj.value3 = (base.options.opt3); 


      // make a little element to dump the results into 
      var ui_element = $('<p>').attr("id","my_paragraph").html(base.private_obj.value1 +" "+ base.private_obj.value2+" " +base.private_obj.value3); 
      base.$el.append(ui_element);     


      // this is the handler for the 'get_multiplied_data_please' event. 
      base.$el.bind('get_multiplied_data_please', function(e,mult) { 
       bar = {}; 
       bar.v1 = base.private_obj.value1 *mult; 
       bar.v2 = base.private_obj.value2 *mult; 
       bar.v3 = base.private_obj.value3 *mult; 
       base.$el.trigger("here_is_the_multiplied_data", bar); 
      }); 

     }; 

     base.init(); 
    } 


    $.foo.defaultOptions = { 
     opt1: 150, 
     opt2: 30, 
     opt3: 100 
    }; 

    $.fn.foo = function(options){ 
     return this.each(function(){ 
      (new $.foo(this, options)); 
     }); 
    }; 

})(jQuery); 

Ainsi, vous pouvez attacher l'objet à un élément comme d'habitude lorsque le document est prêt. Et en même temps mettre en place un gestionnaire pour l'événement de résultat.

$(document).ready(function(){ 
    $('body').foo(); 

    $('body').live('here_is_the_multiplied_data', function(e, data){ 
     console.log("val1:" +data.v1); 
     console.log("val2:" +data.v2); 
     console.log("val3:" +data.v3); 
     $("#my_paragraph").html(data.v1 +" "+ data.v2+" " +data.v3); 
    }); 
}) 

Tout ce qui reste est de déclencher l'événement et transmettre une valeur de multiplicateur Vous pouvez taper ceci dans la console - ou déclencher à partir d'un bouton qui choisit le multiplicateur d'un autre élément d'interface utilisateur

$('body').trigger('get_multiplied_data_please', 7); 

Clause de non-responsabilité;) - Je suis assez nouveau à jQuery - désolé si c'est en utilisant un marteau pour casser un écrou.