layer php弹出层,layer官方演示与讲解(jQuery弹出层插件)
特别说明:事件需自己绑定,以下只展现调用代码。
//初体验 layer.alert(‘内容‘)
//第三方扩展皮肤 layer.alert(‘内容‘, { icon: 1, skin: ‘layer-ext-moon‘ //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅 })
//询问框 layer.confirm(‘您是如何看待前端开发?‘, { btn: [‘重要‘,‘奇葩‘] //按钮 }, function(){ layer.msg(‘的确很重要‘, {icon: 1}); }, function(){ layer.msg(‘奇葩么么哒‘, {shift: 6}); });
//提示层 layer.msg(‘玩命提示中‘);
//墨绿深蓝风 layer.alert(‘墨绿风格,点击确认看深蓝‘, { skin: ‘layui-layer-molv‘ //样式类名 ,closeBtn: 0 }, function(){ layer.alert(‘偶吧深蓝style‘, { skin: ‘layui-layer-lan‘ ,closeBtn: 0 ,shift: 4 //动画类型 }); });
//捕获页 layer.open({ type: 1, shade: false, title: false, //不显示标题 content: $(‘.layer_notice‘), //捕获的元素 cancel: function(index){ layer.close(index); this.content.show(); layer.msg(‘捕获就是从页面已经存在的元素上,包裹layer的结构‘,{time: 5000}); } });
//页面层 layer.open({ type: 1, skin: ‘layui-layer-rim‘, //加上边框 area: [‘420px‘, ‘240px‘], //宽高 content: ‘html内容‘ });
//自定页 layer.open({ type: 1, skin: ‘layui-layer-demo‘, //样式类名 closeBtn: false, //不显示关闭按钮 shift: 2, shadeClose: true, //开启遮罩关闭 content: ‘内容‘ });
//tips层 layer.tips(‘Hi,我是tips‘, ‘吸附元素选择器,如#id‘);
//iframe层 layer.open({ type: 2, title: ‘layer mobile页‘, shadeClose: true, shade: 0.8, area: [‘380px‘, ‘90%‘], content: ‘http://layer.layui.com/mobile/‘ //iframe的url });
//iframe窗 layer.open({ type: 2, title: false, closeBtn: false, shade: [0], area: [‘340px‘, ‘215px‘], offset: ‘rb‘, //右下角弹出 time: 2000, //2秒后自动关闭 shift: 2, content: [‘test/guodu.html‘, ‘no‘], //iframe的url,no代表不显示滚动条 end: function(){ //此处用于演示 layer.open({ type: 2, title: ‘很多时候,我们想最大化看,比如像这个页面。‘, shadeClose: true, shade: false, maxmin: true, //开启最大化最小化按钮 area: [‘1150px‘, ‘650px‘], content: ‘http://fly.layui.com/‘ }); } });
//加载层 var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
//loading层 var index = layer.load(1, { shade: [0.1,‘#fff‘] //0.1透明度的白色背景 });
//小tips layer.tips(‘我是另外一个tips,只不过我长得跟之前那位稍有些不一样。‘, ‘吸附元素选择器‘, { tips: [1, ‘#3595CC‘], time: 4000 });
//prompt层 layer.prompt({ title: ‘输入任何口令,并确认‘, formType: 1 //prompt风格,支持0-2 }, function(pass){ layer.prompt({title: ‘随便写点啥,并确认‘, formType: 2}, function(text){ layer.msg(‘演示完毕!您的口令:‘+ pass +‘ 您最后写下了:‘+ text); }); });
//tab层 layer.tab({ area: [‘600px‘, ‘300px‘], tab: [{ title: ‘TAB1‘, content: ‘内容1‘ }, { title: ‘TAB2‘, content: ‘内容2‘ }, { title: ‘TAB3‘, content: ‘内容3‘ }] });
//相册层 $.getJSON(‘test/photos.json?v=‘+new Date, function(json){ layer.photos({ photos: json //格式见API文档手册页 }); });
layer php弹出层,layer官方演示与讲解(jQuery弹出层插件)相关推荐
- php layui弹出修改功能,非常好用的弹出层 layer,常用功能demo,快速上手!
功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用. 老文档地址:http://layer.layui.com/api.html 已经停止维护 常用功能代码de ...
- 关闭当前layer弹出层,点按钮再弹出一个layer弹出层
关闭当前layer弹出层,点按钮再弹出一个layer弹出层 yes - 确定按钮回调方法 类型:Function,默认:null 该回调携带两个参数,分别为当前层索引.当前层DOM对象.如: laye ...
- layer系列之弹层layer.prompt
layer官网:https://www.layui.com/doc/modules/layer.html layer在线调试:http://layer.layui.com/ 如何使用layer.pro ...
- Layui--弹出层layer
开发测试时的layui版本为2.5.5 模块加载名称:layer <!DOCTYPE html> <html xmlns:th="http://www.w3.org/199 ...
- jQuery弹出深色系层菜单
低调奢华jQuery弹出层菜单,使用新版的jQuery库,兼容多种浏览器.Demo展示: http://hovertree.com/texiao/layer/3/ 本特效可以作为网站的引导页,使用jQ ...
- [置顶] 推荐一款好用的jquery弹出层插件——wbox
在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点和新版本增加的功能 wBox特点 背景透明度可以根据实际情况进行调节 可以根据需要添加wBox标 ...
- jQuery弹出层登录和全屏注册表单
jQuery弹出层登录和全屏注册表单,这是一款很漂亮的jQuery登录和注册表单,点击登录时弹出一个登录窗口并伴随动画效果,注册页面则是全屏显示,非常时尚的jQuery表单. 代码: <!DOC ...
- 推荐一款好用的jquery弹出层插件——wbox
阅读原文:http://www.xuejiehome.com/blread-1621.html 在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点 ...
- Jquery弹出层插件,非常好用绚丽Lee dialog 1.0
标题 弹出层的html如下: <div id="floatBoxBg"></div> <div id="floatBox" cla ...
最新文章
- 请正确使用return
- 找工作刷题--------Java相关
- Minimize the Permutation CodeForces - 1256(贪心)
- 前端学习(1985)vue之电商管理系统电商系统之本地分支放到git上面保存
- joomla第一单元第四节K2类别设置和第五节项目视图选项
- [导入]8.3赛车频道活动
- DataGrid分页(1)
- 网络中各层协议(7层)
- js点击页面其他地方如何隐藏div元素菜单
- 在 keil MDK_V5中加入arm7,arm9等一些芯片型号
- 派生类构造的时候一定要调用_分手的时候,一定要好好说再见
- opendrive简介
- ubuntu处理openproj不能使用问题
- 4am永远 鼠标按键设置_罗技G502 LIGHTSPEED无线游戏鼠标评测 性能超乎想象
- 大数据Hadoop快速入门教程
- Densepose安装教程--依据Github官方教程成功安装
- java POI创建Excel示例(xslx和xsl区别 )
- R语言非线性拟合之多项式回归
- 软件工程Alpha冲刺day7
- 零基础移动端APP设计与开发教程
热门文章
- 20万DBA都在关注的12个问题
- 频发:记ADG备库日志应用延迟的一次故障处理-云和恩墨技术通讯精选
- Volcano:在离线作业混部管理平台,实现智能资源管理和作业调度
- 一文解析Apache Avro数据
- 鸿蒙轻内核M核源码分析:中断Hwi
- 野生前端的数据结构基础练习(2)——队列
- Zabbix的应用(6)----常见错误
- Kotlin学习笔记29(完结篇) Flow part2 Flow的Buffer 中间操作符zip 打平 异常处理 Flow的完成 onCompletion的优势 onCompletion陷阱
- 基于Matlab的跨孔层析成像的最短路径法弯曲射线追踪(一)
- pycharm新项目加载库的方法