jquery layer插件弹出弹层 结构紧凑,功能强大
/*
去官方网站下载最新的js http://sentsin.com/jquery/layer/
①引用jquery
②引用layer.min.js
*/ 事件触发炸弹层可以自由绑定,例如:
$('#id').on('click', function(){
layer.msg('test');
});
以下主要贴出上述样例的调用代码:
【信息框】:
layer.alert('白菜级别前端攻城师贤心', 8); //风格一
layer.msg('前端攻城师贤心'); //风格二
//当然,远远不止这两种风格。 【询问框】:
$.layer({
shade: [0],
area: ['auto','auto'],
dialog: {
msg: '您是怎样看待前端开发?',
btns: 2,
type: 4,
btn: ['重要','奇葩'],
yes: function(){
layer.msg('重要', 1, 1);
}, no: function(){
layer.msg('奇葩', 1, 13);
}
}
});
//还可用layer.confirm()快捷调用 【页面层一】
$.layer({
type: 1,
shade: [0],
area: ['auto', 'auto'],
title: false,
border: [0],
page: {dom : '.layer_notice'}
}); 【页面层二】
var pageii = $.layer({
type: 1,
title: false,
area: ['auto', 'auto'],
border: [0], //去掉默认边框
shade: [0], //去掉遮罩
closeBtn: [0, false], //去掉默认关闭按钮
shift: 'left', //从左动画弹出
page: {
html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background-color:#eee;"><p>我从左边来。我自定了风格。</p><button id="pagebtn" class="btns" onclick="">关闭</button></div>'
}
});
//自设关闭
$('#pagebtn').on('click', function(){
layer.close(pageii);
}); 【iframe层一】
$.layer({
type: 2,
shadeClose: true,
title: false,
closeBtn: [0, false],
shade: [0.8, '#000'],
border: [0],
offset: ['20px',''],
area: ['1000px', ($(window).height() - 50) +'px'],
iframe: {src: 'http://f2e.sentsin.com/chat'}
}); 【iframe层二】
layer.tips('5秒后右下角窗体自己主动关闭,并生成一个新的iframe', this, {
time: 5,
maxWidth: 260
});
$.layer({
type: 2,
closeBtn: false,
shadeClose: true,
shade: [0.1, '#fff'],
border: [0],
time: 5,
iframe: {
src: 'test/guodu.html'
},
title: false,
area: ['300px','250px'],
shift: 'right-bottom',
end: function(){
$.layer({
type : 2,
title: '贤心博客 - sentsin.com',
shadeClose: true,
maxmin: true,
fix : false,
area: ['1024px', 500],
iframe: {
src : 'http://sentsin.com/'
}
});
}
}); 【载入层一】
layer.load(3); 【载入层二】
layer.load('载入带文字', 3); 【tips层一】
layer.tips('tips的样式并不是是固定的,您可自己定义外观。', this, {
style: ['background-color:#78BA32; color:#fff', '#78BA32'],
maxWidth:185,
time: 3,
closeBtn:[0, true]
}); 【tips层二】
layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2}); 【输入/文件层】
//普通文本
layer.prompt({title: '您的名字?'}, function(name){
alert(name);
});
//password文本
layer.prompt({title: '输入不论什么口令,并确认',type: 1}, function(pass){
alert(pass);
});
//文件上传
layer.prompt({title: '随便上传个东东。并确认',type: 2}, function(file){
alert(file);
});
//多行文本
layer.prompt({title: '随便写点啥。并确认',type: 3}, function(val){
alert(val);
}); 【tab层】
layer.tab({
area: ['1000px', '500px'],
data: [
{title: 'Say', content:'Hi,Main'},
{title: '无题', content:'支持html传入'}
]
}); 【相冊层】
//此处为异步请求模式,详细的json格式。请等待文档更新。 或者你直接通过请求看photos.json
var conf = {};
$.getJSON('ajax地址', {}, function(json){
conf.photoJSON = json; //保存json,以便下次直接读取内存数据
layer.photos({
html: '这里传入自己定义的html,也能够不用传入(这意味着不会输出右側区域)。相冊支持左右方向键、Esc关闭',
json: json
});
});
版权声明:本文博客原创文章。博客,未经同意,不得转载。
jquery layer插件弹出弹层 结构紧凑,功能强大的更多相关文章
- layer弹出相册层
如果想要制作一个简单的相册,可以采用这个插件的方法.如果你的图片是从后台传过来的json格式里,可以通过ajax加载让图片显示在页面上,然后在使用layer插件,做出点击以后就可以查看大图的效果. 一 ...
- JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...
- jquery特效(7)—弹出遮罩层且内容居中
上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...
- JS 点击按钮后弹出遮罩层,有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- 【C#】分享一个弹出容器层,像右键菜单那样召即来挥则去
适用于:.net2.0+ Winform项目 ------------------201508261813更新(源码有更新.Demo未更新)------------------ 重新绘制调整大小手柄( ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- js 弹出 隐藏层和cookie
<script type="text/javascript"> function checkCookie(show_div, bg_div) { var smtstk ...
- [转]【C#】分享一个弹出浮动层,像右键菜单那样召即来挥则去
适用于:.net2.0+ Winform项目 背景: 有时候我们需要开一个简单的窗口来做一些事,例如输入一些东西.点选一个item之类的,可能像这样: 完了返回原窗体并获取刚刚的输入,这样做并没有什么 ...
随机推荐
- 【Bash百宝箱】Linux shell学习
shell特点-- Linux有多种shell能够使用,默认的为bash,bash有以下几个主要特点. 1.命令记忆能力 在命令行中按上下键能够找到一个前/后输入的命令.这些命令记录在-/.bash_ ...
- Android 调整透明度的图片查看器
本文以实例讲解了基于Android的可以调整透明度的图片查看器实现方法,具体如下: main.xml部分代码如下: <?xml version="1.0" encoding ...
- CSDN站点CODE配置记录
为了出门写代码方便.决定还是开个项目.因此才有了这次经历. 原来有在windows下用过git,只是使用方法跟svn一样.尽管曾经也在souceforge或者git上看一些代码,可是对操作一直没有了解 ...
- NOIP模拟 Ball - log积化和
题目描述 Alice 与 Bob 在玩游戏.他们一共玩了 t 轮游戏.游戏中,他们分别获得了 n 个和 m 个小球.每个球上有一个分数.每个人的得分都为他所获得所有小球分数的乘积,分数小者获胜.问每轮 ...
- 【record】10.17..10.23
.
- quartz结合多线程处理后台业务
最近项目中有播放视频的需求,技术选型采用UMS播放器,免费版只能播放FLV格式的视频文件,因此需要对用户上传的视频进行格式转换,转换工具为FormatFactory,功能还是比较强大的.但是面临的一个 ...
- vuex与vue-router学习方案
1.vuex,官方vuex2.0的文档写得太简略了,先1.0的文档,研究1.0分支的counter例子.1.0文档只需看核心概念和API参考文档.2.0的用法先不管,需要的时候再说,先把1.0高熟练. ...
- 把搜狗输入法词库导入Google拼音输入法
为PC端Google拼音输入法增加词库 为什么折腾词库 都在说百度.讯飞等输入法上传用户词库,为了安全建议大家使用google输入法之类,话说回来,要想使用智能联想功能是不是就得把你输入习惯放在他的里 ...
- ashx 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理。
1.点击查看ashx在浏览器中显示的信息 2.自定义协议头 这样问题就搞定了.当然只是我遇到的一种.
- Unable to find a single main class from the following candidates
关于start-class,spring boot官方手册是这么说明的: The plugin rewrites your manifest, and in particular it manages ...