Showing posts with label jQuery UI Button Icons. Show all posts
Showing posts with label jQuery UI Button Icons. Show all posts
Monday, August 6, 2012
Monday, July 2, 2012
Asp.Net jQuery UI button change icons
In the posts jQuery UI Buttons with Icons & Asp.Net jQuery UI Buttons with Icons, we have
seen on how to display icons to buttons using jQuery, here we shall see on how
to change the icons displayed in the buttons.
The icons displayed in the
buttons are configured using the icons property in jQuery as follows.
$('#cmdLogin').button(
{
label: 'Login',
icons: { primary: 'ui-icon-locked', secondary: 'ui-icon-key' }
});
The icon specified in primary
is displayed before the text and the icon specified in secondary is displayed
after the text, in this case the icon displayed will be as follows.
Ok, what if we need to change
the icon displayed, we can do so by changing the icon name, the list of
available icons is mentioned in the jquery-ui-css file (jquery-ui-1.8.21.custom.css) Open this file, you can see a list of icons specified like
.ui-icon-***
Select the appropriate icon and change the property, we shall
change it as follows.
icons: { primary: ui-icon-gear', secondary: ' ui-icon-star}, and here’s how the button will look now.
icons: { primary: ui-icon-gear', secondary: ' ui-icon-star}, and here’s how the button will look now.
Related Post
Friday, June 29, 2012
jQuery UI Button with Icons
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
Subscribe to:
Posts (Atom)
