2009-08-26 53 views
2

有很多与我的问题有关的主题,我已经通过其中的大多数,但我没有得到它的权利。最近的帖子到我的问题如下:嵌套jquery插件中的调用函数

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

回答

0

resizeBind函数定义为私有所以它的范围,你不能从外部访问它。如果你想在其他范围内使用它,你需要定义它像

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

那么你会这样称呼它是$(selector').resizeBind()

+0

我无法将resizeBind定义为单独的插件,因为存在绑定到splitter插件的值。 – tchoesang 2009-08-26 14:57:17

0

您已经定义的范围resizeBind功能是从全球不同范围。如果您dont'use另一个javascript框架或其他任何使用$功能(防止冲突),你可以删除

(function($){ 

... 

})(jQuery); 

声明,这样的功能将调用无处不没有错误

0

我没有测试它:

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

我有同样的问题。那些关于相关职位的答案也不适用于我的案例。我利用事件围绕方式解决了这个问题。

下面的示例演示如何调用一个函数,它将三个内部数据值乘以给定的乘数,然后返回结果。要调用该函数,可以触发一个事件。该处理程序反过来触发另一个包含结果的事件。您需要为结果事件设置侦听器。

这里的插件 - 通过在线向导创建大多标准的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相当陌生 - 对不起,如果这是使用锤子来打破坚果。

+1

:-)无论如何,这非常有创意。 – smendola 2011-12-13 18:07:25