Làm thế nào để ghi đè lên jQuery UI Widget Styles và giữ chức năng

Question

Tôi đang sử dụng jQuery UI cho một ứng dụng trong nhà.

---

Tôi đang tìm cách dễ dàng để xóa tất cả thông tin kiểu được cung cấp bởi giao diện người dùng jQuery trên một phiên bản widget cụ thể. Tôi mở để thực sự bất cứ điều gì, nhưng một giải pháp javascript tái sử dụng sẽ được hoàn hảo. Nó hoàn toàn bắt buộc mà không có chức năng bị mất.

điều quan trọng nhất là tất cả hình nền được xóa, tôi vẫn giữ nguyên kiểu bố cục.

lý tưởng cái gì đó như ...

$tabs = $("#someElement").tabs(); 
$tabs.removeStyles(); 

Nhưng tôi mở cửa cho bất cứ điều gì cho phép tôi thay đổi phong cách phụ tùng một cách linh hoạt.

Mục tiêu cuối cùng là để có càng nhiều kiểm soát phong cách càng tốt

Answer 1

Để ghi đè lên css jquery-ui sử dụng thẻ !important.

.ui-dialog { 
    background-color: black !important; 
    } 

Answer 2

Bạn có thể dễ dàng tạo ra một hàm removeStyles của riêng bạn.

$.fn.removeStyles = function(){ 
$(this).attr('class',''); 
}; 

Điều này sẽ xóa tất cả các kiểu khỏi phần tử bạn chọn.

Chỉnh sửa: Nếu bạn chỉ muốn loại bỏ các lớp mà jquery ui tạo ra, bạn có các tùy chọn giới hạn. Bạn có thể so sánh các lớp trong thuộc tính class với một danh sách các lớp jquery-ui mà bạn đã gõ. Không có viên đạn ma thuật nào sẽ loại bỏ jquery ui một cách tự động.

Answer 3

bạn chỉ có thể xóa tệp css và bắt đầu xây dựng lại với chỉ bố cục bạn muốn. nó là rất nhiều công việc nhưng đó là giá mà đi kèm với nó ...

Answer 4

Cách dễ dàng hơn để xóa kiểu/lớp CSS là sử dụng. removeClass(). Ví dụ: để ghi đè tất cả các góc của các tab và chỉ có các góc trên cùng, tôi sử dụng nó như sau:

$('#tabs').tabs().removeClass('ui-corner-all').addClass('ui-corner-top'); 

Hy vọng điều này sẽ hữu ích!