[Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

引言

查看项目代码的时候，发现项目中用到JqueryUi的弹出框，可拖拽，可设置模式对话框，就想着使用它弄一个登录页面。

弹出框

在Jquery Ui官网可定制下载弹出框，下载和弹出框下载相关的js文件，css文件。

项目结构：

引入文件：

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                  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" )

关闭对话框

$(this).dialog('close');

destroy

摧毁一个对话框，去除对话框功能，将元素还原为初始化之前的状态。

isOpen

检查对话框的状态，如果已经打开，返回 true.

moveToTop

将对话框移到对话框的顶端

option

设置或者读取对话框某个属性的值，有两种用法。

如果第二个参数为字符串，如果提供了三个参数，表示设置，如果两个参数，表示读取。例如 .dialog( "option" , optionName , [value] )

如果第二个参数为对象，表示一次性设置多个属性。

enable

启用对话框

disable

禁用对话框

参数

以弹出框初始化中出现的参数为主，较难理解的参数，已在代码中注明。这里不再说明。

事件

在对话框使用过程中，还将触发多种事件，我们可以自定义事件处理函数进行响应。

create

open

focus

dragStart

drag

dragStop

resizeStart

resize

resizeStop

beforeClose

例如，下面的设置了 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                  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 }

CheckCode.ashx

弹出模式登录窗口，可移动的有遮罩效果的登录窗口。

总结

今天之所以总结弹出框插件，只是觉得弹出框，不仅仅就是个弹出框，你可以通过设置得到自己想要的结果，看到项目中用弹出框来弹出信息，看了代码，觉得完全可以做一个可拖拽，遮罩层效果的登录窗。这也就是那么一想，就写了这篇文章。使用插件谁都会，照着demo配置一下就ok了。最近折腾了不少插件，既然花费了时间去学习了，那么就总结一下吧，以备不时之需。

demo下载：链接：http://pan.baidu.com/s/1bnkYM79 密码：xlh7

相关阅读:
点燃圣火！ Ember.js 的初学者指南
 加班10天的过程
 创建SVN仓库的步骤
 OpenTSDB/HBase的调优过程整理
 HBase数据压缩算法编码探索
 解决修改css或js文件后，浏览器缓存未更新问题
 Debian 9 Stretch国内常用镜像源
 ELK填坑总结和优化过程
 elk中es集群web管理工具cerebro
Kafka集群管理工具kafka-manager的安装使用
原文地址：https://www.cnblogs.com/wolf-sun/p/3652797.html