вызов функции внутри вложенного плагина jquery

Question

Есть много тем, связанных с моим вопросом, и я прошел через большинство из них, но я не понял это правильно. Ближайший пост к моему вопросу следующий:

Как вызвать функции, вложенные в плагин JQuery?

Ниже плагин jquery, который я использую. При изменении размера размеры элемента пересчитываются. Я сейчас пытаюсь вызвать функцию resizeBind () извне плагина jquery, и это дает мне ошибку

Я пробовал следующие комбинации для вызова функции

$. 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

У меня была такая же проблема. Эти ответы на соответствующие посты тоже не сработали для моего случая. Я решил это по кругу о том, как использовать события.

Пример ниже демонстрирует вызов функции, которая умножает три внутренних значения данных на заданный множитель и возвращает результат. Чтобы вызвать функцию, вы запускаете событие. Обработчик в свою очередь вызывает другое событие, которое содержит результат. Вам необходимо настроить прослушиватель для события результата.

Вот плагин - в основном стандартная архитектура плагинов 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);
    });
})

Осталось только запустить событие и передать ему значение множителя. Вы можете набрать это в консоли - или вызвать его с помощью кнопки, которая выбирает множитель из другого элемента пользовательского интерфейса

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

Отказ от ответственности;) - Я новичок в jQuery - извините, если для этого используется молоток.

Answer 2

Вы определили функцию resizeBind в области, отличной от глобальной области. Если вы не используете другую платформу JavaScript или что-либо еще, использующее функцию $ (для предотвращения конфликта), вы можете удалить

(function($){ 

...

})(jQuery);

оператор и, таким образом, функция будет вызываться везде без ошибок

Answer 3

Я не проверял это:

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

Answer 4

resizeBind функция определена как частная, поэтому вы не можете получить к ней доступ за пределами ее области действия. Если вы хотите использовать его в других областях, вам нужно определить его следующим образом:

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

Тогда вы бы назвали это так $(selector').resizeBind()