如何將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按鈕圖標添加到輸入按鈕？

回答

相關問題