Call-Funktion in einem verschachtelten Jquery-Plugin

Question

Es gibt viele Themen im Zusammenhang mit meiner Frage, und ich habe durch die meisten von ihnen gewesen, aber ich habe es nicht richtig gemacht. Der nächste Beitrag zu meiner Frage ist folgende:

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

unten ist die jQuery-Plugin ich verwende. Bei der Größenänderung werden die Elementgrößen neu berechnet. Ich versuche nun die Funktion resizeBind() von außerhalb des jQuery-Plugin zu nennen und es gibt mir Fehler

ich folgende Kombinationen versucht, die Funktion

$ .fn.splitter() aufrufen. ResizeBind()

$ .fn.splitter.resizeBind()

Irgendwelche Ideen, wo ich bin immer falsch?

;(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

resizeBind Funktion als privat definiert, so dass Sie es nicht von außen zugreifen kann davon Umfang ist. Wenn Sie es in anderen Bereichen verwenden möchten, müssen Sie es so, dass

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

definieren, dann würden Sie es nennen, wie die $(selector').resizeBind()

Answer 2

Sie die resizeBind Funktion in einem Umfang definiert haben, die von der globalen unterscheidet Umfang. Wenn Sie eine andere JavaScript-Framework oder irgendetwas anderes dont'use, die den $ -Funktion verwendet (zur Verhinderung von Konflikten) können Sie die

(function($){ 

... 

})(jQuery); 

Anweisung löschen und auf diese Weise wird die Funktion aufrufbar überall sein, ohne Fehler

Answer 3

I habe es nicht getestet:

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

Answer 4

Ich hatte das gleiche Problem. Diese Antworten auf verwandte Beiträge funktionierten auch nicht für meinen Fall. Ich löste es in einer Runde über die Verwendung von Ereignissen.

Das folgende Beispiel demonstriert den Aufruf einer Funktion, die drei interne Datenwerte mit einem gegebenen Multiplikator multipliziert und das Ergebnis zurückgibt. Um die Funktion aufzurufen, lösen Sie ein Ereignis aus. Der Handler wiederum löst ein anderes Ereignis aus, das das Ergebnis enthält. Sie müssen einen Listener für das Ergebnisereignis einrichten.

Hier ist das Plugin - meist Standard jQuery Plugin-Architektur durch ein Online-Assistent erstellt:

(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); 

So können Sie das Objekt zu einem Element wie üblich an, wenn das Dokument fertig ist. Und richten Sie gleichzeitig einen Handler für das Ergebnis-Event ein.

$(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); 
    }); 
}) 

dass links Alles, was ist das Ereignis ausgelöst werden und es einen Multiplikatorwert übergeben Sie diese in die Konsole geben könnte - oder auslösen es von einem Knopf, der den Multiplikator von einem anderen UI-Element herauspickt

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

Haftungsausschluss;) - Ich bin ziemlich neu in jQuery - Entschuldigung, wenn dies einen Hammer verwendet, um eine Nuss zu knacken.