PHP前端开发

layui的tips层怎么用

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

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

推荐:《javascript基础教程》《layUI教程》

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

 

 <div>        <label>你喜欢的人:</label>        <input>        <i></i>    </div>    <script></script>    <script></script>    <script>        $(function(){            var tips;            $(&#39;i.tooltip-icon&#39;).on({                mouseenter:function(){                    var that = this;                    tips =layer.tips("<span style=&#39;color:#000;&#39;>说明:只能选择阿毛我,哈哈哈",that,{tips:[2,&#39;#fff&#39;],time:0,area: &#39;auto&#39;,maxWidth:500});                },                mouseleave:function(){                    layer.close(tips);                }            });        })    </script>/*    $(".ack-img").hover(function () {        layer.tips("智能组卷:每个用户考试时抽到的试题及顺序随机组成", '.ack-img', {tips: 1});    });*/     $(function(){        var tips;        $('.ack-img').on({            mouseenter:function(){                var that = this;                tips =layer.tips("<span>智能组卷:每个用户考试时抽到的试题及顺序随机组成</span>",                    that,{tips:[2,'#fff'],time:0,area: 'auto',maxWidth:500});                //tips = layer.tips("智能组卷:每个用户考试时抽到的试题及顺序随机组成", that, {tips: 1});            },            mouseleave:function(){                layer.close(tips);            }        });    });