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

引言

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

弹出框

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

项目结构：

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

引入文件：

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>

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

方法

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

实现登录

<!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("2");
           }
           else
           {
               if (name=="wolfy"&&pwd=="wolfy")
               {
                   context.Response.Write("1");
               }
           }
       }

       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 = 80;
           int codeH = 22;
           int fontSize = 16;
           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 = { '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' };
           Random rnd = new Random();
           //生成验证码字符串 
           for (int i = 0; i < 4; 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 = 0; i < 1; 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 = 0; 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 * 18 + 2, (float)0);
           }
           //画噪点 
           for (int i = 0; i < 100; 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(0);
           context.Response.Expires = 0;
           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;
           }
       }
   }
}

弹出模式登录窗口，可移动的有遮罩效果的登录窗口。
[Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

总结

今天之所以总结弹出框插件，只是觉得弹出框，不仅仅就是个弹出框，你可以通过设置得到自己想要的结果，看到项目中用弹出框来弹出信息，看了代码，觉得完全可以做一个可拖拽，遮罩层效果的登录窗。这也就是那么一想，就写了这篇文章。使用插件谁都会，照着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

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

引言

弹出框

方法

实现登录

总结

相关推荐