[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分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
随机推荐
- angular项目中使用angular-material2
Step 1: Install Angular Material and Angular CDK npm install --save @angular/material @angular/cdk n ...
- Hadoop（一）：概述
一.Hadoop是什么? Hadoop是一个由Apache基金会所开发的分布式系统基础架构.Hadoop框架最核心的设计包含两个方面,一是分布式文件系统(Hadoop Distributed File ...
- jfinal文件上传
jfianl获取表单数据,需要先getFile()获取文件,再使用getPara() public class ImageUploadController extends Controller{ pu ...
- web项目更改文件后缀，隐藏编程语言
从Java EE5.0开始,<servlet-mapping>标签就可以配置多个<url-pattern>.例如可以同时将urlServlet配置一下多个映射方式: <s ...
- Linux Supervisor的安装与使用入门---SuSE
Linux Supervisor的安装与使用入门 在linux或者unix操作系统中,守护进程(Daemon)是一种运行在后台的特殊进程,它独立于控制终端并且周期性的执行某种任务或等待处理某些发生的事 ...
- 网络管理 SNMP基础知识
SNMP Agent快速开发 网友:SmileWolf 发布于: 2007.08.02 16:06 (共有条评论) 查看评论 | 我要评论 摘自 http:/ ...
- Floyd_Warshall(任意两点之间的最短路)
/* O(V^3) 案例: 1 2 2 1 3 5 2 3 1 */ #include <cstdio>#include <iostream>using namespace s ...
- Python+Selenium 自动化实现实例-模块化调用
public 目录存一些公共模块,供用例调用.login.py 内容如下: # coding=utf-8 import time # login def login(driver): driver.f ...
- ISSCC 2017论文导读 Session 14 Deep Learning Processors，DNPU: An 8.1TOPS/W Reconfigurable CNN-RNN
转载请注明,本文出自Bin的专栏http://blog.csdn.net/xbinworld,谢谢! DNPU: An 8.1TOPS/W Reconfigurable CNN-RNN Process ...
- MVC – 9.mvc整体请求流程
1.请求管道 2~5微软自己的验证,我们一般不用. 在全局配置文件中-已经配置一个路由过滤器-为第7个事件注册了路由方法 1.在application_start中向静态路由表注册了路由数据,在管道第 ...