[Js插件]使用JqueryUI的彈出框作一個「炫」的登陸頁面

時間 2019-11-13

標籤插件使用 jqueryui 彈出一個登陸頁面欄目 JavaScript 简体版

原文原文鏈接

引言

查看項目代碼的時候，發現項目中用到JqueryUi的彈出框，可拖拽，可設置模式對話框，就想着使用它弄一個登陸頁面。javascript

彈出框

在Jquery Ui官網可定製下載彈出框，下載和彈出框下載相關的js文件，css文件。css

官方網站：http://jqueryui.com/html

項目結構：java

引入文件：ajax

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>

結果
session

方法

dialogdom

該方法爲彈出框的初始化方法。

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                 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 }

CheckCode.ashx

彈出模式登陸窗口，可移動的有遮罩效果的登陸窗口。

總結

今天之因此總結彈出框插件，只是以爲彈出框，不單單就是個彈出框，你能夠經過設置獲得本身想要的結果，看到項目中用彈出框來彈出信息，看了代碼，以爲徹底能夠作一個可拖拽，遮罩層效果的登陸窗。這也就是那麼一想，就寫了這篇文章。使用插件誰都會，照着demo配置一下就ok了。最近折騰了很多插件，既然花費了時間去學習了，那麼就總結一下吧，以備不時之需。

demo下載：連接：http://pan.baidu.com/s/1bnkYM79 密碼：xlh7