JQuery Layer应用示例
2014-05-04 17:51
316 查看
文章参考自：http://sentsin.com/jquery/layer/，本文中所使用到的属性和方法具体含义及使用可通过此链接进行查看。
layer，是一个很实用的基于JQuery开发的web弹窗（层）插件。layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现各种交互。
本文中列举了几个比较常用的Layer示例，比如我们经常见到的页面弹出登陆窗口、页面中弹出广告窗口等等，页面为layerTest.html,详细代码如下：
<!doctype html>
<html>
<head>
<title>layerTest....</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="layer/layer.min.js"></script>
<style>
body{margin-top: 40px;text-align: left}
#about_hide{display:none}
.btn{
padding:3px 18px;
background-color: #32cd32
}
</style>
<script>
function advDiv(){
$.layer({
type : 2,
closeBtn : false,
shadeClose: true,
time : 2,
iframe : {
src:'http://www.baidu.com'
},
title : false,
area : ['500px','300px'],
success : function(){ //层加载成功后进行的回调
layer.shift('right-bottom',1000); //layer.shift(type , rate),layer弹出时内置动画，
//在success回调中使用,type：动画类型，rate:频率，单位：毫秒
//当前设置为：浏览器右下角弹出,速率为1000ms
},
end : function(){ //层关闭后执行的回调
layer.msg("层已关闭")
}
});
}
$(function(){
//信息窗示例
$("#infoWin").click(function(event){
event.preventDefault();
/*layer.alert(alertMsg , alertType, alertTit , alertYes),
对单按钮信息框的重新封装
alertMsg：信息内容（文本）
alertType：提示图标（整数，0-16的选择）,若不需要显示，可设置为-1
alertTit：标题（文本）, alertYes：按钮的回调函数。
*/
layer.alert('hello，welcome to layer', 9,'信息框');
});
//确认框示例
$("#confWin").click(function(event){
event.preventDefault();
/*layer.confirm(conMsg , conYes , conTit , conNo)
对询问框的重新封装，
conMsg：信息内容（文本）,conYes：按钮一回调, conTit：标题（文本）
conNo：按钮二的回调。
*/
layer.confirm('确定要删除本条记录？',function(){
//layer.msg(msgText, msgTime, parme),对无标题栏信息框层的重新封装，
// msgText：信息内容（文本），
// msgTime：自动关闭所需等待秒数（默认2秒），
// 如果parme是一个数字，则将作为msg的图标参数，
// 如果parme是一个函数，则将作为层消失后的end的回调，
// 如果parme是一个object，
// 可配置{type:图标类型,shade：false//是否遮罩，如果是，不用配置,
// rate:'top'//弹出的动画类型，具体值见layer.shift的参数说明}
layer.msg('删除成功',1,{shade:true});
},'删除数据',function(){
layer.msg('取消操作',1,{shade:false});
});
});
//提示框示例
$("#tipsWin").mouseover(function(event){
event.preventDefault();
/*layer.tips(html, follow, parme),对tips层的重新封装，
html：信息内容（文本），follow：触发事件对应的选择器，
parme是一个对象，其中包含了{time:自动关闭所需等待秒数,
maxWidth:最大宽度, guide:指引方向,
style: tips样式（参加api表格一中的style属性）,
closeBtn:关闭按钮，默认为false}等参数
*/
layer.tips('tips的样式并非是固定的，您可自定义外观。', this, {
maxWidth:185,
guide:1,
closeBtn:[0,true] //显示关闭按钮
});
});
$("#pageLayerBtn").click(function(){
$.layer({
shade : false,
type : 1,
area : ['auto','auto'],
title : false,
border :[1 , 0.3 , '#000', true],
//page : {dom : '#layer_notice'},//dom方式显示页面层
page:{html:'<div style="background-color:#90ee90;" id="layer_notice">'+//html方式
'111111111111111111111111111111<br>'+
'222222222222222222222222222222<br>'+
'333333333333333333333333333333'+
'</div>'},
close : function(index){
layer.close(index);
}
});
});
//弹出iFrame层示例
$("#login").click(function(){
$.layer({//$.layer() 核心接口，参数是一个JSON对象
type : 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层，
//3：加载层，4：tips层，调用时必须设置。
border : [1 , 1 , 'gray', true],
shade : [0.5 , '#000' , true],
title : ['<div style="text-align: center"> 登录</div >',true],
iframe : {src : 'html/login.html'},
area : ['400px' , '250px'],
offset : ['100px',''],
move : ['.xubox_title' , false]
});
});
})
</script>
</head>
<body onload="advDiv()">
<div style="text-align:left;margin-left: 80px">
<a href="" id="infoWin">单击时弹出信息窗</a><br><br>
<a href="" id="confWin">单击时弹出确认框</a><br><br>
<label id="tipsWin">鼠标移过来时,弹出提示框</label><br><br>
<input type="button" value="页面层" id="pageLayerBtn" title="页面层示例" class="btn"><br><br>
<div style="background-color:green;display: none" id="layer_notice">
111111111111111111111111111111<br>
222222222222222222222222222222<br>
3333333333333333333333333333333
</div>
<input id="login" class="btn" type="button" value="登 录" title="iFrame层示例"/>
</div>
</body>
</html>
上述示例的登录页面，为位于layerTest.html所在目录的html目录下的login.html，具体代码如下：
运行结果如下：
layer，是一个很实用的基于JQuery开发的web弹窗（层）插件。layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现各种交互。
本文中列举了几个比较常用的Layer示例，比如我们经常见到的页面弹出登陆窗口、页面中弹出广告窗口等等，页面为layerTest.html,详细代码如下：
<!doctype html>
<html>
<head>
<title>layerTest....</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="layer/layer.min.js"></script>
<style>
body{margin-top: 40px;text-align: left}
#about_hide{display:none}
.btn{
padding:3px 18px;
background-color: #32cd32
}
</style>
<script>
function advDiv(){
$.layer({
type : 2,
closeBtn : false,
shadeClose: true,
time : 2,
iframe : {
src:'http://www.baidu.com'
},
title : false,
area : ['500px','300px'],
success : function(){ //层加载成功后进行的回调
layer.shift('right-bottom',1000); //layer.shift(type , rate),layer弹出时内置动画，
//在success回调中使用,type：动画类型，rate:频率，单位：毫秒
//当前设置为：浏览器右下角弹出,速率为1000ms
},
end : function(){ //层关闭后执行的回调
layer.msg("层已关闭")
}
});
}
$(function(){
//信息窗示例
$("#infoWin").click(function(event){
event.preventDefault();
/*layer.alert(alertMsg , alertType, alertTit , alertYes),
对单按钮信息框的重新封装
alertMsg：信息内容（文本）
alertType：提示图标（整数，0-16的选择）,若不需要显示，可设置为-1
alertTit：标题（文本）, alertYes：按钮的回调函数。
*/
layer.alert('hello，welcome to layer', 9,'信息框');
});
//确认框示例
$("#confWin").click(function(event){
event.preventDefault();
/*layer.confirm(conMsg , conYes , conTit , conNo)
对询问框的重新封装，
conMsg：信息内容（文本）,conYes：按钮一回调, conTit：标题（文本）
conNo：按钮二的回调。
*/
layer.confirm('确定要删除本条记录？',function(){
//layer.msg(msgText, msgTime, parme),对无标题栏信息框层的重新封装，
// msgText：信息内容（文本），
// msgTime：自动关闭所需等待秒数（默认2秒），
// 如果parme是一个数字，则将作为msg的图标参数，
// 如果parme是一个函数，则将作为层消失后的end的回调，
// 如果parme是一个object，
// 可配置{type:图标类型,shade：false//是否遮罩，如果是，不用配置,
// rate:'top'//弹出的动画类型，具体值见layer.shift的参数说明}
layer.msg('删除成功',1,{shade:true});
},'删除数据',function(){
layer.msg('取消操作',1,{shade:false});
});
});
//提示框示例
$("#tipsWin").mouseover(function(event){
event.preventDefault();
/*layer.tips(html, follow, parme),对tips层的重新封装，
html：信息内容（文本），follow：触发事件对应的选择器，
parme是一个对象，其中包含了{time:自动关闭所需等待秒数,
maxWidth:最大宽度, guide:指引方向,
style: tips样式（参加api表格一中的style属性）,
closeBtn:关闭按钮，默认为false}等参数
*/
layer.tips('tips的样式并非是固定的，您可自定义外观。', this, {
maxWidth:185,
guide:1,
closeBtn:[0,true] //显示关闭按钮
});
});
$("#pageLayerBtn").click(function(){
$.layer({
shade : false,
type : 1,
area : ['auto','auto'],
title : false,
border :[1 , 0.3 , '#000', true],
//page : {dom : '#layer_notice'},//dom方式显示页面层
page:{html:'<div style="background-color:#90ee90;" id="layer_notice">'+//html方式
'111111111111111111111111111111<br>'+
'222222222222222222222222222222<br>'+
'333333333333333333333333333333'+
'</div>'},
close : function(index){
layer.close(index);
}
});
});
//弹出iFrame层示例
$("#login").click(function(){
$.layer({//$.layer() 核心接口，参数是一个JSON对象
type : 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层，
//3：加载层，4：tips层，调用时必须设置。
border : [1 , 1 , 'gray', true],
shade : [0.5 , '#000' , true],
title : ['<div style="text-align: center"> 登录</div >',true],
iframe : {src : 'html/login.html'},
area : ['400px' , '250px'],
offset : ['100px',''],
move : ['.xubox_title' , false]
});
});
})
</script>
</head>
<body onload="advDiv()">
<div style="text-align:left;margin-left: 80px">
<a href="" id="infoWin">单击时弹出信息窗</a><br><br>
<a href="" id="confWin">单击时弹出确认框</a><br><br>
<label id="tipsWin">鼠标移过来时,弹出提示框</label><br><br>
<input type="button" value="页面层" id="pageLayerBtn" title="页面层示例" class="btn"><br><br>
<div style="background-color:green;display: none" id="layer_notice">
111111111111111111111111111111<br>
222222222222222222222222222222<br>
3333333333333333333333333333333
</div>
<input id="login" class="btn" type="button" value="登 录" title="iFrame层示例"/>
</div>
</body>
</html>
上述示例的登录页面，为位于layerTest.html所在目录的html目录下的login.html，具体代码如下：
<!doctype html>
<html>
<head>
<title>layerTest....</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="layer/layer.min.js"></script>
<style>
body{margin-top: 40px;text-align: left}
#about_hide{display:none}
.btn{
padding:3px 18px;
background-color: #32cd32
}
</style>
<script>
function advDiv(){
$.layer({
type : 2,
closeBtn : false,
shadeClose: true,
time : 2,
iframe : {
src:'http://www.baidu.com'
},
title : false,
area : ['500px','300px'],
success : function(){ //层加载成功后进行的回调
layer.shift('right-bottom',1000); //layer.shift(type , rate),layer弹出时内置动画，
//在success回调中使用,type：动画类型，rate:频率，单位：毫秒
//当前设置为：浏览器右下角弹出,速率为1000ms
},
end : function(){ //层关闭后执行的回调
layer.msg("层已关闭")
}
});
}
$(function(){
//信息窗示例
$("#infoWin").click(function(event){
event.preventDefault();
/*layer.alert(alertMsg , alertType, alertTit , alertYes),
对单按钮信息框的重新封装
alertMsg：信息内容（文本）
alertType：提示图标（整数，0-16的选择）,若不需要显示，可设置为-1
alertTit：标题（文本）, alertYes：按钮的回调函数。
*/
layer.alert('hello，welcome to layer', 9,'信息框');
});
//确认框示例
$("#confWin").click(function(event){
event.preventDefault();
/*layer.confirm(conMsg , conYes , conTit , conNo)
对询问框的重新封装，
conMsg：信息内容（文本）,conYes：按钮一回调, conTit：标题（文本）
conNo：按钮二的回调。
*/
layer.confirm('确定要删除本条记录？',function(){
//layer.msg(msgText, msgTime, parme),对无标题栏信息框层的重新封装，
// msgText：信息内容（文本），
// msgTime：自动关闭所需等待秒数（默认2秒），
// 如果parme是一个数字，则将作为msg的图标参数，
// 如果parme是一个函数，则将作为层消失后的end的回调，
// 如果parme是一个object，
// 可配置{type:图标类型,shade：false//是否遮罩，如果是，不用配置,
// rate:'top'//弹出的动画类型，具体值见layer.shift的参数说明}
layer.msg('删除成功',1,{shade:true});
},'删除数据',function(){
layer.msg('取消操作',1,{shade:false});
});
});
//提示框示例
$("#tipsWin").mouseover(function(event){
event.preventDefault();
/*layer.tips(html, follow, parme),对tips层的重新封装，
html：信息内容（文本），follow：触发事件对应的选择器，
parme是一个对象，其中包含了{time:自动关闭所需等待秒数,
maxWidth:最大宽度, guide:指引方向,
style: tips样式（参加api表格一中的style属性）,
closeBtn:关闭按钮，默认为false}等参数
*/
layer.tips('tips的样式并非是固定的，您可自定义外观。', this, {
maxWidth:185,
guide:1,
closeBtn:[0,true] //显示关闭按钮
});
});
$("#pageLayerBtn").click(function(){
$.layer({
shade : false,
type : 1,
area : ['auto','auto'],
title : false,
border :[1 , 0.3 , '#000', true],
//page : {dom : '#layer_notice'},
page:{html:'<div style="background-color:#90ee90;" id="layer_notice">'+
'111111111111111111111111111111<br>'+
'222222222222222222222222222222<br>'+
'333333333333333333333333333333'+
'</div>'},
close : function(index){
layer.close(index);
}
});
});
//弹出页面层示例
$("#login").click(function(){
$.layer({//$.layer() 核心接口，参数是一个JSON对象
type : 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层，
//3：加载层，4：tips层，调用时必须设置。
border : [1 , 1 , 'gray', true],
shade : [0.5 , '#000' , true],
title : ['<div style="text-align: left"> 登录</div >',true],
iframe : {src : 'html/login.html'},
area : ['400px' , '250px'],
offset : ['100px',''],
move : ['.xubox_title' , false]
});
});
})
</script>
</head>
<body onload="advDiv()">
<div style="text-align:left;margin-left: 80px">
<a href="" id="infoWin">单击时弹出信息窗</a><br><br>
<a href="" id="confWin">单击时弹出确认框</a><br><br>
<label id="tipsWin">鼠标移过来时,弹出提示框</label><br><br>
<input type="button" value="页面层" id="pageLayerBtn" title="页面层示例" class="btn"><br><br>
<div style="background-color:green;display: none" id="layer_notice">
111111111111111111111111111111<br>
222222222222222222222222222222<br>
3333333333333333333333333333333
</div>
<input id="login" class="btn" type="button" value="登 录" title="iFrame层示例"/>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录</title>
<style>
body
{
font-size: 16px; vertical-align: middle;
}
.login_main_div
{
background-color: green;
clear: both;
}
.login_main_table
{
float: left; padding-left: 30px;margin-bottom: 0px;
}
#erroDiv
{
height: 15px; padding-top: 5px; padding-bottom: 5px;
}
.username,.userPwd
{
width: 220px;
}
.rememberPass_td
{
height:55px;
}
.loginBtn
{
border:medium none;
background:#3f89ec;
margin-left: 60px;
height:35px;
color:#fff;
font-size:16px;
cursor:pointer;
font-weight:bold;
width: 220px;;
}
.reg
{
font-family:Arial, Helvetica, STHeiti, "宋体"; color: #1b66c7;
font-size:12px;
text-decoration:none;
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login_main_div">
<table class="login_main_table" width="350" border="0" align="right" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div id="erroDiv">
</div>
</td>
</tr>
<tr>
<td>
用户名:
<input class="username" name="tbUserName" type="text" maxlength="25" id="tbUserName">
</td>
</tr>
<tr>
<td style="padding-top: 12px">
密 码
<input class="userPwd" name="tbPassword" type="password" maxlength="50" id="tbPassword">
</td>
</tr>
<tr>
<td class="rememberPass_td">
<input id="passCheckbox" type="checkbox" name="memberPass">
<label>
记住密码
</label>
<a target="_blank" href="" class="reg">
立即注册
</a>
</td>
</tr>
<tr >
<td >
<input id="login" value=登录 type="submit" class="loginBtn">
</td>
</tr>
</tbody></table>
</div>
</body>
</html>运行结果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery Layer应用示例
- 常见资源记录类型及应用示例
- 电力系统 接线图，配电图，地理接线图，电力系统组态与仿真，电力调度，自动控制，VC++和DELPHI以及web应用示例与源代码
- JavaScript设计模式之职责链模式应用示例
- 工作簿(Workbook)基本操作应用示例(二)
- Struts2+Spring2+Hibernate3 web应用示例(七)
- LWUIT引路蜂地图开发示例：第一个地图应用
- Java版AVG游戏开发入门示例[3]——脚本引擎的制作及应用
- 1011.在线视频―shell脚本系列讲座(一)shell脚本与应用示例
- C# Linq To DataTable应用示例
- Android之WiFi开发应用示例
- C#中的let字句应用示例
- ASP.NET AJAX应用示例
- 【TerryHe 博客园】Spring Boot 应用示例
- 中国移动应用内计费平台服务器接口示例代码之“非官方”的一些说明
- Redis 应用场景示例
- RSA算法原理及应用示例
- android应用开发揭秘第13章01示例，移动图像，opengl绘制星星问题解决！
- SQL代码应用示例
- 单例模式(SingleTon)的应用示例