thickbox.js插件学习
2008-12-23 13:13
381 查看
源码下载地址：http://download.csdn.net/source/902869
主页面:Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>主页</title>
<script src="../js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../js/thickbox.js" type="text/javascript"></script>
<link type="text/css" href="../css/thickbox.css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div style="margin-left:auto; margin-right:auto;width:400px;">
<a href="ajaxLogin.html?height=120&width=250&modal=false" class="thickbox" title="请登录">
我要进行JQUERY登录验证</a>
<br />
账号：admin<br/>
密码：admin<br />
</div>
</form>
</body>
</html>
弹出iframe的src页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>登录</title>
<script src="../js/login.js" type="text/javascript"></script>
<style type="text/css">
.red{
color:#ff0000;
}
</style>
</head>
<body>
<form method="post" action="login.aspx" id="login_form" name="login_form">
<div style="text-align:center ">
<table border="0" cellpadding="3" cellspacing="3" style="margin:0 auto;" >
<tr>
<td><label> Username</label>
:</td>
<td><input name="login_id" id="login_id" type="text" size="20"/></td>
</tr>
<tr>
<td><label> Password</label>
:</td>
<td><input name="login_pwd" id="login_pwd" type="password" size="20"/></td>
</tr>
<tr align="right">
<td colspan="2">
<input type="button" id="LoginBtn" value="login" /> <input type="button" id="Submit1" value="Cancel" onclick="tb_remove()"/></td>
</tr>
</table>
<div id="confirm"></div>
</div>
</form>
</body>
</html>
Ajax请求页面： login.aspx
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//执行登录验证的方法
checklogin();
}
public void checklogin()
{
//获得登录页面POST过来的参数
string username = Request.Params["id"].ToString();
string userpwd = Request.Params["pwd"].ToString();
if (username == "admin" && userpwd == "admin")
{
//如果登录成功则构造这样序列化好的JSON格式的数据
// 这里我用1来表示成功，大家可以随便用什么表示都可以
Response.Write(CreareJson("这里面可以随便写点什么", 1));
}
else
{
// 否则是这样的
Response.Write( CreareJson("这里面可以随便写点什么", 0));
}
// end方法一定要写 终止客户端的执行
Response.End();
}
/// <summary>
/// 定义一个方法用来输出标准的JSON格式数据
/// </summary>
/// <param name="info">用来描述一般字符串</param>
/// <param name="sta">这个用来表示和ajax传输过来数据比较的一个key和value，不一定非用这个表示</param>
/// <returns>返回标准JSON格式字符串</returns>
private string CreareJson(string info,int sta)
{
return "{/"info/":/"" + info + "/",/"sta/":" + sta + "}";
}
}
请求成功后页面：loginOK.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
Jquery登录成功！
</body>
</html>
需要修改的js文件：
// JScript 文件
$(document).ready(function(){
//获取登录按的事件并激活click事件
$('#LoginBtn').click(function(){
chacklogin();
});
});
function chacklogin()
{
var login_id=$('#login_id').val();
var login_pwd=$('#login_pwd').val();
if (login_id=='')
{
$('#confirm').html('请输入登录ID');
$('#login_id').focus();
return false;
}
if(login_pwd =='')
{
$('#confirm').html('请输入登录密码');
$('#login_pwd').focus();
return false;
}
$.ajax({
type: 'POST',//URL方式为POST
url: 'login.aspx',//这里是指向登录验证的页面
data:'id='+login_id+'&pwd='+login_pwd,//把要验证的参数传过去
dataType:'json',//数据类型为JSON格式的验证
//在发送数据之前要运行的函数
beforeSend:function(){
$('#confirm').html('登录中.........');
},
success:function(data)
{
//这是个重点，根据验证页面（login.aspx）输出的JSON格式数据判断是否登录成功
//这里我用1表示的
//sta就是那个输出到客户端的标示
if(data.sta==1)
{
$('#confirm').html('登录成功！');location.href='loginOK.htm';
}
else
{
$('#confirm').html('密码都没输入正确还想进,哼！').addClass('red');
}
}
});
}
end
主页面:Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>主页</title>
<script src="../js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../js/thickbox.js" type="text/javascript"></script>
<link type="text/css" href="../css/thickbox.css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div style="margin-left:auto; margin-right:auto;width:400px;">
<a href="ajaxLogin.html?height=120&width=250&modal=false" class="thickbox" title="请登录">
我要进行JQUERY登录验证</a>
<br />
账号：admin<br/>
密码：admin<br />
</div>
</form>
</body>
</html>
弹出iframe的src页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>登录</title>
<script src="../js/login.js" type="text/javascript"></script>
<style type="text/css">
.red{
color:#ff0000;
}
</style>
</head>
<body>
<form method="post" action="login.aspx" id="login_form" name="login_form">
<div style="text-align:center ">
<table border="0" cellpadding="3" cellspacing="3" style="margin:0 auto;" >
<tr>
<td><label> Username</label>
:</td>
<td><input name="login_id" id="login_id" type="text" size="20"/></td>
</tr>
<tr>
<td><label> Password</label>
:</td>
<td><input name="login_pwd" id="login_pwd" type="password" size="20"/></td>
</tr>
<tr align="right">
<td colspan="2">
<input type="button" id="LoginBtn" value="login" /> <input type="button" id="Submit1" value="Cancel" onclick="tb_remove()"/></td>
</tr>
</table>
<div id="confirm"></div>
</div>
</form>
</body>
</html>
Ajax请求页面： login.aspx
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//执行登录验证的方法
checklogin();
}
public void checklogin()
{
//获得登录页面POST过来的参数
string username = Request.Params["id"].ToString();
string userpwd = Request.Params["pwd"].ToString();
if (username == "admin" && userpwd == "admin")
{
//如果登录成功则构造这样序列化好的JSON格式的数据
// 这里我用1来表示成功，大家可以随便用什么表示都可以
Response.Write(CreareJson("这里面可以随便写点什么", 1));
}
else
{
// 否则是这样的
Response.Write( CreareJson("这里面可以随便写点什么", 0));
}
// end方法一定要写 终止客户端的执行
Response.End();
}
/// <summary>
/// 定义一个方法用来输出标准的JSON格式数据
/// </summary>
/// <param name="info">用来描述一般字符串</param>
/// <param name="sta">这个用来表示和ajax传输过来数据比较的一个key和value，不一定非用这个表示</param>
/// <returns>返回标准JSON格式字符串</returns>
private string CreareJson(string info,int sta)
{
return "{/"info/":/"" + info + "/",/"sta/":" + sta + "}";
}
}
请求成功后页面：loginOK.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
Jquery登录成功！
</body>
</html>
需要修改的js文件：
// JScript 文件
$(document).ready(function(){
//获取登录按的事件并激活click事件
$('#LoginBtn').click(function(){
chacklogin();
});
});
function chacklogin()
{
var login_id=$('#login_id').val();
var login_pwd=$('#login_pwd').val();
if (login_id=='')
{
$('#confirm').html('请输入登录ID');
$('#login_id').focus();
return false;
}
if(login_pwd =='')
{
$('#confirm').html('请输入登录密码');
$('#login_pwd').focus();
return false;
}
$.ajax({
type: 'POST',//URL方式为POST
url: 'login.aspx',//这里是指向登录验证的页面
data:'id='+login_id+'&pwd='+login_pwd,//把要验证的参数传过去
dataType:'json',//数据类型为JSON格式的验证
//在发送数据之前要运行的函数
beforeSend:function(){
$('#confirm').html('登录中.........');
},
success:function(data)
{
//这是个重点，根据验证页面（login.aspx）输出的JSON格式数据判断是否登录成功
//这里我用1表示的
//sta就是那个输出到客户端的标示
if(data.sta==1)
{
$('#confirm').html('登录成功！');location.href='loginOK.htm';
}
else
{
$('#confirm').html('密码都没输入正确还想进,哼！').addClass('red');
}
}
});
}
end
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js 插件学习demo
- bootstrap插件学习-bootstrap.collapse.js
- 常用的前端工具，js插件，前端书籍，学习网址收集
- Bootstrap3.0学习教程之JS折叠插件
- bootstrap插件学习-bootstrap.modal.js
- 遮罩输入插件jquery.maskedinput.js学习
- Bootstrap 学习之js插件（模态框（Modal）插件）
- Bootstrap教程JS插件滚动监听学习笔记分享
- cesiumjs学习笔记之三——cesium-navigation插件
- bootstrap插件学习-bootstrap.carousel.js
- bootstrap插件学习-bootstrap.carousel.js
- bootstrap插件学习-bootstrap.scrollspy.js
- 继续为大家分享一下自己的js小插件，方便大家学习交流
- 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
- jquery动画切换引擎插件 Velocity.js 学习01
- 学习FullPage.js全屏滚动插件
- bootstrap插件学习-bootstrap.tab.js(读码)
- jQuery 版本viewer.js插件的结构分析与学习
- bootstrap插件学习-bootstrap.alert.js
- bootstrap插件学习-bootstrap.tooltip.js