¿Cómo agregar los íconos del botón jQuery UI para ingresar botones?

Question

¿Es posible usar jQuery UI Button icons con <input type="submit"> elementos?

El ejemplo de documentación usa elementos <button>, pero no indica explícitamente si los iconos funcionan con los botones de entrada. Me gustaría agregar iconos a los controles de botón ASP.NET que se representan como <input type="submit">.

Esto es lo que he intentado:

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

El botón se labra correctamente a excepción del icono faltante. ¿Me estoy perdiendo de algo?

Answer 1

Lo estás haciendo bien. Simplemente no parece funcionar en elementos de entrada. Una mirada superficial al código fuente del botón JQuery UI muestra que precede <span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span> al elemento que recibe el icono, pero esto no parece ocurrir en los elementos de entrada.

En realidad parecía un poco más cerca. No estoy seguro de cómo me perdí la primera vez, pero la fuente contiene lo siguiente:

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

Lo que básicamente dice que el código para salir antes de que el lapso se antepone/adjunta de elementos de entrada. Así que esto es por diseño.

Answer 2

Como afirma Bradley Mountford, los elementos de Submit no tienen un diseño de iconos por diseño (por qué ese es el diseño, no tengo ni idea).

Cambia tu asp: botón a un asp: LinkButton y todo está justo en el mundo. Sí, realmente es así de fácil.

Answer 3

Mi problema se ha sobrescrito estilos, por lo que esta solución me ayudó:

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

que estoy buscando esta solución y me encontré a mi uno que funcione perfecta

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