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

我可以像这样在代码中为jQuery UI按钮定义图标;jQuery UI：如何在HTML中定义按钮图标

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

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

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

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

来源

2010-11-23 bkilinc

您可以使用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验证插件支持使用它。

来源

2010-11-23 21:00:07 TJB

您可以使用"options"参数

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

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

来源

2010-11-23 18:49:20 TJB

谢谢。问题是，我不想在onready事件中添加javascript语句，每当我添加一种新的按钮时，我想在标记中定义图标（如添加额外的类）。我认为这在ui按钮对象中是不可能的。 – bkilinc 2010-11-23 20:00:33

好吧，让我发布另一个可能有帮助的答案 – TJB 2010-11-23 20:53:18

元数据插件工作正常，你甚至可以做更多：您还可以设置ALL一个jQuery UI按钮的初始化属性（其他部件也是如此）：

<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 - 大理念！ :)

来源

2011-02-05 15:51:10

下面的代码查找“UI-icon- [图标名称]”在含有类“jqbutton”所有元素的类属性，并用“UI-icon- 创建一个按钮[icon-name]“图标。

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

来源

2013-04-11 13:47:02 user2270552

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

回答

相关问题