biểu tượng buttonset jquery UI

Question

Tôi đang gặp rắc rối thêm biểu tượng để biểu tượng buttonset's.Adding jQuery UI để nút làm việc fine.Does ai có một ví dụ của việc này làm việc

Cảm ơn

Markup

<div id="radio" class='demo'> 
    <input type="radio" id="radio1" name="radio" /><label for="radio1">Top 10 FAQ's</label> 
    <input type="radio" id="radio2" name="radio" /><label for="radio2">Last 30 Days</label> 
</div> 

Tập lệnh

$("#radio").buttonset({ icons: { primary: 'ui-icon-triangle-1-ne'} }); 

Answer 1

Cập nhật:

Tôi đã tìm ra; nó khá đơn giản.

$("#radio1").button({ 
    icons: { 
     primary: 'ui-icon-gear', 
     secondary: 'ui-icon-triangle-1-s' 
    } 
}); 

Cảm ơn, tất cả!

Answer 2

tôi vật lộn với ngày hôm nay cũng - một cách tốt hơn, nếu bạn đang sử dụng một buttonset được áp dụng một lớp học để các yếu tố bên trong và sau đó sử dụng bộ chọn lớp:

$("#choices").buttonset(); 
$('.graph_checks').button("option", "icons", {primary:'ui-icon-circle-minus'}) 

Answer 3

Nó chỉ ra rằng buttonset() áp dụng lại các lớp trang trí nút cho các phần tử nhóm và tất cả những gì bạn cần là quấn các nút được nhóm trong một phần tử phổ biến ... để bạn chỉ có thể khởi tạo các nút như bình thường, sau đó áp dụng buttonset() cho mong muốn nhóm sau đó.

Đây là những gì tôi làm (ví dụ):

var buttons = { 
    '#id1': {group:'group1', options: options1}, 
    '#id2': {group:'group1', options: options2}, 
    .... 
    '#idn': {group:'group1', options: optionsN} 
} 
$.each(buttons, function(s,o) { $(s).addClass(o.group).button(o.options); }); 

$('.group1').wrapAll('<span></span>').parent().buttonset(); 

Tất nhiên, tất cả các nút mà cần phải được nhóm lại với nhau đã gần kề, nhưng bạn sẽ có được điểm. Đây chỉ là một ví dụ quá!

Answer 4

Tôi cần thêm biểu tượng cho các hộp kiểm đã chọn trong bộ nút và cập nhật chúng khi người dùng thay đổi lựa chọn.

var noIcon = {primary: null, secondary: null}; 
var withIcon = {primary: 'ui-icon-custom-tick', secondary: null}; 
$('#containerId input:checkbox').click(function(e) { 
    if ($(e.target).button("option", "icons").primary == null) { 
     $(e.target).button("option", "icons", withIcon).button('refresh'); 
    } else { 
     $(e.target).button("option", "icons", noIcon).button('refresh'); 
    } 
}); 
$('#containerId input:checkbox:checked').button({icons: withIcon}); 
$('#containerId input:checkbox:not(:checked)').button({icons: noIcon}); 
$('#containerId').buttonset();