This article will show you how you can create login forms
which open on button click with shake effect and free moving animation using jQuery in asp.net.
Some of my previous articles are as follows: Slider
Colorpicker Horizontal Direction Using jQuery in Asp.Net, jQuery
Datepicker With Date Reset Button For Current Date In Asp.Net, Get
All Checked Checkbox Value Using jQuery in Asp.Net CheckBoxList, jQuery
Tabs Collapse Control Using jQuery In Asp.Net MVC, MVC2, MVC3, MVC4 and MVC5,
Move
ListBox Item From one ListBox To another ListBox Using jQuery In Asp.Net.
So for this article first we will create a new asp.net application and add the below jQuyery library reference in the header of the page.
So for this article first we will create a new asp.net application and add the below jQuyery library reference in the header of the page.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
Now we will create login form.
<table width="100%">
<tr>
<td align="right">User Id :</td>
<td align="left">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </td>
</tr>
<tr>
<td align="right">Password :</td>
<td align="left">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="Button2" runat="server" Text="Login" />
<asp:Button ID="Button3" runat="server" Text="Close" />
</td>
</tr>
</table>
|
Now I we will add the below code for shaking effect.
<script type="text/javascript">
$(function
() {
$("#divdialog").dialog({
autoOpen: false,
show: {
effect: "shake",
duration: 1000
}
});
});
function
ShowMessage() {
$("#divdialog").dialog("open");
return
false;
}
</script>
|
Now we will combine all the code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx.cs" Inherits="WebApplication2.WebForm12"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Shaking
Login Box Open Button Click Using jQuery In Asp.Net</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function
() {
$("#divdialog").dialog({
autoOpen: false,
show: {
effect: "shake",
duration: 1000
}
});
});
function
ShowMessage() {
$("#divdialog").dialog("open");
return
false;
}
</script>
<style type="text/css">
.MessageStyle
{
font-size:
12px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Login" OnClientClick="javascript:return ShowMessage();"/>
<div id="divdialog" title="Login" class="MessageStyle">
<table width="100%">
<tr>
<td align="right">User Id :</td>
<td align="left">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </td>
</tr>
<tr>
<td align="right">Password :</td>
<td align="left">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="Button2" runat="server" Text="Login" />
<asp:Button ID="Button3" runat="server" Text="Close" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
Now we have done. Run the application to check the output.
About the Author
0 comments:
Please let me know your view