引言
查看项目代码的时候，发现项目中用到JqueryUi的弹出框，可拖拽，可设置模式对话框，就想着使用它弄一个登录页面。
弹出框
在Jquery Ui官网可定制下载弹出框，下载和弹出框下载相关的js文件，css文件。
官方网站：http://jqueryui.com/
项目结构：
Login.html
引入文件：
1 <link href="Scripts/css/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet" /> 2 <script src="Scripts/jquery-1.10.2.js"></script> 3 <script src="Scripts/js/jquery-ui-1.10.4.custom.js"></script>
弹出框初始化
1 <script type="text/javascript">
2 $(function () {
3
4 $("#dialog").dialog({
5 autoOpen: false,// 初始化之后，是否立即显示对话框，默认为 true
6 width: 400,
7 modal: true,//是否模式对话框，默认为 false
8 draggable: true,//是否允许拖动，默认为 true
9 resizable: true,//是否可以调整对话框的大小，默认为 true
10 title: "弹出框",
11 position: "",//用来设置对话框的位置，有三种设置方法 1. 一个字符串，允许的值为 'center', 'left', 'right', 'top', 'bottom'. 此属性的默认值即为 'center'，表示对话框居中。 2. 一个数组，包含两个以像素为单位的位置，例如， var dialogOpts = { position: [100, 100] }; 3. 一个字符串组成的数组，例如， ['right','top']，表示对话框将会位于窗口的右上角。var dialogOpts = { position: ["left", "bottom"] };
12 buttons: [//一个对象，属性名将会被作为按钮的提示文字，属性值为一个函数，即按钮的处理函数。
13 {
14 text: "确定",
15 click: function () {
16 $(this).dialog("close");
17 }
18 },
19 {
20 text: "取消",
21 click: function () {
22 $(this).dialog("close");
23 }
24 }
25 ]
26 });
27
28 // Link to open the dialog
29 $("#btndialog").click(function (event) {
30 $("#dialog").dialog("open");
31 event.preventDefault();
32 });
33
34 });
35 </script>
html代码：
1 <input type="button" id="btndialog" name="name" value="弹出框" /> 2 3 <!-- ui-dialog --> 4 <div id="dialog" title="弹出框" style="text-align: center;"> 5 <p> 6 马腾驾祥云，<br /> 7 航行阔海郡。<br /> 8 失于蓬莱阁，<br /> 9 踪迹无处寻。<br /> 10 </p> 11 </div>
结果
方法
dialog
该方法为弹出框的初始化方法。
open
对话框的方法需要通过调用dialog 函数，并传递字符串形式的方法来完成。例如，dialog( "open" ) 表示调用对话框的 open 方法。
打开对话框，需要注意的是，并没有 open() 方法，而是通过 dialog( "open" ) 来调用。例如， .dialog( "open" )
close
关闭对话框
$(this).dialog('close');
destroy
摧毁一个对话框，去除对话框功能，将元素还原为初始化之前的状态。
isOpen
检查对话框的状态，如果已经打开，返回 true.
moveToTop
将对话框移到对话框的顶端
option
设置或者读取对话框某个属性的值，有两种用法。
如果第二个参数为字符串，如果提供了三个参数，表示设置，如果两个参数，表示读取。 例如 .dialog( "option" , optionName , [value] )
如果第二个参数为对象，表示一次性设置多个属性。
enable
启用对话框
disable
禁用对话框
参数
以弹出框初始化中出现的参数为主，较难理解的参数，已在代码中注明。这里不再说明。
事件
在对话框使用过程中，还将触发多种事件，我们可以自定义事件处理函数进行响应。
create
open
focus
dragStart
drag
dragStop
resizeStart
resize
resizeStop
beforeClose
close
例如，下面的设置了 open，close，beforeClose 的事件处理，显示窗口的状态。
1 var dialogOpts = {
2 open: function() {
3 $("#status").find(".ui-widget-content").text("The dialog is open");
4 },
5 close: function() {
6 $("#status").find(".ui-widget-content").text("The dialog is closed");
7 },
8 beforeclose: function() {
9 if (parseInt($(".ui-dialog").css("width")) == 300 ||
10 parseInt($(".ui-dialog").css("height")) == 300) {
11 return false
12 }
13 }
14 };
15 $("#myDialog").dialog(dialogOpts);
实现登录
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>登录</title>
6 <link href="Scripts/css/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
7 <script src="Scripts/jquery-1.10.2.js"></script>
8 <script src="Scripts/js/jquery-ui-1.10.4.custom.js"></script>
9 <link href="Scripts/css/common.css" rel="stylesheet" />
10 <link href="Scripts/css/admin_login.css" rel="stylesheet" />
11 <script type="text/javascript">
12 $(function () {
13
14 $("#dialog").dialog({
15 autoOpen: false,// 初始化之后，是否立即显示对话框，默认为 true
16 width: 450,
17 modal: true,//是否模式对话框，默认为 false
18 draggable: true,//是否允许拖动，默认为 true
19 resizable: true,//是否可以调整对话框的大小，默认为 true
20 title: "用户登录",
21 position: "center",//用来设置对话框的位置，有三种设置方法 1. 一个字符串，允许的值为 'center', 'left', 'right', 'top', 'bottom'. 此属性的默认值即为 'center'，表示对话框居中。 2. 一个数组，包含两个以像素为单位的位置，例如， var dialogOpts = { position: [100, 100] }; 3. 一个字符串组成的数组，例如， ['right','top']，表示对话框将会位于窗口的右上角。var dialogOpts = { position: ["left", "bottom"] };
22 //buttons: [//一个对象，属性名将会被作为按钮的提示文字，属性值为一个函数，即按钮的处理函数。
23 // {
24 // text: "确定",
25 // click: function () {
26 // $(this).dialog("close");
27 // }
28 // },
29 // {
30 // text: "取消",
31 // click: function () {
32 // $(this).dialog("close");
33 // }
34 // }
35 //]
36 });
37
38 // 打开登录框
39 $("#dialog_link").click(function (event) {
40 $("#dialog").dialog("open");
41 event.preventDefault();
42 });
43 $("#imgCode").click(function () {
44 changeCode();
45 });
46 function changeCode() {
47 var r = Math.random();
48 $.get("CheckCode.ashx?_r=" + r, function () {
49 $("#imgCode").attr("src", "CheckCode.ashx?_r=" + r);
50 })
51 }
52 $("#btnLogin").click(function () {
53 var name = $("#user").val();
54 var pwd = $("#pwd").val();
55 var code = $("#checkcode").val();
56 $.ajax({
57 type: "POST",
58 url: "Login.ashx",
59 data: "name=" + name + "&pwd=" + pwd + "&code=" + code + "",
60 success: function (msg) {
61 if (msg == '1') {
62 window.location.href = "Login.html";
63 } else if (msg == "2") {
64 alert("验证码错误");
65 changeCode();
66 } else {
67 alert("用户名不正确");
68 changeCode();
69 }
70
71 }
72 });
73 });
74 });
75 </script>
76 </head>
77 <body>
78
79 <a href="#" id="dialog_link">登录</a>
80 <!-- ui-dialog -->
81 <div id="dialog" title="登录" >
82 <div class="adming_login_border">
83
84 <div class="admin_input">
85
86 <ul class="admin_items">
87 <li>
88 <label for="user">用户名：</label>
89 <input type="text" name="username" value="wolfy" id="user" size="40" class="admin_input_style" />
90 </li>
91 <li>
92 <label for="pwd">密码：</label>
93 <input type="password" name="pwd" value="wolfy" id="pwd" size="40" class="admin_input_style" />
94 </li>
95 <li>
96 <label for="pwd">验证码：</label>
97 <input type="text" name="checkcode" value="" id="checkcode" size="10" class="admin_input_style" />
98 <img src="CheckCode.ashx" alt="验证码" title="看不清？" class="admin_input_style" id="imgCode" style="cursor:pointer;" />
99
100 </li>
101 <li>
102 <input type="button" tabindex="3" id="btnLogin" value="登录" class="btn btn-primary" />
103 </li>
104 </ul>
105
106 </div>
107 </div>
108
109
110 </div>
111
112 </body>
113 </html>
处理登录的一般处理程序
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.SessionState;
6
7 namespace Wolfy.JqueryUILoginDemo
8 {
9 /// <summary>
10 /// Login 的摘要说明
11 /// </summary>
12 public class Login : IHttpHandler, IRequiresSessionState
13 {
14
15 public void ProcessRequest(HttpContext context)
16 {
17
18 context.Response.ContentType = "text/plain";
19 string name = context.Request.Form["name"];
20 string pwd = context.Request.Form["pwd"];
21 string code = context.Request.Form["code"].Trim().ToLower();
22 string sessionCode = Convert.ToString(context.Session["Code"]).ToLower();
23 if (code != sessionCode)
24 {
25 context.Response.Write("2");
26 }
27 else
28 {
29 if (name=="wolfy"&&pwd=="wolfy")
30 {
31 context.Response.Write("1");
32 }
33 }
34 }
35
36 public bool IsReusable
37 {
38 get
39 {
40 return false;
41 }
42 }
43 }
44 }
验证码一般处理程序
1 using System;
2 using System.Collections.Generic;
3 using System.Drawing;
4 using System.Drawing.Imaging;
5 using System.IO;
6 using System.Linq;
7 using System.Web;
8 using System.Web.SessionState;
9 namespace Wolfy.JqueryUILoginDemo
10 {
11 /// <summary>
12 /// CheckCode 的摘要说明
13 /// </summary>
14 public class CheckCode : IHttpHandler,IRequiresSessionState
15 {
16
17 public void ProcessRequest(HttpContext context)
18 {
19 int codeW = 80;
20 int codeH = 22;
21 int fontSize = 16;
22 string chkCode = string.Empty;
23 //颜色列表，用于验证码、噪线、噪点
24 Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.Brown, Color.DarkBlue };
25 //字体列表，用于验证码
26 string[] font = { "Times New Roman", "Verdana", "Arial", "Gungsuh", "Impact" };
27 //验证码的字符集，去掉了一些容易混淆的字符
28 char[] character = { '2', '3', '4', '5', '6', '8', '9', 'a', 'b', 'd', 'e', 'f', 'h', 'k', 'm', 'n', 'r', 'x', 'y', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y' };
29 Random rnd = new Random();
30 //生成验证码字符串
31 for (int i = 0; i < 4; i++)
32 {
33 chkCode += character[rnd.Next(character.Length)];
34 }
35 //写入Session
36 context.Session["Code"] = chkCode;
37 //创建画布
38 Bitmap bmp = new Bitmap(codeW, codeH);
39 Graphics g = Graphics.FromImage(bmp);
40 g.Clear(Color.White);
41 //画噪线
42 for (int i = 0; i < 1; i++)
43 {
44 int x1 = rnd.Next(codeW);
45 int y1 = rnd.Next(codeH);
46 int x2 = rnd.Next(codeW);
47 int y2 = rnd.Next(codeH);
48 Color clr = color[rnd.Next(color.Length)];
49 g.DrawLine(new Pen(clr), x1, y1, x2, y2);
50 }
51 //画验证码字符串
52 for (int i = 0; i < chkCode.Length; i++)
53 {
54 string fnt = font[rnd.Next(font.Length)];
55 Font ft = new Font(fnt, fontSize);
56 Color clr = color[rnd.Next(color.Length)];
57 g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18 + 2, (float)0);
58 }
59 //画噪点
60 for (int i = 0; i < 100; i++)
61 {
62 int x = rnd.Next(bmp.Width);
63 int y = rnd.Next(bmp.Height);
64 Color clr = color[rnd.Next(color.Length)];
65 bmp.SetPixel(x, y, clr);
66 }
67 //清除该页输出缓存，设置该页无缓存
68 context.Response.Buffer = true;
69 context.Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0);
70 context.Response.Expires = 0;
71 context.Response.CacheControl = "no-cache";
72 context.Response.AppendHeader("Pragma", "No-Cache");
73 //将验证码图片写入内存流，并将其以 "image/Png" 格式输出
74 MemoryStream ms = new MemoryStream();
75 try
76 {
77 bmp.Save(ms, ImageFormat.Png);
78 context.Response.ClearContent();
79 context.Response.ContentType = "image/Png";
80 context.Response.BinaryWrite(ms.ToArray());
81 }
82 finally
83 {
84 //显式释放资源
85 bmp.Dispose();
86 g.Dispose();
87 }
88 }
89
90 public bool IsReusable
91 {
92 get
93 {
94 return false;
95 }
96 }
97 }
98 }
弹出模式登录窗口，可移动的有遮罩效果的登录窗口。
总结
今天之所以总结弹出框插件，只是觉得弹出框，不仅仅就是个弹出框，你可以通过设置得到自己想要的结果，看到项目中用弹出框来弹出信息，看了代码，觉得完全可以做一个可拖拽，遮罩层效果的登录窗。这也就是那么一想，就写了这篇文章。使用插件谁都会，照着demo配置一下就ok了。最近折腾了不少插件，既然花费了时间去学习了，那么就总结一下吧，以备不时之需。
demo下载：链接：http://pan.baidu.com/s/1bnkYM79 密码：xlh7
| 博客地址： | http://www.cnblogs.com/wolf-sun/ |
| 博客版权： | 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。 转载：http://www.cnblogs.com/wolf-sun/p/3652797.html |
时间： 2024-10-24 19:21:49