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

Question

能否在 <input type="submit"> 元素中使用 jQuery UI Button 图标？

文档示例使用了 <button> 元素，但并未明确说明图标是否可用于输入按钮。我希望将图标添加到作为 <input type="submit"> 渲染的 ASP.NET Button 控件中。

我尝试过以下内容：

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

除了缺少图标外，按钮的样式正确。我是否漏掉了什么？

- jrummell

Answer 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;
}

这基本上告诉代码在将span预置/附加到输入元素之前退出，所以这是有意为之的。

- Bradley Mountford

Answer 2

正如Bradley Mountford所述，提交元素在设计上并没有使用图标样式（为什么要这样设计我不知道）。

将您的asp：Button更改为asp：LinkButton，世界就会恢复正常。是的，就是这么简单。

- Cane

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

- Mantas Vaitkūnas

Answer 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" /> 

- FábioMuniz

---

可以为这个操作添加一个解释吗？ - FDinoff

使用自定义的jQuery UI主题并在ASP.NET按钮btnLogin中添加图标的js。 - FábioMuniz

+1 这对我非常有帮助。之前的回答都不能按预期工作。不确定为什么他们不能工作，但这个可以。 - akousmata