layui的tips层怎么用
2、参数介绍:
<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=https://www.ym97.com/wenku/cssm"jquery-1.8.3.min.js"></script> <script type = "text/javascript" src=https://www.ym97.com/wenku/cssm"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); } }); });以上就是layui的tips层怎么用的详细内容,更多请关注聚合云库其它相关文章!
本教程操作环境:Windows7系统、layui2.4版,该方法适用于所有品牌电脑。
layui的tips层的使用方法:首先引入文件layer.css和layer.js文件;然后使用代码格式为“layer.tips(msg, '#id',{tips: 1},time:10000)”;最后设置相关参数即可。
推荐:《javascript基础教程》《layUI教程》

3、代码示例:
layer.tips(msg, '#id',{tips: 1},time:10000)如果我们不想定时关闭,而是划过显示,划出隐藏的效果,可以配合mouseenter、mouseleave事件即可,此时的time值为0,比如
layui中tips的使用
1、引入文件 layer.css 、 layer.js
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(是否点击遮罩层关闭)等。
相关热词:
本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!
本文地址: https://v30.fanwenzhu.com/jiaob/cssm/4626.shtml
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程最新文章
-
其中border-left决定了底部直
时间:2021-01-23
-
当你自己回头来看你写的
时间:2021-01-23
-
④格式标签 粗体:b/b 斜
时间:2021-01-23
-
我们直接看代码: !DOCTY
时间:2021-01-23
-
这里就是吐槽的IE6!) 图
时间:2021-01-23
-
假设我们的HTML代码如下:
时间:2021-01-23
-
那么使用 CSS3 新增的选择
时间:2021-01-23
-
scaleGlassRectangle.y
时间:2021-01-23
热门文章
-
可以加我的HTML5前端交流群111645711 CSS源码
时间:2021-01-15
-
就可以对子元素进行 3D 变形操作了
时间:2021-01-12
-
用css让一个容器水平垂直
时间:2021-01-12
-
而没有设置高度
时间:2021-01-19
-
canvas与html5实现视频截图成果
时间:2021-01-19
-
所以通常不需要发送
时间:2021-01-19
-
我们尝试一下更新一下HTML结构
时间:2021-01-23
-
scaleGlassRectangle.y
时间:2021-01-23
-
HTML5生拖放实例分析
时间:2021-01-12
-
在全局:root{ }伪类中定义了一个 CSS 变量
时间:2021-01-21
