ネストされたjqueryプラグインの中のコール関数

Question

私の質問に関連した多くのトピックがありますが、私はそれらのほとんどを経験していますが、私はそれが正しくありません。以下は私の質問に最も近いポスト：以下

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

は、私が使用しているjQueryプラグインです。サイズ変更時に、要素サイズが再計算されます。私は、関数を呼び出すには、以下の組み合わせを試してみました、私は今、jQueryプラグインの外側から）（関数resizeBindを呼び出すしようとしていますし、それは私にエラー

を与える

$ .fn.splitter（）。resizeBind（）

$ .fn.splitter.resizeBind（）

私が間違って取得しています任意のアイデア、？

;(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あなたはスコープのITの外からアクセスできないように関数がプライベートとして定義されています。あなたはその

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

のように、それを定義する必要があり、他のスコープでそれを使いたいなら、あなたはあなたが世界の異なるスコープにresizeBind機能が定義されていること$(selector').resizeBind()

Answer 2

のようにそれを呼び出します範囲。あなたは$関数を使用する別のJavaScriptフレームワークや何かを（競合を防ぐために）dont'use場合は

(function($){ 

... 

})(jQuery); 

文を削除することができ、このように関数がエラー

Answer 3

私はせずにどこにでも呼び出し可能になりますテストしませんでした：

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

Answer 4

私は同じ問題がありました。関連する投稿の回答は、私の場合でもうまくいきませんでした。イベントを使ってラウンドで解決しました。

以下の例は、3つの内部データ値に与えられた乗数を乗算し、その結果を返す関数を呼び出す方法を示しています。関数を呼び出すには、イベントをトリガーします。ハンドラは、結果を含む別のイベントをトリガします。 resultイベントのリスナーを設定する必要があります。

ここでは、プラグインの - オンラインウィザードで作成され、ほとんどの標準的なjQueryプラグインアーキテクチャ：

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

は、ドキュメントの準備ができているときに、あなたはいつものように要素にオブジェクトを添付することができます。同時に、結果イベントのハンドラを設定します。

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

すべてのことが残っていますが、イベントをトリガし、乗数値 あなたがコンソールにこれを入力することができ、それを渡すことです - または別のUI要素から

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

を乗数を選び、ボタンから、それをトリガー

免責事項;） - jQueryの新機能です。ハンマーを使用してナットをクラックさせてしまった場合は、ごめんなさい。