layui.layer
layui前端UI框架
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互。
**兼容:**layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。
layer弹层组件
layer 是作为 layui 的一个弹层模块.layer可以独立使用,也可以通过Layui模块化使用。
layer使用方法
1.作为独立组件使用
需要下载layer组件包、引入jQuery1.8以上的任意版本,并引入layer.js.
<script src="js/jquery2.1.4.js"></script>
<script src="layer/layer.js"></script>
// 引入好layer.js后,直接用即可
<script>
layer.msg('hello');
</script>
- layui 模块化使用
需要下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layui.js
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('hello');
});
layer方法使用
layer.msg(content, options, end) - 提示框
content:文本内容
options:基础参数
end:层销毁后触发的回调
<script>
function msgOne(){
layer.msg("天干物燥,小心火烛",{icon:6});//icon:0-6
}
</script>
<body>
<button onclick="msgOne()">msg函数</button>
</body>
layer.load(icon, options) - 加载层
icon:图标。信息框和加载层的私有参数
信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入0-6如果是加载层,可以传入0-2
<script>
function onloadOne() {
var index = layer.load(1); //icon数值在0-2
setTimeout(function () {
layer.close(index);
},2000);
}
function onloadTwo() {
var indexOne = layer.load(2,{time: 8000});
layer.close(indexOne);
}
</script>
<body>
<button onclick="onloadOne()">onload函数1</button>
<button onclick="onloadTwo()">onload函数2</button>
</body>
layer.tips(content, follow, options) - tips层
follow:事件回调体(对象)
<script>
function tipOne() {
layer.tips( "曹丕","#sq",{tipsMore:true,tips:3});
}
</script>
<body>
<button onclick="tipOne()">tip函数</button>
</body>
tips - tips方向和颜色:上右下左四个方向,通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色,可以设定tips: [1, ‘#c00’]
tipsMore - 是否允许多个tips.允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启
layer.alert(content, options, yes) - 普通信息框
yes:确定按钮回调方法
<script>
function alertOne() {
layer.alert("这就是嗨的代价",{icon: 6})
}
</script>
<body>
<button onclick="alertOne()">alert函数</button>
</body>
layer.close(index) - 关闭特定层
index:每一种弹层调用方式,都会返回一个index,它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
var indexOne = layer.load(2,{time: 8000});
layer.close(indexOne);