Hộp thoại Giao diện người dùng JQuery: các tùy chọn toàn ứng dụng

Question

Tôi có nhiều hộp thoại jquery-ui trên ứng dụng của tôi. Mỗi lần duy nhất tôi cần một cái mới, tôi viết những dòng này:

$('.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('×') } 
}); 

Những điều duy nhất mà thực sự khác nhau giữa một hộp thoại từ một là chìa khóa buttons và title. Những gì tôi muốn có ở đây là một thiết lập ứng dụng rộng cho thoại JQuery, vì vậy tôi sẽ chỉ gọi

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

với tất cả các phím băm cần ngầm thiết lập (tôi muốn gọi nó - "mặc định" thiết lập).

Tôi biết tôi có thể gọi số .dialog() gọi, gọi số .myDialog() gọi nơi tôi tự mình đặt mọi thứ. Nhưng tôi tự hỏi nếu có một cách thực sự, thuận tiện để làm điều đó.

Cảm ơn trước!

Answer 1

Bạn có thể đặt các tùy chọn phổ biến ở một biến (hoặc trong data gắn liền với tài liệu nếu bạn muốn sử dụng chúng từ phạm vi khác nhau):

$(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("×"); 
    } 
}); 

Sau đó bạn có thể sử dụng $.extend() để thêm các tùy chọn cụ thể cho mỗi thoại:

$(".another-dialog").dialog(
    $.extend({}, $(document).data("common-dialog-options"), { 
     title: "Another dialog", 
     buttons: [ 
      { text: "OK" }, 
      { text: "Cancel" } 
     ] 
    }) 
); 

Answer 2

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