layui tips
layui tips
- layui 说明
- 鼠标移入显示提示
- 优化使用说明
layui 说明
// layer.tips(‘要提示的内容’。’, 要绑定的元素(id # ,class . 标签 标签), {
// tips: [1, ‘#3595CC’], 提示样式 颜色
// time: 2000 打开后在屏幕显示时间
// });
鼠标移入显示提示
引入官方layui js
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.4/layui.js"></script>
给标签动态添加鼠标移入事件
document.getElementById(“lab_string2”).addEventListener(“mouseover”, function () {
layer.tips(‘我是另外一个tips，只不过我长得跟之前那位稍有些不一样。’, ‘#lab_string2’, {
tips: [1, ‘#3595CC’],
time: 2000
});
})
效果图
优化使用说明
上面虽然实现了，但是这只适用于一个页面只有一个提示，如果页面要提示的标签过多，就会代码冗长，难以维护
window.addEventListener(“mouseover”, function (e) {
// includes 在ES5，Array已经提供了indexOf用来查找某个元素的位置，如果不存在就返回-1，但是这个函数在判断数组是否包含某个元素时有两个小不足，第一个是它会返回-1和元素的位置来表示是否包含，在定位方面是没问题，就是不够语义化。另一个问题是不能判断是否有NaN的元素
//ES6提供了Array.includes()函数判断是否包含某一元素，除了不能定位外，解决了indexOf的上述的两个问题。它直接返回true或者false表示是否包含元素，对NaN一样能有有效。
if ([null, ’ '].indexOf(e.fromElement.id) == -1) {
if ([‘lab_string2’,‘lab_string3’,‘lab_string4’,‘lab_string5’,‘lab_string6’,‘lab_string7’,‘lab_string8’].indexOf(e.fromElement.id)!==-1) {
let tip = “”;
let demo = ‘#’;
let demos = ‘’
switch (e.fromElement.id) {
case ‘lab_string2’:
tip = “我是mood2”;
demos = demo + e.fromElement.id;
break;
case ‘lab_string3’:
tip = “我是mood3”;
demos = demo + e.fromElement.id;
break;
case ‘lab_string4’:
tip = “我是mood4”;
demos = demo + e.fromElement.id;
break;
case ‘lab_string5’:
tip = “我是mood5”;
demos = demo + e.fromElement.id;
break;
case ‘lab_string6’:
tip = “我是mood6”;
demos = demo + e.fromElement.id;
break;
case ‘lab_string7’:
tip = “我是mood7”;
demos = demo + e.fromElement.id;
break;
case ‘lab_string8’:
tip = “我是mood8”;
demos = demo + e.fromElement.id;
break;
// default:
// tip = “我是你好啊”;
// break;
}
layer.tips(tip, demos, {
tips: [1, ‘#3595CC’],
time: 2000
})
}
}// if (e.id==lab_string9) {
// alert("mood");
// }
})
layui tips相关推荐
- layer.tips换行问题(解决layui tips连续英文和数字不换行问题)
jsp>style里添加: .layui-layer-tips {word-break: break-all;} tips代码: layer.tips(text, $(this), {area: ...
- Table表格的单元格提示
表格的单元格显示 单元格内容,如果太多显示为省略号 鼠标放在上面,显示里面的全部内容 CSS关键代码 table{table-layout: fixed; }td{white-space: nowra ...
- layui使用tips_layui的tips层怎么用？
layui的tips层怎么用?下面本篇文章给大家介绍一下layui中tips的使用.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. layui中tips的使用 1.引入文件 laye ...
- layui使用tips_使用layer.tips实现鼠标悬浮时触发事件提示消息实现
代码: 你瞅啥!?过来试试! 方法一: function show(id) { layer.tips("左边么么哒", "#"+id+"", ...
- layui使用tips_layer ui插件显示tips时,修改字体颜色的实现方法
今天做调查问卷,又遇到一个蛋疼小问题,记录下. 调查问卷有很多选项是要求必填的,如果不填的话,需要给出友好的提示.用的如下组件:http://layer.layui.com/ 1.之前一直默认用的: ...
- layui 鼠标移动到单元格显示tips（layer.tips）
分下面三个步骤实现表格的tips实现: 1,field 部分:加入[templet:'#titleTipl'] cols: [[ //表头 {field: '#', ...
- layui的css文件自己写的吗_安装教程和自己的使用tips
我的知乎回答:研究生们刚开始看英文文献是怎么看的? 本人目前研二,研一的时候情况和题主 差不多,英- https://www.zhihu.com/question/345516318/answer/8 ...
- layui table表格展示鼠标滑过列显示tips
鼠标滑过操作列 // 鼠标滑过操作列 var tip_index = 0; $(document).on('mouseenter', '#proStatus', function(){tip_inde ...
- layui使用tips_layer 的提示层 tips的一般使用
1.提示层在鼠标经过的情况下出现,鼠标移开消失,且需提示的文案是固定写死的,不需要动态改变的 html: js: var layer_tips = 0; $(document).on('mouseen ...
最新文章
- Codeforces 862B - Mahmoud and Ehab and the bipartiteness
- 缓存穿透与击穿问题解决方案
- 解决cmd命令查看python版本“python不是内部命令或外部命令，也不是可执行程序解决方案”的问题
- 读书笔记—写给大家看的PPT设计书
- Layui / WEB UI
- 算术基本定理（维基百科）
- 956. 最高的广告牌
- java堆是gc管理_JVM内存管理及GC机制
- 泛微 E9开发视频教程
- 测试开发大厂面试精选40题
- astrolog32 java_Astrolog32下载
- python乌龟吃鱼小游戏（类和对象及Easygui应用）
- 集线器、交换机、路由器
- php获取验证码倒数60秒,yii框架实现注册页面短信验证60秒倒计时
- C++初学必练基础题【第三期】
- #从零开始学HCIA起步
- Cesium 可视域分析代码段（源码）补充
- 外报分析中国房价上涨三原因 指开发商行为怪异
- nvidia驱动卸载与安装
- C语言 上机课练习题