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

是否可以使用jQuery UI Button icons和<input type="submit">元素？如何将jQuery UI按钮图标添加到输入按钮？

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

这是我已经试过：

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

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

来源

2010-05-12 jrummell

Yo你也可以使用CSS ... – 2010-05-12 21:51:48

你是对的。它似乎不适用于输入元素。粗略看一下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; 
}

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

来源

2010-05-12 23:00:30

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

将您的asp：Button更改为asp：LinkButton并且全世界都是正确的。是的，这真的很简单。

来源

2011-05-11 21:01:34 Cane

我的问题被覆盖的风格，所以这个解决方案在帮助我：

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

来源

2012-08-29 13:53:39

我要找的这个解决方案，我发现我的一个完美的作品

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

来源

2013-05-19 16:24:59

你可以添加一个解释这是干什么的？ – FDinoff 2013-05-19 16:42:18

js是使用自定义jquery ui主题，并且在asp.net按钮中有一个图标btnLogin – 2013-05-31 01:08:07

+1这对我非常有帮助。以前的答案没有按照预期工作。不知道他们为什么没有工作，但这是一个。 – akousmata 2014-08-19 18:02:10

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

回答

相关问题