樣式asp按鈕看起來像帶有Jquery-ui的Jquery按鈕

Question

我不想在我的asp：button上調用.button（），我只想盡可能從JqueryUI添加一些類。

我在想只是將類ui-button添加到asp：button

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

但這不起作用。

有任何想法嗎？

Answer 1

將CSS樣式ui-state-default ui-corner-all ui-button-text-only到您的按鈕。

Answer 2

ui-button不會給它一個按鈕外觀。 看一下ui-button包含的內容：

.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;
}

為了制作一個jQuery樣式的按鈕，您必須添加以下內容：

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

還要加載以下CSS： http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css : http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css

Answer 3

使用CssClass而不只是class

Answer 4

添加以下腳本

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

要么

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

在上面提到的Naveed帽子上可以找到所需的真實課程。

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>