How to apply jquery UI buttons to asp:Button

Question

How do I apply jQueryUI styles to an asp:Button. Here is the problem: jqueryUI button requires you to have the following format <button>Test button</button>

When I try to use an asp button server control, <asp:Button />, asp:Button renders as <input type=button>Test button </input>

Update : I get the standard button styling that jquery provides. However, when I want to make a toolbar out of it, like in this example : http://jqueryui.com/demos/button/#toolbar, the standard asp:Button fails me....or maybe i am missing something. Thanks in advance,

Sashidhar Kokku

Answer 1

You can apply the jQuery UI button to a number of different HTML elements: <a>, <input type="button"> and so on.

$(function() {
    $("input[type=button]").button();
});

This will convert all <asp:Button>s on the page into jQuery UI buttons.

Answer 2

I'm pretty sure jQuery UI will work fine with button input, as well any other element.
You just need to select the desired element.

Answer 3

$(document).ready(function() {
$('#<%= Button1.UniqueID %>').click(function() {

    // do something
});

});

Answer 4

You can assign a style to the ASP.NET buttons, then use the style as a selector to selectively (pardon the pun) apply the jQuery button. For example, if you set the attribute CssClass="special" on the buttons you want to modify, then you would put the following jQuery in your page:

$(function() {
    $(".special").button();
});

Hope that helps.

Answer 5

The jQuery UI button widget is capable of transforming the following button types:

• <input type="button" />
• <input type="submit" />
• <button></button>

Since the <asp:Button> control renders the first type of HTML, you could include the following in your master page to apply the jQuery transform to all ASP.NET buttons:

$("input[type=button]").button();