Question

我可以在这样的代码中为jquery ui按钮定义图标;

$( ".selector" ).button({ icons: {primary:'ui-icon-gear'} });

但我想在HTML代码中定义按钮图标。例如

<a href="#" class="jqbutton ui-icon-gear">button</a>

这样我只能打电话.. $（“。selector”）.button（）; 在onready事件中并在代码中定义图标。否则我需要为每个具有不同图标的按钮调用button（）方法。

Answer 1

您可以使用Metadata Plugin。

<a href="#" class="jqbutton {icon: ui-icon-gear}">button</a>

脚本

$(".jqbutton")
  .each(function(){
    var data = $(this).metadata();
    $(this).button({ icons: {primary:data.icon} });
});

我从未直接使用过这个，但是我已经通过它在jquery验证插件中的支持使用了它。

Answer 2

元数据插件工作正常，你甚至可以做更多：你也可以设置 ALL jQuery UI按钮的init属性（其他小部件）：

<script type="text/javascript">
$(document).ready(function(){
  $('.jq-button').each(function(){
    var meta=$(this).metadata();
    $(this).button(meta);
  });
});
</script>
<a href="#" class="jq-button {icons: {primary: 'ui-icon-new'}}">New item</a>

谢谢，TJB--好主意！：）

Answer 3

您可以使用"options"参数

初始化按钮后设置图标

$(".jqbutton").button();
$(".jqbutton.ui-icon-gear").button( "option", "icons", 
   {primary:'ui-icon-gear'} );

http://jqueryui.com/demos/button/#option-icons
编辑：链接不是直接的，所以只需查看选项选项卡并选择'图标'，然后看看@获取或设置图标选项，初始化后的部分

Answer 4

以下代码在包含“jqbutton”类的所有元素的class-attribute中查找“ui-icon- [icon-name] ”，并创建一个带有“ui-icon”的按钮 - [icon-name] “icon。

$(function() {
   $(".jqbutton").each(function() {
        var obj = $(this);
        var icon = false;
        var c = obj.attr('class');
        var i1 = c.indexOf('ui-icon-');
        if (i1 != -1) {
            var i2 = c.indexOf(" ", i1);
            icon = c.substring(i1, i2 != -1 ? i2 : c.length);
            obj.removeClass(icon);
        }
        obj.button({
            icons : {
                primary : icon 
            }
        });
    });
});

jquery UI：如何在HTML中定义按钮的图标

4 个答案: