Jquery UI buttonset icons

Question

Hi

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 :

Figured it out,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

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!