How can I use jQuery UI buttons style for my ASP.NET buttons? How can I do it in my Skin or some other way?
Add a comment
|
4 Answers
Can you not try to use the CssClass property of the button and set it the relevant Jquery CSS class for that button?
This possibly might work - you can verify what the correct Jquery classes are and update
<asp:Button ID="btnEnter" runat="server" Text="Jquery Asp Button" CssClass="ui-button ui-widget" />
Edit:
Just thought of this now, but since the Asp button results in and if you are targeting all submit buttons on a page
<input type="submit" name="btnEnter" value="Click me!" id="btnEnter">
you could use some Jquery which selects all the inputs where the type equals submit and apply the Jquery CSS classes in one swoop.
I think it will be like this (syntax not verified)
$(":submit").addClass('ui-button ui-widget');
Comments
asp.net button are different from normal button. To style it the best way is this:
<asp:button runat="server" ID="btnAspNet">Click me</asp:button>
get the correct ID from the asp.net button in jQuery
var btn = $('[id$=btnAspNet]');
add style from jQuery UI
btn.addClass('Ui class name');
Comments
Remember all asp.net buttons are rendered as submits so add the following script:
// All buttons
$(":submit").addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only');
or
// A specific button
$('#<%= button1.ClientID %>').addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only');
Comments
In JavaScript, to add button class:
<script>
$(document).on('ready', function () {
document.getElementById('<%=btnCreate.ClientID%>').className = 'btn disabled';
});
</script>
In JavaScript, to remove button class
<script>
$(document).on('ready', function () {
document.getElementById('<%=btnCreate.ClientID%>').className = '';
});
</script>
In ASP.NET CodeBehind:
<asp:Button ID="btnCreate" runat="server" Text="Create Account"
Class="btn disabled" OnClick="btnCreate_Click" />