jQuery UI Dialog - thiết lập một cấu hình mặc định

Question

Tôi có một vài xử lý jQuery UI Dialogs, tất cả đều chứa những điều sau đây:

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

Điều này là để hộp thoại có góc vuông, chứ không phải là những hình tròn. Tôi đã tự hỏi nếu nó có thể có thiết lập này là mặc định, vì vậy mà tôi không phải chèn mã này vào mỗi cấu hình hộp thoại trên trang.

Tôi biết tôi có thể chỉnh sửa CSS, nhưng bạn nên xóa lớp nếu không cần thiết.

Answer 1

Tôi biết nó không hoàn hảo, nhưng bạn có thể xác định đối tượng defaults của riêng bạn có chứa các giá trị mặc định của bạn. Sau đó, nếu bạn cần phải ghi đè hoặc thêm vào những giá trị mặc định, bạn có thể sử dụng $.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... */ 
})); 

Cũng nên nhớ rằng cho các sự kiện, bạn có thể liên kết với họ bên ngoài trong những lựa chọn đối tượng bằng cách sử dụng on (hoặc anh chị em của nó delegate, bind và live). Bạn có thể áp dụng mà xử lý sự kiện cho nhiều hộp thoại bằng cách áp dụng cùng lớp cho tất cả các hộp thoại của bạn, ví dụ:

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

Chỉ cần ghi nhớ rằng xử lý sự kiện này sẽ không bắn ra cho các hộp thoại mới. Bạn có thể để cho các bong bóng sự kiện lên DOM để các body và đính kèm các xử lý sự kiện đó (đây là con đường tôi sẽ đi):

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

Với phương pháp này của đoàn đại biểu sự kiện, bạn đang áp dụng chức năng open của bạn để tất cả hộp thoại sẽ được thêm vào document.body.