<asp:Button> does not display the jQuery icons properly, one of the
workarounds to achieve this is Converting Submit types to Button types to
display jQuery button icons.
In
this approach, we will use jQuery to make the <asp:Button> behave like <button>, this is done by adding the following jQuery script to the
page.
$('input[type="submit"]').each(function()
{
$(this).hide().after('<button>').next().button
({
icons:
{
primary: 'ui-icon-plusthick'
},
label: $(this).val()
}).click(function(event)
{
event.preventDefault();
$(this).prev().click();
});
});
Here is the full example
<html xmlns="http://www.w3.org/1999/xhtml" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery
Button</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet"
/>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('input[type="submit"]').each(function()
{
$(this).hide().after('<button>').next().button
({
icons:
{
primary: 'ui-icon-plusthick'
},
label: $(this).val()
}).click(function(event)
{
event.preventDefault();
$(this).prev().click();
});
});
$('#cmdjQueryButton').button();
</script>
</head>
<body>
<form id="frmButton" runat="server">
<div>
<asp:Button
id="cmdjQueryButton"
runat="server"
Text="jQuery Button"
onclick="cmdjQueryButton_Click"
Visible="false" />
</div>
</form>
</body>
</html>
Related Post
No comments:
Post a Comment