layer,备受青睐的web弹层组件
- //http://layer.layui.com/
- 特别说明:事件需自己绑定,以下只展现调用代码。
- //初体验
- layer.alert('内容')
- //第三方扩展皮肤
- layer.alert('内容', {
- icon: 1,
- skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅
- })
- //询问框
- layer.confirm('您是如何看待前端开发?', {
- btn: ['重要','奇葩'] //按钮
- }, function(){
- layer.msg('的确很重要', {icon: 1});
- }, function(){
- layer.msg('也可以这样', {
- time: 20000, //20s后自动关闭
- btn: ['明白了', '知道了']
- });
- });
- //提示层
- 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, icon:6});
- }
- });
- //页面层
- layer.open({
- type: 1,
- skin: 'layui-layer-rim', //加上边框
- area: ['420px', '240px'], //宽高
- content: 'html内容'
- });
- //自定页
- layer.open({
- type: 1,
- skin: 'layui-layer-demo', //样式类名
- closeBtn: 0, //不显示关闭按钮
- 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: 0, //不显示关闭按钮
- 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: ['893px', '600px'],
- 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文档手册页
- ,shift: 5 //0-6的选择,指定弹出图片动画类型,默认随机
- });
- });
//询问框
layer.confirm('确认删除此条订单信息吗?', {
btn: ['确认','取消'] //按钮
}, function(){
layer.msg('删除成功', {icon: 1});
layer.msg('删除失败', {icon: 2});
setTimeout("window.location.reload()",1000);
}, function(){
});
layer,备受青睐的web弹层组件的更多相关文章
- layer是一款近年来备受青睐的web弹层组件
layer.closeAll(); //疯狂模式,关闭所有层 layer.closeAll('dialog'); //关闭信息框 layer.closeAll('page'); //关闭所有页面层 l ...
- layer 一款口碑极佳的web弹层组件,弹框专用
研究学习网址: http://layer.layui.com/
- jQuery Layer 弹层组件
layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...
- layer 1.9.2 发布,国产 Web 弹层不懈的前行者
快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...
- 弹层组件-layer
layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...
- 学习layer弹层组件移动版
layer弹层组件官网 常用参数: shadeClose:默认true,是否点击遮罩时关闭层
- layerweb弹层组件(SSH框架下)
action类 这里主要看业务方法中表单路径中的(isClose = "1";return resUri;) public class MaterialsAction extend ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- React15.6.0实现Modal弹层组件
代码地址如下:http://www.demodashi.com/demo/12315.html 注:本文Demo环境使用的是我平时开发用的配置:这里是地址. 本文适合对象 了解React. 使用过we ...
随机推荐
- impdp导入报错ORA-39070:无法打开日志文件
>impdp test/123456@orcl directory=expnc_dir dumpfile=TEST.DMP full=y ORA-39002:操作无效 ORA39070:无法打开 ...
- HearthBuddy Ai调试实战1-->出牌的时候,少召唤了图腾就结束回合
期望通过ai的调试,来搞明白出牌的逻辑. 55是投火无面者63是恐狼前锋34是风怒36是自动漩涡打击装置13是空灵召唤者, "LocStringZhCn": "<b ...
- sysbench 压测
IP架构 sysbench部署服务器:172.17.100.107 压测服务器:172.17.100.100 MySQL部署目录:/usr/local/mysql 前置工作 1.完成MySQL的安装( ...
- java -- SSM配置完成后,能访问jsp文件不能访问html文件,报错解析
SSM配置完成后,能访问jsp文件不能访问html文件,报错解析 在确保路径没有任何问题的,情况下,相同的页面,jsp能够正常访问,html却不能正常访问(404). 解决方法: 在web.xml中添 ...
- centos安装软件
rpm指令, 该指令安装文件后缀.rpm的可执行程序 yum指令 安装软件源代码,后缀为 .tar.gz(用gzip压缩过的tar包) rpm rpm软件包格式为 (一)查询系统装已经安装的软件信息 ...
- MongoTemplate 使用 _id 查询
MongoTemplate mt; DBObject lisi = new BasicDBObject(); lisi.put("_id", new BasicDBObject(& ...
- 【VS开发】内存映射文件进程间共享内存
内存映射文件进程间共享内存 内存映射文件的另一个功能是在进程间共享数据,它提供了不同进程共享内存的一个有效且简单的方法.后面的许多例子都要用到共享内存.共享内存主要是通过映射机制实现的.Windows ...
- 最新 三七互娱java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.三七互娱等10家互联网公司的校招Offer,因为某些自身原因最终选择了三七互娱.6.7月主要是做系统复习.项目复盘.Leet ...
- 关于 layer.open 动态赋值不了的问题
前情: layer.open({ type:1, // 用的是默认的信息弹框 content: $('#test'), // 这里不用 $('#test').html(), 不然后面获取不了值 }); ...
- HTML的列表表格表单知识点
无序列表格式 ...