In the post Asp.net jQuery UI Simple Button Example, we have seen oh how to create
a simple jQuery UI Button, here we shall see on how to create a decorated
jQuery UI Button with icons.
Let us first add a simple button to the
page.
<button type="button"
id="cmdLogin"
value="Login"
/>
Now we will have to convert this to a
jQuery Button, and add icons to the buttons, add the following code, to specify
the icons.
$('#cmdLogin').button(
{
label: 'Login',
icons: { primary: 'ui-icon-locked',
secondary: 'ui-icon-key' }
});
Here is the full example.
<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() {
$('#cmdLogin').button(
{
label: 'Login',
icons: { primary: 'ui-icon-locked',
secondary: 'ui-icon-key' }
});
});
</script>
</head>
<body>
<form id="frmButton" runat="server">
<div>
<button type="button" id="cmdLogin" value="Login" />
</div>
</form>
</body>
</html>
Run the application, you can see the jQuery
button with icons as follows.
Notice that we are using a <button> , if you wan to give icons to an <asp:Button> then refer the post.
Related Post
No comments:
Post a Comment