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

2023-03-15 15:06:26

引言

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

弹出框

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

项目结构：

引入文件：

  <link href="Scripts/css/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet" />

  <script src="Scripts/jquery-1.10.2.js"></script>

 <script src="Scripts/js/jquery-ui-1.10.4.custom.js"></script>

弹出框初始化

  <script type="text/javascript">

         $(function () {

             $("#dialog").dialog({

                 autoOpen: false,// 初始化之后，是否立即显示对话框，默认为 true

                 width: 400,

                 modal: true,//是否模式对话框，默认为 false

                 draggable: true,//是否允许拖动，默认为 true

                 resizable: true,//是否可以调整对话框的大小，默认为 true

                 title: "弹出框",

                 position: "",//用来设置对话框的位置，有三种设置方法 1.  一个字符串，允许的值为  'center', 'left', 'right', 'top', 'bottom'.  此属性的默认值即为 'center'，表示对话框居中。 2.  一个数组，包含两个以像素为单位的位置，例如， var dialogOpts = { position: [100, 100] }; 3. 一个字符串组成的数组，例如， ['right','top']，表示对话框将会位于窗口的右上角。var dialogOpts = {  position: ["left", "bottom"]    };

                 buttons: [//一个对象，属性名将会被作为按钮的提示文字，属性值为一个函数，即按钮的处理函数。

                     {

                         text: "确定",

                         click: function () {

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

                         }

                     },

                     {

                         text: "取消",

                         click: function () {

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

                         }

                     }

                 ]

             });

             // Link to open the dialog

             $("#btndialog").click(function (event) {

                 $("#dialog").dialog("open");

                 event.preventDefault();

             });

         });

     </script>

html代码：

  <input type="button" id="btndialog" name="name" value="弹出框" />

     <!-- ui-dialog -->

     <div id="dialog" title="弹出框" style="text-align: center;">

         <p>

             马腾驾祥云，<br />

             航行阔海郡。<br />

             失于蓬莱阁，<br />

             踪迹无处寻。<br />

         </p>

     </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 的事件处理，显示窗口的状态。

 var dialogOpts = {

      open: function() {

              $("#status").find(".ui-widget-content").text("The dialog is open");

          },

      close: function() {

              $("#status").find(".ui-widget-content").text("The dialog is closed");

          },

      beforeclose: function() {

              if (parseInt($(".ui-dialog").css("width")) == 300 ||

                  parseInt($(".ui-dialog").css("height")) == 300) {

                return false

              }

          }

 };

 $("#myDialog").dialog(dialogOpts);

实现登录

 <!DOCTYPE html>

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

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>登录</title>

     <link href="Scripts/css/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet" />

     <script src="Scripts/jquery-1.10.2.js"></script>

     <script src="Scripts/js/jquery-ui-1.10.4.custom.js"></script>

     <link href="Scripts/css/common.css" rel="stylesheet" />

     <link href="Scripts/css/admin_login.css" rel="stylesheet" />

     <script type="text/javascript">

         $(function () {

             $("#dialog").dialog({

                 autoOpen: false,// 初始化之后，是否立即显示对话框，默认为 true

                 width: 450,

                 modal: true,//是否模式对话框，默认为 false

                 draggable: true,//是否允许拖动，默认为 true

                 resizable: true,//是否可以调整对话框的大小，默认为 true

                 title: "用户登录",

                 position: "center",//用来设置对话框的位置，有三种设置方法 1.  一个字符串，允许的值为  'center', 'left', 'right', 'top', 'bottom'.  此属性的默认值即为 'center'，表示对话框居中。 2.  一个数组，包含两个以像素为单位的位置，例如， var dialogOpts = { position: [100, 100] }; 3. 一个字符串组成的数组，例如， ['right','top']，表示对话框将会位于窗口的右上角。var dialogOpts = {  position: ["left", "bottom"]    };

                 //buttons: [//一个对象，属性名将会被作为按钮的提示文字，属性值为一个函数，即按钮的处理函数。

                 //    {

                 //        text: "确定",

                 //        click: function () {

                 //            $(this).dialog("close");

                 //        }

                 //    },

                 //    {

                 //        text: "取消",

                 //        click: function () {

                 //            $(this).dialog("close");

                 //        }

                 //    }

                 //]

             });

             // 打开登录框

             $("#dialog_link").click(function (event) {

                 $("#dialog").dialog("open");

                 event.preventDefault();

             });

             $("#imgCode").click(function () {

                 changeCode();

             });

             function changeCode() {

                 var r = Math.random();

                 $.get("CheckCode.ashx?_r=" + r, function () {

                     $("#imgCode").attr("src", "CheckCode.ashx?_r=" + r);

                 })

             }

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

                 var name = $("#user").val();

                 var pwd = $("#pwd").val();

                 var code = $("#checkcode").val();

                 $.ajax({

                     type: "POST",

                     url: "Login.ashx",

                     data: "name=" + name + "&pwd=" + pwd + "&code=" + code + "",

                     success: function (msg) {

                         if (msg == '1') {

                             window.location.href = "Login.html";

                         } else if (msg == "2") {

                             alert("验证码错误");

                             changeCode();

                         } else {

                             alert("用户名不正确");

                             changeCode();

                         }

                     }

                 });

             });

         });

     </script>

 </head>

 <body>

     <a href="#" id="dialog_link">登录</a>

     <!-- ui-dialog -->

     <div id="dialog" title="登录" >

         <div class="adming_login_border">

             <div class="admin_input">

                 <ul class="admin_items">

                     <li>

                         <label for="user">用户名：</label>

                         <input type="text" name="username" value="wolfy" id="user" size="40" class="admin_input_style" />

                     </li>

                     <li>

                         <label for="pwd">密码：</label>

                         <input type="password" name="pwd" value="wolfy" id="pwd" size="40" class="admin_input_style" />

                     </li>

                     <li>

                         <label for="pwd">验证码：</label>

                         <input type="text" name="checkcode" value="" id="checkcode" size="10" class="admin_input_style" />

                         <img src="CheckCode.ashx" alt="验证码" title="看不清？" class="admin_input_style" id="imgCode" style="cursor:pointer;" />

                     </li>

                     <li>

                         <input type="button" tabindex="3" id="btnLogin" value="登录" class="btn btn-primary" />

                     </li>

                 </ul>

             </div>

         </div>

     </div>

 </body>

 </html>

处理登录的一般处理程序

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 using System.Web.SessionState;

 namespace Wolfy.JqueryUILoginDemo

 {

     /// <summary>

     /// Login 的摘要说明

     /// </summary>

     public class Login : IHttpHandler, IRequiresSessionState

     {

         public void ProcessRequest(HttpContext context)

         {

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

             string name = context.Request.Form["name"];

             string pwd = context.Request.Form["pwd"];

             string code = context.Request.Form["code"].Trim().ToLower();

             string sessionCode = Convert.ToString(context.Session["Code"]).ToLower();

             if (code != sessionCode)

             {

                 context.Response.Write("");

             }

             else

             {

                 if (name=="wolfy"&&pwd=="wolfy")

                 {

                     context.Response.Write("");

                 }

             }

         }

         public bool IsReusable

         {

             get

             {

                 return false;

             }

         }

     }

 }

验证码一般处理程序

 using System;

 using System.Collections.Generic;

 using System.Drawing;

 using System.Drawing.Imaging;

 using System.IO;

 using System.Linq;

 using System.Web;

 using System.Web.SessionState;

 namespace Wolfy.JqueryUILoginDemo

 {

     /// <summary>

     /// CheckCode 的摘要说明

     /// </summary>

     public class CheckCode : IHttpHandler,IRequiresSessionState

     {

         public void ProcessRequest(HttpContext context)

         {

             int codeW = ;

             int codeH = ;

             int fontSize = ;

             string chkCode = string.Empty;

             //颜色列表，用于验证码、噪线、噪点

             Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.Brown, Color.DarkBlue };

             //字体列表，用于验证码

             string[] font = { "Times New Roman", "Verdana", "Arial", "Gungsuh", "Impact" };

             //验证码的字符集，去掉了一些容易混淆的字符

             char[] character = { '', '', '', '', '', '', '', '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' };

             Random rnd = new Random();

             //生成验证码字符串

             for (int i = ; i < ; i++)

             {

                 chkCode += character[rnd.Next(character.Length)];

             }

             //写入Session

             context.Session["Code"] = chkCode;

             //创建画布

             Bitmap bmp = new Bitmap(codeW, codeH);

             Graphics g = Graphics.FromImage(bmp);

             g.Clear(Color.White);

             //画噪线

             for (int i = ; i < ; i++)

             {

                 int x1 = rnd.Next(codeW);

                 int y1 = rnd.Next(codeH);

                 int x2 = rnd.Next(codeW);

                 int y2 = rnd.Next(codeH);

                 Color clr = color[rnd.Next(color.Length)];

                 g.DrawLine(new Pen(clr), x1, y1, x2, y2);

             }

             //画验证码字符串

             for (int i = ; i < chkCode.Length; i++)

             {

                 string fnt = font[rnd.Next(font.Length)];

                 Font ft = new Font(fnt, fontSize);

                 Color clr = color[rnd.Next(color.Length)];

                 g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i *  + , (float));

             }

             //画噪点

             for (int i = ; i < ; i++)

             {

                 int x = rnd.Next(bmp.Width);

                 int y = rnd.Next(bmp.Height);

                 Color clr = color[rnd.Next(color.Length)];

                 bmp.SetPixel(x, y, clr);

             }

             //清除该页输出缓存，设置该页无缓存

             context.Response.Buffer = true;

             context.Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds();

             context.Response.Expires = ;

             context.Response.CacheControl = "no-cache";

             context.Response.AppendHeader("Pragma", "No-Cache");

             //将验证码图片写入内存流，并将其以 "image/Png" 格式输出

             MemoryStream ms = new MemoryStream();

             try

             {

                 bmp.Save(ms, ImageFormat.Png);

                 context.Response.ClearContent();

                 context.Response.ContentType = "image/Png";

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

             }

             finally

             {

                 //显式释放资源

                 bmp.Dispose();

                 g.Dispose();

             }

         }

         public bool IsReusable

         {

             get

             {

                 return false;

             }

         }

     }

 }

CheckCode.ashx

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

总结

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

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

码农公寓

引言

弹出框

方法

实现登录

总结

相关文章