Jquery UI 按钮集图标答案

【问题标题】：Jquery UI buttonset iconsJquery UI 按钮集图标
【发布时间】：2010-03-25 10:23:27
【问题描述】：

我在将图标添加到 jQuery UI 的按钮集时遇到问题。将图标添加到按钮工作正常。有没有人有这个工作的例子

谢谢

标记

<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'} });

【问题讨论】：

你遇到了什么样的麻烦，你尝试过什么失败了？展示和讲述
标记
顶部10 个常见问题解答过去 30 天
jQuery $("#radio ").buttonset({icons: { primary: 'ui-icon-triangle-1-ne'}});
@vanzylv - 您可以将标记添加到问题中，只需单击编辑，将其粘贴，突出显示代码部分并单击 1 和 0 按钮将其标记为正确格式:)跨度>

标签： javascript jquery jquery-ui

【解决方案1】：

更新：

我想通了；这很简单。

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

谢谢大家！

【讨论】：

我想补充一点，如果我们动态创建按钮（var radio1=$(<input id='radio1' name='radio' /><label for="radio1">Text</label>)），我们需要再次搜索元素：$('#radio1').button(...) 而不是radio1.button(...)。

【解决方案2】：

我今天也遇到了这个问题 - 如果您使用的是按钮集，更好的方法是将类应用于其中的元素，然后使用类选择器：

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

【讨论】：

@knowncitizen 您是否注意到辅助选项不适用于按钮集？ $("#button-" + uniqueItemId).button("option", "icons", {primary: 'ui-icon-closethick', secondary: 'ui-icon-closethick'})
我刚刚尝试过，它通过我上面描述的类方法运行良好。不确定您使用的方法。

【解决方案3】：

我需要在按钮集中为选中的复选框添加图标，并在用户更改选择时更新它们。

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

【讨论】：

【解决方案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();

当然，所有需要组合在一起的按钮已经是相邻的，但你明白了。这也只是一个例子！

【讨论】：