JQuery UI Dialog - установить конфигурацию по умолчанию - PullRequest
Новая
       9

JQuery UI Dialog - установить конфигурацию по умолчанию

5 голосов
/ 15 февраля 2012

У меня есть несколько обработчиков диалогов JQuery UI Dialogs, каждый из которых содержит следующее: 

open: function(event, ui) {
      $(".ui-dialog-titlebar").removeClass("ui-corner-all");
      $(".ui-dialog").removeClass("ui-corner-all");
},

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

Я знаю, что могу редактировать CSS, но это делает большесмысл действительно удалить класс, если он не нужен.

1 Ответ

8 голосов
/ 15 февраля 2012

Я знаю, что это не идеально, но вы можете определить свой собственный defaults объект, который содержит ваши значения по умолчанию. Тогда, если вам нужно переопределить или добавить эти значения по умолчанию, вы можете использовать $.extend: 

var dialogDefaults = {
    open: function (event, ui) {
        $(".ui-dialog-titlebar").removeClass("ui-corner-all");
        $(".ui-dialog").removeClass("ui-corner-all");
    }
};
// then later on:
$("#foo").dialog($.extend({ }, dialogDefaults, {
    autoOpen: false,
    width: 500,
    /* etc... */
}));

Также помните, что для событий вы можете привязать их к объекту параметров, используя on (или его родные элементы delegate, bind и live). Вы можете применить этот обработчик событий к нескольким диалогам, применяя один и тот же класс ко всем вашим диалогам, например: 

$("div.my-dialog-class").on("dialogopen", function (event, ui) {
    $(".ui-dialog-titlebar").removeClass("ui-corner-all");
    $(".ui-dialog").removeClass("ui-corner-all");
});

Только помните, что этот обработчик событий не будет запускаться для новых диалогов. Вы можете позволить событию всплыть в DOM к body и присоединить к нему обработчик события (я бы пошел по этому маршруту): 

$(document.body).on("dialogopen", "div.my-dialog-class", function (event, ui) {
    $(".ui-dialog-titlebar").removeClass("ui-corner-all");
    $(".ui-dialog").removeClass("ui-corner-all");
});

С помощью этого метода делегирования событий вы применяете вашу функцию open ко всем диалогам, которые когда-либо будут добавлены к document.body.

...