Question

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

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

这是我尝试过的：

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

除了丢失的图标外，该按钮的样式正确。我错过了什么吗？

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

这基本上告诉代码在跨度前置/附加在输入元素之前退出。所以这是设计的。

Answer 2

正如布拉德利芒特福德所说，提交元素没有设计图标（为什么这是设计，我不知道）。

将你的asp：Button改为asp：LinkButton，一切都在世界上。是的，这真的很容易。

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

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" } });
});

webform

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

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

4 个答案: