Đặt loại góc tròn trên Hộp thoại giao diện người dùng jQuery

Question

Tôi đang sử dụng plugin hộp thoại jquery và mặc định là có tất cả 4 góc của thanh tiêu đề được làm tròn. Bạn có thể xem đánh dấu rằng hộp thoại sản xuất ở đây

http://jqueryui.com/demos/dialog/#theming

Trong ví dụ mà bạn có thể nhìn thấy trên ui-dialog-titlebar div có một lớp được gọi là ui-corner-all, tôi muốn thay đổi điều đó để ui-corner-top. Có cách nào để đặt loại tròn góc tròn khi tôi bắt đầu hộp thoại?

Có tùy chọn hacky chỉnh sửa tệp JavaScript hộp thoại giao diện người dùng jquery để có lớp đó luôn ở đó nhưng dường như không linh hoạt.

Cảm ơn

Answer 1

Bạn không nên thay đổi thư viện jquery ui để thực hiện điều đó. Hãy tưởng tượng bạn sẽ phải thay đổi thư viện mỗi khi bạn muốn nâng cấp nó.

Tiện ích con giao diện người dùng jQuery triển khai Nhà máy Widget. Khi một widget được khởi tạo, một sự kiện "create" được kích hoạt. Sử dụng sự kiện này để làm thay đổi đánh dấu tạo:

$("#dialog").dialog({ 
    create: function(e, ui) { 
     // 'this' is #dialog 
     // get the whole widget (.ui-dialog) with .dialog('widget') 
     $(this).dialog('widget') 
      // find the title bar element 
      .find('.ui-dialog-titlebar') 
      // alter the css classes 
      .removeClass('ui-corner-all') 
      .addClass('ui-corner-top'); 
    } 
}); 

DEMO

Answer 2

Đối với những người bạn mà chỉ đơn giản là muốn loại bỏ các border-radius hoàn toàn (hoặc bất kỳ phong cách JQuery UI khác), bạn cần phải tạo một "dialogClass" trong các tùy chọn hộp thoại.

$("#dialog").dialog({ 
modal: true, 
draggable: true, 
resizable: false, 
dialogClass: "MyClass", 
}); 

Khi bạn đã làm như vậy, bạn có thể sửa đổi bất kỳ lớp và kiểu mặc định nào trong biểu định kiểu CSS của riêng bạn.

.MyClass .ui-corner-all { 
    border-radius: 0; 
}