Javascript Jquery UI 按钮组图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2514650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery UI buttonset icons
提问by vanzylv
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
我在向 jQuery UI 的按钮组添加图标时遇到问题。向按钮添加图标工作正常。有人有这样的例子吗
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'} });
回答by vanzylv
Update:
更新：
I figured it out; it was pretty simple.
我想到了; 这很简单。
$("#radio1").button({
icons: {
primary: 'ui-icon-gear',
secondary: 'ui-icon-triangle-1-s'
}
});
Thanks, all!
谢谢大家！
回答by knowncitizen
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'})
回答by Alex
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();
回答by Yanick Rochon
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.
事实证明， buttonset() 将按钮装饰类重新应用于组元素，您需要的只是将分组的按钮包装在一个公共元素中……这样您就可以像往常一样初始化按钮，然后应用 buttonset( ) 到所需的组。
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!
当然，所有需要组合在一起的按钮都已经相邻了，但是您明白了。这也只是个例子！
