Comment utiliser la couche de conseils de layui

Comment utiliser la couche de conseils de layui : introduisez d'abord les fichiers layer.css et layer.js ; puis utilisez le format de code comme "layer.tips(msg, '#id',{tips: 1 }, time :10000)" ; définissez enfin les paramètres pertinents.

L'environnement d'exploitation de ce tutoriel : système Windows 7, layui version 2.4. Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel de base JavaScript" "Tutoriel layUI"

Utilisation des astuces dans layui

1. Introduisez les fichiers layer.css et layer.js

2 Introduction aux paramètres :

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

Ces trois sont des paramètres obligatoires et ont également d'autres paramètres de base de la couche. , tels que l'heure (si fermer temporairement), la zone (définir la largeur et la hauteur de la boîte), shadeClose (si cliquer sur le calque de masque pour fermer), etc.

3. Exemple de code :

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

Si nous ne voulons pas le fermer régulièrement, mais glisser sur l'écran pour créer un effet caché, nous pouvons coopérer avec les événements mouseenter et mouseleave. La valeur temporelle à ce moment est 0, telle que

 <div class="content" id="content">
        <label for="">你喜欢的人：</label>
        <input type="text" placeholder="请输入……">
        <i class="iconfont icon-combined-shape-copy tooltip-icon"></i>
    </div>
    <script type = "text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type = "text/javascript" src="lib/layer.js"></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;>说明：只能选择阿毛我，哈哈哈</span>",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("智能组卷：每个用户考试时抽到的试题及顺序随机组成", &#39;.ack-img&#39;, {tips: 1});
    });*/
 
    $(function(){
        var tips;
        $(&#39;.ack-img&#39;).on({
            mouseenter:function(){
                var that = this;
                tips =layer.tips("<span style=&#39;color:#000;&#39;>智能组卷：每个用户考试时抽到的试题及顺序随机组成</span>",
                    that,{tips:[2,&#39;#fff&#39;],time:0,area: &#39;auto&#39;,maxWidth:500});
                //tips = layer.tips("智能组卷：每个用户考试时抽到的试题及顺序随机组成", that, {tips: 1});
            },
            mouseleave:function(){
                layer.close(tips);
            }
        });
    });

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!