Showing posts with label jQuery UI Button. Show all posts
Showing posts with label jQuery UI Button. Show all posts
Monday, August 6, 2012
Monday, July 2, 2012
Asp.net jQuery UI Style Checkbox Buttonset
The jQuery UI library can be
used to apply styles to the <asp:CheckBoxList>
control, the server tag will remain as it
is, we can apply the jQuery UI decoration on top of it by adding a single line
of jQuery script, as follows.
Asp.net jQuery UI Style Radio Buttons
The jQuery UI library can be
used to apply styles to the <asp:RadioButtonList>
control, the server tag will remain as it
is, we can apply the jQuery UI decoration on top of it by adding a single line
of jQuery script, as follows.
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
ASP.NET jQueryUI Button: server side event not firing
While using a jQuery UI button inside a
Dialog, the button’s click event will not get fired, this is because while
adding the control to the Dialog it is moved out of the form hence the click
event will not get fired.
To make the click event to get fired, we have
3 options.
The first 2 options will trigger the server side event, but the values entered in the dialog controls will not be available in the server side code.
In the 3rd option, the event will get triggered and the values entered in the dialog controls will be available in the server side code.
1. Setting the UseSubmitBehavior property of
the button to false.
Refer Post: Asp.net jQuery Dialog buttons do Post back using UseSubmitBehavior
2. Adding the post back reference to the button using jQuery.
Refer Post: Asp.net jQuery Dialog buttons do Post back.
3. Appending the dialog controls back to the form using jQuery.
Refer Post: Asp.net jQuery Dialog control events not firing
Related Post
Asp.net jQuery Dialog buttons do Post back using UseSubmitBehavior
When you display a DIV tag
with Asp.Net server side controls, in a jQuery Dialog the server side events
will get disabled and the events will not get fired, this happens because the
controls are moved out of the form to display them as a Dialog box.
If you want the fire the click events of the buttons in the Dialog, we can do so by setting the usesubmitbehavior property of the button to false.
If you want the fire the click events of the buttons in the Dialog, we can do so by setting the usesubmitbehavior property of the button to false.
<asp:Button ID="cmdSave"
runat="server"
Text="Save"
usesubmitbehavior="false"
onclick="cmdSave_Click"
/>
By default this property is set to true,
hence the button will depend on the forms submit mechanism to trigger the
post-back, when the value is set to false, Asp.Net adds custom code to trigger
the buttons postback, without depending on the forms submission.
One drawback of this approach is that the
values of the controls in the div tag will not be available in the code-behind,
as we are just triggering a post-back and not actually submitting the form, if
you want the updated values of the controls to be available in the code-behind
then you have to add the elements back to the form, refer the post Asp.net jQuery Dialog control events not firing to see on
how this can be achieved.
Related Post
Asp.Net jQuery UI Button icons not displaying
The Problem
The jQuery framework, applies the icons
only to controls of type <button>, and not for types <input type=”submit”>. The Asp.Net button gets rendered to the page as type <input type=”submit”>, and not as <button> elements, hence icons are
not applied to <asp:Button>.
The Solution
There are 2 possible solutions to set icons
to an Asp.Net button
1. Using a Proxy/Hidden Asp.net button to
display jQuery button icons.
2. Converting Submit types to Button types
to display jQuery button icons.
Asp.Net jQuery UI Button with Icons
In the post jQuery UI Buttons with Icons, we have seen oh how to create
a simple jQuery UI Button with Icons, here we shall see on how to create a
jQuery UI Button with icons for an Asp.net button.
The Asp.Net button gets rendered to the
page as type <input type=”submit”>, but with this type the jQuery button
icons will not get displayed properly, the jQuery Button icon gets displayed
for <button> tags, so what’s the solution.
There are 2 possible solutions to set icons
to an Asp.Net button
1. Using a Proxy/Hidden Asp.net button to
display jQuery button icons.
2. Converting Submit types to Button types
to display jQuery button icons.
Asp.net jQuery button icons - Converting Submit types to Button types
<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
Subscribe to:
Posts (Atom)
