首页 > 程序开发 > web前端 > JavaScript >

div弹出层的ajax登录(Jquery版)

2011-10-05

今天别人都在休息,还要上班,自我安慰一下,他人笑我没长假,我笑他人没事干!本人不善于jquery,也不善于div+css的排版,今天把vs2008打了个补丁,然后摸索了2个多小时做完这个例子和博客,手都敲软了,在这里和...

今天别人都在休息,还要上班,自我安慰一下,他人笑我没长假,我笑他人没事干!

本人不善于jquery,也不善于div+css的排版,今天把vs2008打了个补丁,然后摸索了2个多小时做完这个例子和博客,手都敲软了,在这里和大家分享学习下!

div弹出层,我没有点击事件,是页面一加载就弹出来,你也可以改成$("#id").click(function(){});放这里面就可以点击某个id事件来弹出层了,上预览图:

页面加载完成时:

\

当验证码得到焦点时:

\

实现这个ajax为了节约时间,用户名/密码/验证码我都没判断是否为空,我也没用数据库,登录用户名和密码都是admin

登录成功时:

\

这里说明一下,由于时间有限,你可以把这个登录成功或者登录失败,效果做一下,直接在登录窗口上放一个<div id="message"><div>然后设置其样式,把提示内容追加上去,根据自己个人需求来,下面贴我的全部代码:

静态页面login.html代码如下图所示

login.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2 <html xmlns="http://www.w3.org/1999/xhtml">

3 <head>

4 <title>mydream_后台登录</title>

5 <link href="css/login.css" rel="stylesheet" type="text/css" />

6 <script src="../js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

7 <script src="js/login.js" type="text/javascript"></script>

8 </head>

9 <body>

10 <div id="login" class="login">

11 <div class="title"><b>管理员登录</b></div>

12 <div class="pad">

13 <div><p class="selectinput loginpsw"><label>用户名:</label><input type="text" tabindex="1" class="txt" size="36" name="username" id="txtName" /></p></div>

14 <div><p class="selectinput loginpsw"><label>密&nbsp;&nbsp;&nbsp;码:</label><input type="password" tabindex="1" class="txt" size="36" name="password" id="txtPassword" /></p></div>

15 <div><div><p class="selectinput loginpsw"><label>验证码:</label><input type="text" tabindex="1" class="txt" size="36" name="code" id="txtCode"/></p></div></div>

16 <div><input id="btnLogin" type="button" value="登 录" /></div>

17 </div>

18 <div class="divCode"><img alt="验证码" title="点击刷新验证码" src="../ashx/verifyCode.ashx" /></div>

19 </div>

20 </body>

21 </html>

login.html层叠样式表login.css代码如下所示:

login.css

1 .selectinput{margin-bottom:10px;width:224px;height:20px;background-color:#FFF;border:1px solid;border-color:#999 #CCC #CCC #999;}

2 .selectinput .txt{float:left;width:165px;border:none;}

3 .loginpsw label{float:left;display:inline;margin:0 0 0 4px;width:50px;height:auto;line-height:150%; color:#339900}

4 body,td,input,textarea,select,button{color:#666;font:12px/1.6em Verdana,Helvetica,Arial,sans-serif;}

5 input,select,button{vertical-align:middle;}

6 .txt,.txtarea{padding:2px;*padding:0 2px;height:16px;*height:20px;border:1px solid;border-color:#999 #CCC #CCC #999;background:#FFF;}

7 body{ margin:0 auto;}

8 .login{border:solid 3px #339900; width:360px; height:223px;display:none; z-index:101;position:absolute; background-color:#FFFFFF;}

9 .login .title{width:100%;height:30px;line-height:30px; border-bottom:solid 1px #339900;}

10 .login .title b{ padding-left:5px; color:#000000;}

11 .login .pad{padding-left:35px;}

12 .login .divCode{width:80px; height:30px;position:relative;top: -32px;left:170px; display:none;}

13 .login #btnLogin{width:55px; height:28px;}

14 #greybackground{background:#000000;width:100%; display:block; z-index:100; top:0px; left:0px; position:absolute;}

login.html页面所需js文件login.js代码如下所示:

login.js

1 /// <reference path="http://www.cnblogs.com/js/jquery-1.4.1-vsdoc.js" />

2 $(document).ready(function() {

3 var screenwidth, screenheight, mytop, getPosLeft, getPosTop

4 screenwidth = $(window).width();

5 screenheight = $(window).height();

6 //获取滚动条距顶部的偏移

7 mytop = $(document).scrollTop();

8 //计算弹出层的left

9 getPosLeft = screenwidth / 2 - 200;

10 //计算弹出层的top

11 getPosTop = screenheight / 2 - 150;

12 //css定位弹出层

13 $("#login").css({ "left": getPosLeft, "top": getPosTop });

14 //当浏览器窗口大小改变时

15 $(window).resize(function() {

16 screenwidth = $(window).width();

17 screenheight = $(window).height();

18 mytop = $(document).scrollTop();

19 getPosLeft = screenwidth / 2 - 200;

20 getPosTop = screenheight / 2 - 150;

21 $("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });

22 });

23 //当拉动滚动条时,弹出层跟着移动

24 $(window).scroll(function() {

25 screenwidth = $(window).width();

26 screenheight = $(window).height();

27 mytop = $(document).scrollTop();

28 getPosLeft = screenwidth / 2 - 200;

29 getPosTop = screenheight / 2 - 150;

30 $("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });

31 });

32 //失去焦点与得到焦点

33 $("#txtCode").focus(function() {

34 $(".divCode").fadeIn(1200);

35 });

36 $("#txtCode").blur(function() {

37 $(".divCode").fadeOut();

38 });

39 $("#login").fadeIn("slow"); //toggle("slow");

40 //获取页面文档的高度

41 var docheight = $(document).height();

42 //追加一个层,使背景变灰

43 $("body").append("<div id=&#39;greybackground&#39;></div>");

44 $("#greybackground").css({ "opacity": "0.1", "height": docheight });

45 //登录

46 $("#btnLogin").click(function() {

47 $.get("../ashx/login.ashx",

48 { name: $("#txtName").val(),

49 pwd: encodeURIComponent($("#txtPassword").val()),

50 code: $("#txtCode").val()

51 },

52 function(data) {

53 switch (data) {

54 case "code error":

55 alert("验证码错误!");

56 break;

57 case "success":

58 alert("登录成功!");

59 break;

60 case "false":

61 alert("登录失败!");

62 break;

63 default:

64 alert("数据加载失败,请稍后再试!");

65 break;

66 }

67 });

68 });

69 });

login.html交互的后台cs文件login.ashx代码如下所示:

login.ashx

1 <%@ WebHandler Language="C#" Class="login" %>

2

3 using System;

4 using System.Web;

5 using System.Web.SessionState;

6

7 public class login : IHttpHandler, IRequiresSessionState

8 {

9 public void ProcessRequest(HttpContext context)

10 {

11 string code = context.Request.QueryString["code"];

12 context.Response.ContentType = "text/plain";

13 if (code.ToLower() != context.Session["checkCode"].ToString())

14 {

15 context.Response.Write("code error");

16 }

17 else

18 {

19 string name = context.Request.QueryString["name"];

20 string pwd = HttpUtility.UrlDecode(context.Request.QueryString["pwd"]);

21 if (name == "admin" && pwd == "admin")

22 {

23 context.Response.Write("success");

24 }

25 else

26 {

27 context.Response.Write("false");

28 }

29 }

30 }

31

32 public bool IsReusable

33 {

34 get

35 {

36 return false;

37 }

38 }

39

40 }

login.html页面验证码文件verifyCode.ashx代码如下所示:

verifyCode

1 <%@ WebHandler Language="C#" Class="verifyCode" %>

2

3 using System;

4 using System.Web;

5 using System.Web.SessionState;//第一步导入命名空间

6 using System.Drawing;

7

8 public class VerifyCode : IHttpHandler, IRequiresSessionState

9 {//第二步实现接口 就和平常一样可以使用session

10

11 public void ProcessRequest(HttpContext context)

12 {

13 string checkCode = this.CreateRandomCode(4).ToLower();

14 context.Session["checkCode"] = checkCode;

15 this.CreateImage(context, checkCode);

16 }

17

18 public bool IsReusable

19 {

20 get

21 {

22 return false;

23 }

24 }

25

26 /// <summary>

27 /// 按位生成随机

28 /// </summary>

29 /// <param name="codeCount"></param>

30 /// <returns></returns>

31 private string CreateRandomCode(int codeCount)

32 {

33 int number;

34 string checkCode = String.Empty;

35 Random random = new Random();

36 for (int i = 0; i < codeCount; i++)

37 {

38 number = random.Next(100);

39 switch (number % 3)

40 {

41 case 0:

42 checkCode += ((char)(&#39;0&#39; + (char)(number % 10))).ToString();

43 break;

44 case 1:

45 checkCode += ((char)(&#39;a&#39; + (char)(number % 26))).ToString();

46 break;

47 case 2:

48 checkCode += ((char)(&#39;A&#39; + (char)(number % 26))).ToString();

49 break;

50 default:

51 break;

52 }

53 }

54 return checkCode;

55 }

56

57 /// <summary>

58 /// 根据字符生成图片

59 /// </summary>

60 /// <param name="context"></param>

61 /// <param name="checkCode"></param>

62 private void CreateImage(HttpContext context,string checkCode)

63 {

64 int randAngle = 45;//随机转动角度

65 int iwidth = (int)(checkCode.Length * 23);

66 //封装GDI+ 位图,此位图由图形图像及其属性的像素数据组成,指定的宽度和高度。以像素为单位

67 System.Drawing.Bitmap image = new System.Drawing.Bitmap(iwidth, 28);

68

69 //封装一个 GDI+绘图图面。无法继承此类。从指定的Image创建新的Graphics

70 Graphics g = Graphics.FromImage(image);

71

72 //清除整个绘图面并以指定背景填充

73 g.Clear(Color.AliceBlue);

74

75 //画一个边框

76 g.DrawRectangle(new Pen(Color.Black, 0), 0, 0, image.Width - 1, image.Height - 1);

77

78 //定义绘制直线和曲线的对象。(只是Pen的颜色,指示此Pen的宽度的值)

79 Pen blackPen = new Pen(Color.LightGray, 0);

80

81 Random rand = new Random();

82

83 //划横线的条数 可以根据自己的要求

84

85 for (int i = 0; i < 50; i++)

86 {

87 //随机高度

88 //int y = rand.Next(image.Height);

89 /*绘制一条连线由坐标对指定的两个点的线条

90 线条颜色、宽度和样式,第一个点的x坐标和y坐标,第二个点的x坐标和y坐标*/

91 //g.DrawLine(blackPen, 0, y, image.Width, y);

92 int x = rand.Next(0, image.Width);

93 int y = rand.Next(0, image.Height);

94 //画矩形,坐标(x,y)宽高(1,1)

95 g.DrawRectangle(blackPen, x, y, 1, 1);

96 }

97

98 //拆散字符串成单个字符数组

99 char[] chars = checkCode.ToCharArray();

100

101 //文字居中

102 StringFormat format = new StringFormat(StringFormatFlags.NoClip);

103 format.Alignment = StringAlignment.Center;

104 format.LineAlignment = StringAlignment.Center;

105

106 //定义颜色

107 Color[] c = { Color.Black, Color.DarkGray, Color.DarkOrange, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };

108 //定义字体

109 string[] font = { "Verdana", "Microsoft Sans Serif", "Comic Sans MS", "Arial", "宋体", "Arial Baltic" };

110

111 for (int i = 0; i < chars.Length; i++)

112 {

113 int cindex = rand.Next(c.Length);

114 int findex = rand.Next(font.Length);

115

116 //font 封装在特定设备上呈现特定字体所需的纹理和资源(字体,大小,字体样式)

117 Font f = new System.Drawing.Font(font[findex], 16, System.Drawing.FontStyle.Bold);

118

119 /*Brush定义用于填充图形图像(如矩形、椭圆、圆形、多边形和封闭路径)的内部对象

120 SolidBrush(Color.White)初始化指定的颜色 指定画笔颜色为白色*/

121 Brush b = new System.Drawing.SolidBrush(c[cindex]);

122

123 Point dot = new Point(16, 16);

124

125 //转动的度数

126 float angle = rand.Next(-randAngle, randAngle);

127

128 //移动光标到指定位置

129 g.TranslateTransform(dot.X, dot.Y);

130 g.RotateTransform(angle);

131 /*在指定的位置并且用指定的Brush和Font对象绘制指定的文本字符串

132 (指定的字符串,字符串的文本格式,绘制文本颜色和纹理,所绘制文本的左上角的x坐标,坐标)*/

133 g.DrawString(chars[i].ToString(), f, b, 1, 1, format);

134 //转回去

135 g.RotateTransform(-angle);

136 //移动光标指定位置

137 g.TranslateTransform(2, -dot.Y);

138 }

139 //创建存储区为内存流

140 System.IO.MemoryStream ms = new System.IO.MemoryStream();

141

142 //将此图像以指定的格式保存到指定的流中(将其保存在内存流中,图像的格式)

143 image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);

144

145 //清除缓冲区将流中的内容输出

146 context.Response.ClearContent();

147

148 //获取输出流的类型

149 context.Response.ContentType = "image/Jpeg";

150

151 //将二进制字符串写入HTTP输出流

152 context.Response.BinaryWrite(ms.ToArray());

153

154 g.Dispose();

155

156 image.Dispose();

157 }

158 }有了以上文件,就可以做你想要的谈出div层效果了,我js不是很擅长,有好的意见欢迎拍砖,不要喷,谢谢!

下载地址,点击这里

版权所有,转载请注明出处!http://www.cnblogs.com/cmsdn/archive/2011/10/03/2198598.html

一切伟大的行动和思想,都有一个微不足道的开始。微不足道的我,正在吸取知识的土壤,希望能取得成功!不嫌弃我微不足道的,愿交天下好友!

相关文章
最新文章
热点推荐