JQuery UI кнопки иконки

Question

У меня проблемы с добавлением значков к кнопочным наборам пользовательского интерфейса jQuery. Добавление значков к кнопкам работает нормально. У кого-нибудь есть пример этой работы

Спасибо

Разметка

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

Сценарий

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

Answer 1

Обновление:

Я понял это; это было довольно просто.

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

Спасибо всем!

Answer 2

Я боролся с этим и сегодня - лучший способ, если вы используете buttonset, это применить класс к элементам внутри и затем использовать селектор класса:

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

Answer 3

Мне нужно было добавить значок для выбранных флажков в buttonset и обновить их, когда пользователь меняет выбор.

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();

Answer 4

Оказывается, что buttonset () повторно применяет классы оформления кнопок к элементам группы, и все, что вам нужно, это обернуть сгруппированные кнопки в общий элемент ... так что вы можете просто инициализировать свои кнопки как обычно, затем затем примените buttonset () к нужной группе.

Вот что я делаю (пример):

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();

Конечно, все кнопки, которые нужно сгруппировать, уже смежны, но вы поймете, что нужно. Это тоже пример!