[Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
引言
查看项目代码的时候，发现项目中用到JqueryUi的弹出框，可拖拽，可设置模式对话框，就想着使用它弄一个登录页面。
弹出框
在Jquery Ui官网可定制下载弹出框，下载和弹出框下载相关的js文件，css文件。
官方网站：http://jqueryui.com/
项目结构：
Login.html
引入文件：
<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" )
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 的事件处理，显示窗口的状态。
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>
Login.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;
}
}
}
}
Login.ashx
验证码一般处理程序
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
[Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面的更多相关文章
- Jquery-UI实现弹出框样式
需要引用 <link href="CSS/jquery-ui.custom.min.css" rel="stylesheet" /> <scr ...
- Bootstrap -- 插件: 提示工具、弹出框、 警告框消息
Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...
- jeecg 弹出框 点击按钮回调父页面 返回值
jeecg 弹出框 点击按钮回调父页面 返回值 <t:base type="jquery"></t:base> <t:base type=" ...
- 利用BootStrap Table插件实现自己的弹出框分页。
参考链接1: 官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/ 开始使用:http://bootstrap-table. ...
- 控制非模态弹出框(showModelessDialog)唯一且随父页面关闭
网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两种,如下: 模态:window.showModalDialog() 非模态:window.showModelessDialog() ...
- JS常用的3种弹出框
1.提示框 alert // 没有返回值 alert('你好'); 2.确认框 confirm // 返回 false/true let res = confirm('确定删除?'); if(res ...
- [js]uploadify结合jqueryUI弹出框上传，js中的冒出的bug，又被ie坑了
引言 最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...
- 第二百四十六节，Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...
- 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
随机推荐
- 提高spring boot jpa性能（译）
Spring Data JPA为Spring应用程序提供了数据访问层的实现.这是一个非常方便的组件,因为它不会重新发明每个新应用程序的数据访问方式,因此您可以花更多时间来实现业务逻辑.使用Spring ...
- Oracle Spatial操作geometry方法
Oracle Spatial中SDO_GEOMETRY类型: CREATE TYPE SDO_GEOMETRY AS OBJECT( SDO_GTYPE NUMBER,--几何类型,如点线面 SDO_ ...
- aws rds
1.还原快照,注意设置安全组的问题:不然会导致还原后连接不上:
- html禁止浏览器默认行为，让页面更像应用。
在html或body行内写入:oncontextmenu="return false" ondragstart='return false;' onselectstart=&quo ...
- SQL必知必会 -------- 通配符、计算字段、函数
1.LIKE操作符 1.1百分号(%)通配符 SELECT prod_id, prod_name FROM Products WHERE prod_name LIKE 'Fish%' 此例子使用了搜索 ...
- 湖南大学ACM程序设计新生杯大赛（同步赛）J - Piglet treasure hunt Series 2
题目描述 Once there was a pig, which was very fond of treasure hunting. One day, when it woke up, it fou ...
- React Native踩坑之启动android模拟器失败
报错 Could not install the app on the device, read the error above for details.Make sure you have an A ...
- quartz定时任务，已过期的内容自动下线
概念: Quartz是一个开源的作业调度框架,可以让计划的程序任务一个预定义的日期和时间运行.Quartz可以用来创建简单或复杂的日程安排执行几十,几百,甚至是十万的作业数. 框架架构: 简单实例: ...
- xss可用事件
onabort onafterprint onbeforeprint onbeforeunload onblur oncanplay oncanplaythrough onchange onclick ...
- zabbix安装配置(2.4.5)
这是第一次安装配置,直接遭遇配置文件不明晰的大坑,因在编译阶段未指明配置文件路径,导致zabbix_server启动时直接读取默认的 /usr/local/zabbix/etc/zabbix_serv ...