Is it possible to use jQuery UI Button icons with <input type="submit"> elements?
The documentation example uses <button> elements, but it does not explicitly say whether or not icons work with input buttons. I'd like to add icons to ASP.NET Button controls which render as <input type="submit">.
This is what I've tried:
$("input.add").button({ icons: { primary: "ui-icon-circle-plus" } });
The button is styled correctly except for the missing icon. Am I missing something?
You are doing it right. It just does not seem to work on input elements. A cursory look at the source code for JQuery UI Button shows that it prepends <span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span> to the element getting the icon but this does not seem to happen on input elements.
Actually looked a bit closer. Not sure how I missed this the first time but the source contains the following:
if ( this.type === "input" ) {
if ( this.options.label ) {
this.element.val( this.options.label );
}
return;
}
Which basically tells the code to exit before the span is prepended/appended on input elements. So this is by design.
As Bradley Mountford states, Submit elements are not styled with icons by design (why that's the design, I have no idea).
Change your asp:Button to a asp:LinkButton and all is right in the world. Yep, it really is that easy.
My problem was overwritten styles, so this solution helped me:
$('input.add').each(function(){
$(this).replaceWith('<button class="add" type="' + $(this).attr('type') + '">' + $(this).val() + '</button>');
});
$('.add').button({ icons: { primary: 'ui-icon-circle-plus' } });
i'm looking for this solution and i found my one that works perfect
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" />
