样式asp按钮看起来像Jquery按钮与Jquery-ui

时间:2011-04-20 11:26:41

标签: jquery asp.net html jquery-ui

我不想在我的asp:按钮上调用.button(),我只想在可能的情况下从JqueryUI中添加一些类。

我在考虑将类ui-button添加到a​​sp:button

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

但这不起作用。

有什么想法吗?

5 个答案:

答案 0 :(得分:1)

将CSS样式ui-state-default ui-corner-all ui-button-text-only添加到按钮中。

答案 1 :(得分:1)

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

答案 2 :(得分:1)

使用CssClass代替class

答案 3 :(得分:0)

    <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>

答案 4 :(得分:0)

添加以下脚本

$(":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

对于所需的真正课程,请注意上面提到的帽子。