How to apply jquery UI buttons to asp:Button

How do I apply jQueryUI styles to an asp:But开发者_运维问答ton. 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

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.

This is how you do it: Add the following to your initialize function:

$(function () {
        //Converting asp buttons to html buttons
        $('input:submit, input:reset').each(function () {
            $(this).replaceWith('<button type="submit" name="' + $(this).attr('name') + '" class="' + $(this).attr('class') + '" id="' + $(this).attr('id') + '" >' + $(this).val() + '</button>');
        });

  //Adding button icons .....
  $(".createbutton").button({
     icons: { primary: "ui-icon-circle-plus" } 
   });

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();

You should also $("input[type=submit]").button(); to handle submit buttons.

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.

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

    // do something
});

});

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.