Giao diện người dùng jQuery - thay đổi màu nút

Question

Sử dụng giao diện người dùng jQuery Tôi có hai nút radio, Phê duyệt/Từ chối, mà tôi muốn tạo kiểu độc lập, vì vậy khi 'Chấp thuận' được chọn, nó sẽ có màu xanh dương và khi 'Từ chối' được chọn , nó sẽ có màu đỏ:

xin lỗi cho khủng khiếp nút đỏ mockup của tôi :-) Hy vọng rằng điều này sẽ cung cấp cho bạn một ý tưởng về những gì tôi sau đó. Tôi đã thử thay đổi lớp của cả hai nút/nhãn, nhưng điều này không được phản ánh trên lớp phủ jQuery-UI.

Dưới đây là mã của tôi hiện nay đó là tạo ra các nút, và cũng có thể hiển thị một đánh dấu hoặc chéo tùy thuộc vào sự lựa chọn:

$('.approvedToggle').buttonset(); 

$('input:radio').click(function() { 
    if($(this).val() === 'approve') { 
     $(this).parent('div').children(".tick").show(); 
     $(this).parent('div').children(".cross").hide(); 
    } else { 
     $(this).parent('div').children(".tick").hide(); 
     $(this).parent('div').children(".cross").show(); 
    } 
}); 

Bất kỳ trợ giúp sẽ được nhiều đánh giá cao - cảm ơn!

Answer 1

Những gì bạn cần làm là ghi đè kiểu dáng mặc định giao diện người dùng jQuery.

Dưới đây là những gì các documentation trạng thái:

Nếu một mức độ sâu sắc hơn về chỉnh là cần thiết, có lớp widget cụ tham chiếu trong jquery.ui.button.css stylesheet có thể được sửa đổi. Các lớp này được in đậm bằng chữ in đậm bên dưới.

đánh dấu mẫu với jQuery lớp khung UI CSS

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> <span class="ui-button-text">Button Label</span> </button>

Vì vậy, về cơ bản, những gì bạn có thể làm, là một cái gì đó như thế này:

HTML:

<div id="approvedToggle"> 
    <input type="radio" id="ApproveButton" name="radio" /> 
    <label id="ApproveButtonLabel" for="ApproveButton">Approve</label> 

    <input type="radio" id="RejectButton" name="radio" /> 
    <label id="RejectButtonLabel" for="RejectButton">Reject</label> 
</div>​ 

CSS(Quan trọng!phong cách này phải được khai báo SAU jQuery UI tập tin CSS):

#ApproveButtonLabel.ui-state-active { background: blue; } 
#ApproveButtonLabel.ui-state-active span.ui-button-text { color: red; } 

#RejectButtonLabel.ui-state-active { background: red; } 
#RejectButtonLabel.ui-state-active span.ui-button-text { color: blue; } 

jQuery:

$('#approvedToggle').buttonset();​ 

Output:

See the working jsFiddle demo

Answer 2

tôi sử dụng này cho jQueryUI Nút

CSS:

button.red-button 
{ 
    background:radial-gradient(#FF0000,#660000); 
    color:white; 
    border-color:#660000; 
} 
button.red-button:hover 
{ 
    background:radial-gradient(#FF0000,#880000); 
    color:white; 
    border-color:#660000; 
} 
button.red-button:active 
{ 
    background:radial-gradient(#FF0000,#660000); 
    color:white; 
    border-color:#660000; 
} 

.210

html:

<button class="red-button">Button</button> 

Đối với các bạn trường hợp có thể có thể sử dụng:

CSS:

input.red-button 
input.red-button:hover 
input.red-button:active