航歌 - 做最好的开发者知识平台

留言首页

当前位置：
首页
>
编程社区
>
其他
> layer - 简单好用的Web弹出层组件使用详解2（询问框、loading层、tip提示）

layer - 简单好用的Web弹出层组件使用详解2（询问框、loading层、tip提示）

2018-05-25 发布：hangge 阅读：3263

四、询问框、确认框（confirm）

这种类型的提示框有点类似系统的 confirm，它除了有“确定”按钮外，还有个“取消”按钮。

1，基本用法

layer.confirm('确定要删除吗?', function(index){
//点击确定后的回调
//do something

layer.close(index);
});

2，修改提示框的标题

layer.confirm('确定要删除吗?', {title:'我是标题'}, function(index){
//点击确定后的回调
//do something

layer.close(index);
});

3，带有图标的提示

layer.confirm('确定要删除吗?', {icon: 0}, function(index){
//点击确定后的回调
//do something

layer.close(index);
});

4，取消按钮点击回调

//点击确定后的回调
//do something

layer.close(index);
}, function(index){
//点击取消后的回调
//do something

layer.close(index);
});

5，修改按钮文字

layer.confirm('确定要删除吗?', {
btn: ['按钮1', '按钮2']
}, function(index){
layer.msg("点击了第一个按钮");
}, function(index){
layer.msg("点击了第二个按钮");
});

6，设置多个按钮

layer.confirm('确定要删除吗?', {
btn: ['按钮1', '按钮2', '按钮3', '按钮4'],
area: '450px',
btn3: function(index, layero){
layer.msg("点击了第三个按钮");
},
btn4: function(index, layero){
layer.msg("点击了第四个按钮");
},
}, function(index){
layer.msg("点击了第一个按钮");
}, function(index){
layer.msg("点击了第二个按钮");
});

7，综合使用

layer.confirm('确定要删除吗?', {
title: '我是标题',
icon: 3,
btn: ['按钮1', '按钮2']
}, function(index){
//点击第一个按钮后的回调
//do something
layer.close(index);
}, function(index){
//点击第二个按钮后的回调
//do something
layer.close(index);
});

五、加载层（load）

加载层常用在 ajax 加载过程中给用户一个 loading 提示。

1，基本用法

注意：load 默认是不会自动关闭的，通常我们需要在 ajax 回调中关闭它。

//显示加载层
var index = layer.load();

//2秒后将其关闭
setTimeout(function(){
layer.close(index);
}, 2000);

2，样式风格修改

layer 自带了下面三种加载样式，根据传入的值（0~2）自动改变，如果是 0 的话可以不用传。

//样式1
layer.load();

//样式2
layer.load(1);

//样式3
layer.load(2);

3，定时自动关闭

//2秒钟后自动关闭
layer.load(0, {time: 2*1000});

六、tip 提示层（tips）
tips 层有点类似于前面介绍的 msg，它同样会自动消失。不同的是，tips 层会智能定位，即灵活地判断它应该出现在哪里。

1，基本用法

tips 层默认是在元素右边弹出。下面样例当页面打开时，自动在 id 为 username 的输入框右侧显示一个 tip 提示。

<script>
window.onload = function() {
layer.tips('用户名必须填写!', '#username');
}
</script>

<input id="username" type="text" style="height:35px;">

2，修改显示位置

//提示tip在元素上方
layer.tips('用户名必须填写!', '#username', {tips: 1});

//提示tip在元素右侧
layer.tips('用户名必须填写!', '#username', {tips: 2});

//提示tip在元素下方
layer.tips('用户名必须填写!', '#username', {tips: 3});

//提示tip在元素左侧
layer.tips('用户名必须填写!', '#username', {tips: 4});

3，修改背景颜色

layer.tips('用户名必须填写!', '#username', {tips: [2,'#0FA6D8']});

4，同时显示多个 tips

默认情况下当显示新的 tips 时，之前的 tips 会自动销毁（其它类型的提示框也是一样）。我们可以通过 tipsMore: true 这个配置允许多个 tips 同时存在。

layer.tips('这是右侧的tips', '#username');
layer.tips('这是上方的tips', '#username', {tips:1, tipsMore: true});

5，修改自动消失的时间

layer.tips('用户名不能为空', '#username', {time: 2000}); //改成2秒（默认为3秒）

6，不自动消失

通过 time: 0 配置可以取消 tips 的自动关闭功能。下面样例，当鼠标移到输入框上时 tips 提示会一直显示，而鼠标移出后 tips 自动消失。

var index;

$("#username").on({
mouseover : function(){
var that = this;
//鼠标移入自动显示tips
index = layer.tips('用户名不能为空', that, {time: 0}); //不自动关闭
} ,
mouseout : function(){
//鼠标移出自动关闭tips
layer.close(index);
}
}) ;

上一篇layer - 简单好用的Web弹出层组件使用详解1（安装配置、消息提示框）下一篇layer - 简单好用的Web弹出层组件使用详解3（输入框、图片查看）

打赏支持

评论（0）

提交

文章类别

编程社区
SwiftFlex / FlashHTML5 / CSS3CordovaSpringBoot / CloudDocker / K8sReact / RN其他
奇文共赏

本类相关

jQuery - 第三方表格插件DataTables使用详解16（数据排序）

JS - 去掉或者替换所有的空格、回车换行符（\r\n替换成br）

Fabric.js - 详细使用教程4（事件监听：与画布、对象进行交互）

jQuery - 右键菜单插件contextMenu使用详解4（禁用菜单、菜单项）

Three.js - dat.GUI库的使用详解：下（进阶用法）

jQuery - 第三方表格插件DataTables使用详解5（宽高尺寸、滚动条的设置）

边缘计算框架EdgeX Foundry使用详解8（导出时对设备、数据过滤）

IIS - 解决IPA下载报错（应用程序“DEFAULT WEB SITE”中的服务器错误）

JS - Lodash工具库的使用详解6（Array数组函数3：移除、修改原数组内容）

代码更新时报“svn: E220001: Item is not readable”错误的解决

移动版给我留言打赏支持

© copyright 2006-2021 航歌. All rights reserved. 苏ICP备14040777号