ATTRACTIVE LOGIN PAGE WITH JQUERY
THE
DESIGN PAGE:
1. JqueryLoginPage
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="JqueryLoginPage.aspx.cs"
Inherits="JqueryLoginPage"
%>
<!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>
<title>THE LOGIN PAGE</title>
<link rel="stylesheet" href="style/style.css" />
<link rel="stylesheet" href="jquery/jquery-ui.css" />
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="jquery/jquery-ui.js" type="text/javascript"></script>
<script src="myscript/login.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="loginContainer">
<a href="#" id="loginButton"><span>Login</span><em></em></a>
<div id="loginBox">
<form id="loginForm" action="WelcomePage.aspx" method="post">
<fieldset id="body">
<fieldset>
<label for="email">Email
Address</label>
<input type="text" name="email"
id="email"
/>
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password"
name="password"
id="password"
/>
</fieldset>
<input type="submit"
id="login"
value="Sign in
here" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember
me</label>
</fieldset>
<span><a href="#">Forgot
your password?</a></span>
</form>
</div>
</div>
</div>
</body>
</html>
You
need to download the jquery required .......OR ELSE MAIL ME AT
Piyushrana1991@gmail.com and ask for loginbyjquery
all related stuff.
The
myscript/login .js used is described as:
$(function() {
var button
= $('#loginButton');
var box =
$('#loginBox');
var form =
$('#loginForm');
button.removeAttr('href');
button.mouseenter(function(login)
{
box.toggle();
button.toggleClass('active');
});
button.mouseleave(function(login) {
box.toggle();
button.toggleClass('active');
});
box.mouseenter(function()
{
box.toggle();
button.toggleClass('active');
});
box.mouseleave(function()
{
box.toggle();
button.toggleClass('active');
});
form.mouseup(function()
{
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
ON
clicking the submit button the page is being redirected to the welcomePage
where you can authenticate the user as per your style/method.
WelcomePage:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="WelcomePage.aspx.cs"
Inherits="WelcomePage"
%>
<!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>Untitled
Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
THE
CODE BEHIND: Just for example....
public partial
class WelcomePage
: System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
string
emailid = Request.Form["email"];
string
pass = Request.Form["password"];
if
(emailid == "piyushrana1991@gmail.com"
&& pass == "password")
{
Label1.Text = "WELCOME " + emailid + "<br/>" + "YOU
HAVE SUCCESSFULLY LOGGED IN!!!";
}
else {
Label1.Text = "WRONG EMAIL-ID/PAsSWORD...TRY AGAIN!!!!!";
}
}
}
........................................................................
No comments :
Post a Comment