如何将 jQuery UI 按钮图标添加到输入按钮？答案

【问题标题】：How to add jQuery UI Button icons to input buttons?如何将 jQuery UI 按钮图标添加到输入按钮？
【发布时间】：2010-05-12 21:29:58
【问题描述】：

是否可以将jQuery UI Button icons 与<input type="submit"> 元素一起使用？

文档示例使用<button> 元素，但没有明确说明图标是否与输入按钮一起使用。我想将图标添加到呈现为<input type="submit"> 的 ASP.NET Button 控件。

这是我尝试过的：

$("input.add").button({ icons: { primary: "ui-icon-circle-plus" } });

按钮的样式正确，但缺少图标。我错过了什么吗？

【问题讨论】：

标签： asp.net jquery-ui

【解决方案1】：

你做得对。它似乎不适用于输入元素。粗略查看 JQuery UI Button 的源代码表明它在获取图标的元素前添加了<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>，但这似乎不会发生在输入元素上。

实际上看起来更近了一点。不知道我第一次是怎么错过的，但来源包含以下内容：

if ( this.type === "input" ) {
  if ( this.options.label ) {
    this.element.val( this.options.label );
  }
  return;
}

这基本上告诉代码在跨度被添加/添加到输入元素之前退出。所以这是设计使然。

【讨论】：

【解决方案2】：

正如 Bradley Mountford 所说，Submit 元素的设计风格不是图标（我不知道为什么要这样设计）。

将您的 asp:Button 更改为 asp:LinkButton，一切正常。没错，就是这么简单。

【讨论】：

【解决方案3】：

我的问题是样式被覆盖了，所以这个解决方案帮助了我：

$('input.add').each(function(){
          $(this).replaceWith('<button  class="add" type="' + $(this).attr('type') + '">' + $(this).val() + '</button>');
});
$('.add').button({ icons: { primary: 'ui-icon-circle-plus' } });

【讨论】：

【解决方案4】：

我正在寻找这个解决方案，我找到了一个完美的解决方案

javascript

$(function () {

    //botoes de login

    $("#btnLogin").button({
            icons: { primary: "ui-icon-key" }
        }).hide().after('<button>').next().button({
            icons:
            {
                primary: 'ui-icon-key'
            },
            label: $("#btnLogin").val()
        }).click(function (event) {
            event.preventDefault();
            $(this).prev().click();
        });
    $("#close").button({ icons: { primary: "ui-icon-close" } });
});

网络表单

<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />

【讨论】：

你能解释一下这是做什么的吗？
该js是使用自定义jquery ui主题和asp.net按钮btnLogin中的图标
+1 这对我帮助很大。以前的答案都没有按预期工作。不知道为什么它们不起作用，但是这个起作用了。