layui的tips层怎么用

PHP中文网 • 2025年3月13日 00:56:34 • 编程技术 • 阅读 2

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

本教程操作环境：Windows7系统、layui2.4版，该方法适用于所有品牌电脑。

推荐：《javascript基础教程》《javascript基础教程》

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，比如

         你喜欢的人：                    
                    $(function(){            var tips;            $('i.tooltip-icon').on({                mouseenter:function(){                    var that = this;                    tips =layer.tips("说明：只能选择阿毛我，哈哈哈",that,{tips:[2,'#fff'],time:0,area: 'auto',maxWidth:500});                },                mouseleave:function(){                    layer.close(tips);                }            });        })    /*    $(".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层怎么用的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3005419.html