layer之web弹出组件
来源:互联网 发布:传颂之物 知乎 编辑:程序博客网 时间:2024/06/05 10:59
对!就是在昨天2017-2-14,让我在一次偶然的机会遇见了她,并深深的爱上了她。
官方API文档链接
首先你要去官网下载这个框架组件:官网
然后你需要对layer.js这个文件进行引入,但是在引入之前你必须引入jQuery而且版本必须是1.8或者以上的版本!
例如:
<!doctype html><html><head><meta charset="utf-8"><title>开始使用layer</title></head><body><button id="test1">小小提示层</button><!--你必须先引入jQuery1.8或以上版本--><script src="jquery-1.8.2.min.js"></script><script src="layer/layer.js"></script><script>// $("#test1").click(function(){// layer.msg("nihao");// })//***********// $('#test1').on('click', function(){// layer.msg('Hello layer');// });//***********$('#test1').on('click', function(){ layer.open({ type: 1, area: ['600px', '360px'], shadeClose: true, //点击遮罩关闭 content: '\<\div style="padding:20px;">自定义内容\<\/div>' });});</script>当然,你也可以写在外部的js文件</body></html>
注意:layer.js中的数据是以json格式存储的,json语法如下:
- 数据在键/值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
在layer里我们可以弹出以下内容:
1.弹出一个页面层
$('#test1').on('click', function(){ layer.open({ type: 1, area: ['600px', '360px'], shadeClose: true, //点击遮罩关闭 content: '\<\div style="padding:20px;">自定义内容\<\/div>' });});
2.弹出一个iframe层
$('#parentIframe').on('click', function(){ layer.open({ type: 2, title: 'iframe父子操作', maxmin: true, shadeClose: true, //点击遮罩关闭层 area : ['800px' , '520px'], content: 'test/iframe.html' });});
3.弹出一个loading层
$('#test4').on('click', function(){ var ii = layer.load(); //此处用setTimeout演示ajax的回调 setTimeout(function(){ layer.close(ii); }, 1000);});
4弹出一个tips层
$('#test5').on('click', function(){ layer.tips('Hello tips!', '#test5');});
0 0
- layer之web弹出组件
- web弹出层组件之js组件layer
- Layer 一款web弹层组件(弹出层、日期选择、分页、LayIM接口文档)
- 前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)
- web弹层组件layer
- Web 弹层组件-layer
- 页面弹出层组件layer的用法
- 非常好的web弹出层框架 -- layer
- 非常好的web弹出层框架 -- layer
- web弹层解决方案:layer组件
- layer.open web弹层组件
- jQuery插件之layer弹出层
- layer弹出层使用之select标记
- layer.open组件获取弹出层页面变量、函数
- layer.open组件获取弹出层页面变量、函数
- layer.open组件获取弹出层页面变量、函数
- web弹层组件-layer封装的工具类
- layer初体验之弹出一个删除确认界面
- 关于xib的一些东西 xib中多个控件如何让他们平分屏幕的宽度(转载的)
- Ubuntu 安装Samba(Linux与Windows共享文件)
- OpenStack学习笔记(三)测量服务Telemetry
- 选择排序
- 历届试题 连号区间数
- layer之web弹出组件
- 区间合并
- AndroidStudio配置SVN以及使用代码管理
- JS文件下载与导出
- 单例模式
- ReactiveCocoa基础和一些常见类介绍
- 算法提高 排列式
- 深入理解ThreadLocal
- mysql学习(5)数据库多表查询