本文摘自PHP中文网,作者藏色散人,侵删。
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、参数介绍:
1 2 3 4 5 6 7 | 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、代码示例:
1 | layer.tips(msg, '#id' ,{tips: 1},time:10000)
|
如果我们不想定时关闭,而是划过显示,划出隐藏的效果,可以配合mouseenter、mouseleave事件即可,此时的time值为0,比如
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <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>
$( 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});
},
mouseleave: function (){
layer.close(tips);
}
});
});
|
以上就是layui的tips层怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
layui如何判定密码不一致
layui框架属于前端还是后端
layui怎么实现三级联动
layui table模块对表格数据处理后的排序问题
layui事件监听的方法
layui复选框使用介绍
layui的iframe跳转链接与页面按钮跳转相关介绍
layui表单元素怎么校验
django+layui后台布局介绍
layui怎么刷新当前页面
更多相关阅读请进入《layui》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » layui的tips层怎么用