JQuery UI Dialogs: опции для всего приложения - PullRequest
Новая
       5

JQuery UI Dialogs: опции для всего приложения

6 голосов
/ 12 августа 2011

В моем приложении полно диалогов jquery-ui. Каждый раз, когда мне нужен новый, я пишу следующие строки: 

$('.another-dialog').dialog({
  title: 'Another dialog',
  autoOpen: false,
  draggable: true,
  modal: true,
  show: 'fade',
  hide: 'fade',
  width: 400,
  position: ['center', 'center'],
  buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ],
  open: function(event, ui) { $(".ui-dialog-titlebar-close span").html('×') }
});

Единственное, что действительно отличается в одном диалоге от другого, - это клавиши buttons и title. То, что я хотел бы иметь здесь, это настройка JQuery для всего приложения, поэтому я бы назвал только 

$('.another-dialog').dialog({
  title: 'Another dialog',
  buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ]
});

со всеми необходимыми хэш-ключами, неявно настроенными (я бы назвал это «настройкой по умолчанию»).

Я знаю, что могу завернуть .dialog() позвонить, скажем, .myDialog() позвонить туда, где я все сам установлю. Но мне интересно, есть ли настоящий, удобный способ сделать это.

Заранее спасибо!

Ответы [ 2 ]

5 голосов
/ 12 августа 2011

Вы можете поместить общие параметры в переменную (или в данные , связанные с документом, если вы хотите использовать их из разных областей): 

$(document).data("common-dialog-options", {
    autoOpen: false,
    draggable: true,
    modal: true,
    show: "fade",
    hide: "fade",
    width: 400,
    position: ["center", "center"],
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close span").html("×");
    }
});

Затем вы можетеиспользуйте $. extend () , чтобы добавить определенные параметры для каждого диалога: 

$(".another-dialog").dialog(
    $.extend({}, $(document).data("common-dialog-options"), {
        title: "Another dialog",
        buttons: [
            { text: "OK" },
            { text: "Cancel" }
        ]
    })
);
0 голосов
/ 12 августа 2011 
var defaultDialog = {
  title: 'Another dialog',
  autoOpen: false,
  draggable: true,
  modal: true,
  show: 'fade',
  hide: 'fade',
  width: 400,
  position: ['center', 'center'],
  buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ],
  open: function(event, ui) { $(".ui-dialog-titlebar-close span").html('×') }
};

var tunnedDialog= jQuery.extend(true, {}, defaultDialog );

tunnedDialog.title: 'Another dialog';
tunnedDialog.buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ]

$('.another-dialog').dialog(tunnedDialog);
...