ホームページ > 記事 > ウェブフロントエンド > レイウイのヒントレイヤーの使い方
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; $('i.tooltip-icon').on({ mouseenter:function(){ var that = this; tips =layer.tips("<span style='color:#000;'>说明:只能选择阿毛我,哈哈哈</span>",that,{tips:[2,'#fff'],time:0,area: 'auto',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 style='color:#000;'>智能组卷:每个用户考试时抽到的试题及顺序随机组成</span>", that,{tips:[2,'#fff'],time:0,area: 'auto',maxWidth:500}); //tips = layer.tips("智能组卷:每个用户考试时抽到的试题及顺序随机组成", that, {tips: 1}); }, mouseleave:function(){ layer.close(tips); } }); });)
以上がレイウイのヒントレイヤーの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。