Làm cách nào để áp dụng chủ đề giao diện người dùng jQuery vào html thông thường của tôi?

Question

Tôi sử dụng jQuery UI cho các tiện ích khác nhau như hộp thoại, nút, v.v. Tôi muốn tiếp tục sử dụng chủ đề cho các yếu tố trang web khác của tôi như thông báo lỗi/cảnh báo và kiểu đánh dấu. Vì vậy, tôi đã đi đến trang ThemeRoller để xem những gì họ sử dụng cho css xung quanh, ví dụ, một thông báo cảnh báo:

<div class="ui-widget"> 
    <div style="padding: 0 .7em;" class="ui-state-error ui-corner-all"> 
     <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span> 
     <strong>Alert:</strong> Sample ui-state-error style.</p> 
    </div> 
</div> 

Có một div wrapper, span với biểu tượng nền, vv Tôi chỉ cần sao chép này hay không jQuery UI javascript tạo một số cho tôi? Cách thích hợp để áp dụng chủ đề cho html không phải là tiện ích là gì?

Answer 1

Chỉ cần áp dụng điều đó vào HTML của riêng bạn. Không cần Javascript (ngoại trừ trạng thái di chuột).

Khi bạn đang sử dụng widget của jQueryUI, Javascript sẽ tạo tất cả HTML đó với các lớp đó.

Nếu bạn cần trạng thái di chuột, bạn sẽ phải chuyển đổi lớp ui-state-hover. Cho rằng bạn sẽ cần javascript:

$('.ui-state-error').hover(function(){ 
    $(this).toggleClass('ui-state-hover'); 
}); 

Answer 2

Bạn có thể theo mặc định chỉ sử dụng ThemeRoller được xác định trước, các yếu tố trên trang web của bạn: nút, biểu tượng, thanh tiêu đề vv và tất cả các vật dụng jquery như datepicker, hộp thoại, đánh dấu/lỗi - khá nhiều tất cả các elemen bạn nhìn thấy tại http://jqueryui.com/themeroller/#themeGallery.

để lưu trữ điều này, bạn phải sao chép html và các lớp thích hợp cho các thẻ html và trình duyệt sẽ áp dụng các kiểu từ yourmeroller.css đi kèm với nó. Tuy nhiên,

tuy nhiên, điều này cũng có nghĩa là bạn bị giới hạn một chút với bố cục của mình. Bạn vẫn có thể bao gồm các phần tử khác, không phải là động cơ miễn là bạn áp dụng các lớp css phù hợp (.ui-state-default, .ui-state-hover, .ui-state-disabled, các biểu tượng, vv) vào html của bạn có thể sử dụng trình tạo chủ đề - xem http://jqueryui.com/docs/Theming/API để biết danh sách đầy đủ các lớp áp dụng.