style asp button to look like Jquery button with Jquery-ui

Question

I don't want to call .button() on my asp:button, I just want to add some classes from the JqueryUI if possible.

I was thinking just adding the class ui-button to the asp:button

<asp:button class="ui-button" runat="server" id="TrackRequestSearch" Text="Search" 
        onclick="TrackRequestSearch_Click"></asp:button>

but this does not work.

Any ideas?

Answer 1

将CSS样式ui-state-default ui-corner-all ui-button-text-only到您的按钮。

Answer 2

ui-button won't give it a button look exactly. Take a look at what ui-button contains:

.ui-button {
display: inline-block;
position: relative;
padding: 0;
margin-right: .1em;
text-decoration: none !important;
cursor: pointer;
text-align: center;
zoom: 1;
overflow: visible;
}

In order to make a jQuery styled button you must add the following to it:

ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only

Also load the following CSS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css

Answer 3

使用CssClass而不只是class

Answer 4

Add the following script(s)

$(":submit").addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only'); // All buttons 

or

$('#<%= button1.ClientID %>').addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only'); // My specific button

Tip of the hat to Naveed above for the true classes needed.

Answer 5

    <asp:button class="ui-button-text-icon ui-button ui-widget 
    ui-state-default ui-corner-all ui-button-text-only" 
    runat="server" id="TrackRequestSearch" Text="Search" 
onclick="TrackRequestSearch_Click"></asp:button>