レイウイのヒントレイヤーの使い方

layui のヒント レイヤーの使用方法: 最初にファイルlayer.css ファイルとlayer.js ファイルを導入し、次にコード形式「layer.tips(msg, '#id',{tips: 1}」を使用します) , time :10000)"; 最後に関連パラメータを設定します。

このチュートリアルの動作環境: Windows 7 システム、layui バージョン 2.4. この方法は、すべてのブランドのコンピューターに適しています。

# 推奨事項: 「

javascript 基本チュートリアル」 「layUI チュートリアル」

layui でのヒントの使用

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 つは必須のパラメータであり、その他の基本的なパラメータもあります。時間 (一時的に閉じるかどうか)、面積 (ボックスの幅と高さを設定する)、shadeClose (マスク レイヤーをクリックして閉じるかどうか) など。

3. コード例:

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

時間を閉じたくないが、ディスプレイ上をスライドして非表示の効果を作成する場合は、mouseenter イベントと Mouseleave イベントを連携できます。このときの時間値は 0 です (例:

 <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);
            }
        });
    });

)

以上がレイウイのヒントレイヤーの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。