Добавить настраиваемый метод для плагина диалога пользовательского интерфейса

Question

Я использую диалоговые окна пользовательского интерфейса jQuery, и я хочу добавить собственный метод.

В основном, когда мой диалог имеет класс «рабочий», в нем есть нагрузка загрузки. Я пытаюсь написать какое-то глобальное приложение jQuery, чтобы при закрытии любого диалога он удалял класс «рабочий».

Я не совсем уверен, что я делаю, но это то, что я до сих пор:

(function ($) { 

    // BIND TO DIALOG CLOSE EVENT 
    $('.ui-dialog').live('dialogclose', function() { 
     $(this).dialog('cancelWorking'); 
    }); 

    // CUSTOM METHOD 
    $.fn.dialog.cancelWorking = function() { 
     $(this).removeClass('working'); 
    }; 

}(jQuery)); 

Как вы можете видеть, что я действительно не знаю, как назвать cancelWorking метод диалога , и я не уверен, правильно ли я определил этот метод.

Answer 1

Как уже упоминалось в моем комментарии, вы можете наследовать от плагина и расширять его методы.

(function($,undefined) { 

    $.widget('ui.mydialog', $.ui.dialog,{ 
     test : function() { alert('works') }, 
    }); 

    $.extend($.ui.mydialog,{version:'v0.1'}); 
})(jQuery); 

Чтобы использовать это просто:

$('.selector').mydialog({modal:true}); //Create (same as a dialog) 

$('.selector').mydialog('test'); //Call extended method 

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

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

Answer 2

Я хотел сделать то же самое, но не был удовлетворен принятым ответом. Я посмотрел немного дальше в нее и обнаружил, что вы можете новые методы, как, например:

$.ui.dialog.prototype.toggleProcessing = function(enable) { 
    alert(((enable) ? 'en' : 'dis') + 'able processing'); 
} 

И тогда вы можете назвать это, как вы назвали бы любой другой метод JQuery UI:

$('#myDialog').dialog('toggleProcessing', true); 
$('#myDialog').dialog('toggleProcessing', false);