Jquery UI buttonset icons

Question

I'm having trouble adding icons to jQuery UI's buttonset's.Adding icons to buttons work fine.Does anyone have a example of this working

Thanks

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>

Script

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

Answer 1

Update:

I figured it out; it was pretty simple.

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

Thanks, all!

Answer 2

I struggled with this today as well - a better way, if you're using a buttonset is to apply a class to the elements within and then use the class selector:

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

Answer 3

I needed to add icon for selected checkboxes in buttonset and update them when user changes selection.

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

It turns out that buttonset() re-applies the button decoration classes to the group elements, and all you need is to wrap the grouped buttons in a common element... so you can just initialize your buttons as usual, then apply buttonset() to the desired group afterwards.

This is what I do (example) :

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

Of course, all buttons that needs to be grouped together are already adjacent, but you get the point. This is just an example too!