网站建设资讯

NEWS

网站建设资讯

layui中tips层的用法

这篇文章给大家分享的是有关layui中tips层的用法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

成都创新互联主营隆林网站建设的网络公司,主营网站建设方案,app开发定制,隆林h5小程序定制开发搭建,隆林网站营销推广欢迎隆林等地区企业咨询

layui的tips层的使用方法:首先引入文件layer.css和layer.js文件;然后使用代码格式为“layer.tips(msg, '#id',{tips: 1},time:10000)”;最后设置相关参数即可。

layui中tips的使用

1、引入文件 layer.css 、 layer.js

2、参数介绍:

layer.tips(content, follow, options) - tips层
{
content:tooltip内容可以是str,也可以是html代码
follow:依附的元素,一般用id表示
如果依附的元素是自己直接用this即可,如果是在其他元素的事件(比如点击)里面,记得更改this指向。
options:tips的配置型[tips位置:1上;2右;3下;4左,字体的颜色]
}

这3个是必填参数,也同时具有layer的其他基础参数,比如time(是否定时关闭),area(设置框的宽高),shadeClose(是否点击遮罩层关闭)等。

3、代码示例:

layer.tips(msg, '#id',{tips: 1},time:10000)

如果我们不想定时关闭,而是划过显示,划出隐藏的效果,可以配合mouseenter、mouseleave事件即可,此时的time值为0,比如

 
/* $(".ack-img").hover(function () { layer.tips("智能组卷:每个用户考试时抽到的试题及顺序随机组成", '.ack-img', {tips: 1}); });*/ $(function(){ var tips; $('.ack-img').on({ mouseenter:function(){ var that = this; tips =layer.tips("智能组卷:每个用户考试时抽到的试题及顺序随机组成", that,{tips:[2,'#fff'],time:0,area: 'auto',maxWidth:500}); //tips = layer.tips("智能组卷:每个用户考试时抽到的试题及顺序随机组成", that, {tips: 1}); }, mouseleave:function(){ layer.close(tips); } }); });

感谢各位的阅读!关于layui中tips层的用法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前名称:layui中tips层的用法
链接地址:http://njwzjz.com/article/jippso.html