2012-05-10 10 views
9

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 đỏ:Giao diện người dùng jQuery - thay đổi màu nút

Nothing selected

Approve selected

Reject selected

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!

+1

Bạn có một cách để phân biệt hai nút loại? (Xem một số đánh dấu và kiểu của bạn sẽ giúp ích ở đây.) Từ ảnh chụp màn hình của bạn, có vẻ như màu xanh lam được áp dụng trực tiếp cho chủ đề '.ui-button.ui-state-active 'trong chủ đề (không cần mã) thực sự là trường hợp? –

+0

Cảm ơn bạn, đúng vậy :) – Nick

+1

Bạn có thể đăng jQuery mà bạn đã thử không? – j08691

Trả lời

21

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:

enter image description here


See the working jsFiddle demo

+1

Tôi tò mò; hiện css tùy chỉnh đã được khai báo sau khi jquery ui? Các lớp không được bắt đầu bằng id, '# id.ui-state-active' có chứa trọng lượng lớn hơn và tự động ghi đè lên' .ui-state-active' mặc định không phụ thuộc vào vị trí của nó không? – ephemeron

+4

Trong trường hợp cụ thể này, có. Tuy nhiên, nếu bạn đã ghi đè * tất cả * trạng thái hoạt động của nút, bạn sẽ chỉ sử dụng bộ chọn lớp và do đó, nó sẽ cần được khai báo sau tệp css UI của jQuery. Như một phương pháp hay nhất, tôi luôn bao gồm các phong cách CSS css jQuery UI quan trọng của mình sau tệp chủ css jQuery UI. –

+0

Điều này hoàn toàn hoàn hảo, theo mọi cách - cảm ơn bạn rất nhiều! :-) – Nick

1

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 
+0

Điều này là tuyệt vời, bất kỳ ý tưởng làm thế nào để thay đổi màu sắc cho di chuột hoạt động? – Mick