Jak dodać ikony przycisków interfejsu jQuery UI do przycisków wejściowych?

Question

Czy można używać elementów jQuery UI Button icons z elementami <input type="submit">?

W tym przykładzie dokumentacji używane są elementy <button>, ale nie określa się wyraźnie, czy ikony działają z przyciskami wejściowymi. Chciałbym dodać ikony do elementów sterujących przycisków ASP.NET, które są renderowane jako <input type="submit">.

To co próbowałem:

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

Przycisk jest stylizowany poprawnie z wyjątkiem ikony brakującego. Czy czegoś brakuje?

Answer 1

Robisz to dobrze. Po prostu nie działa na elementach wejściowych. Pobieżne spojrzenie na kod źródłowy dla przycisku JQuery UI pokazuje, że wstawia on <span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span> do elementu pobierającego ikonę, ale nie wydaje się, aby miało to miejsce w elementach wejściowych.

Właściwie wyglądał trochę bliżej. Nie wiem, jak brakowało mi to pierwszy raz, ale źródło zawiera następujące elementy:

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

które zasadniczo mówi kod, aby wyjść przed rozpiętość jest poprzedzany/dołączany na elementach wejściowych. Jest to zgodne z projektem.

Answer 2

Jak stwierdza Bradley Mountford, elementy Submit nie są stylizowane z ikonami według projektu (dlaczego to projekt, nie mam pojęcia).

Zmień swój asp: Button na asp: LinkButton i wszystko na świecie. Tak, to naprawdę takie proste.

Answer 3

Mój problem został zastąpiony style, więc rozwiązanie to pomogło mi:

$('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

szukam tego rozwiązania, a ja znalazłem taki, który działa idealnie

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