layer Tips参数使用
layer.tips(content, follow, options)
- tips层
type:4
的深度定制。也是我本人比较喜欢的一个层类型,因为它拥有和msg
一样的低调和自觉,而且会智能定位,即灵活地判断它应该出现在哪边。默认是在元素右边弹出
<head><meta charset="UTF-8"><title>Tip参数使用</title><script src="jquery1.11.3.js"></script><script src="layer/layer.js"></script>
</head><body><br /><br /><br />用户名:<input type="text" id="tips" /><script type="text/javascript">$('#tips').on('click', function() {layer.tips('请输入用户名', '#tips', {tips: [3, '#0FA6D8'], //设置tips方向和颜色 类型:Number/Array,默认:2 tips层的私有参数。支持上右下左四个方向,通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色,可以设定tips: [1, '#c00']tipsMore: false, //是否允许多个tips 类型:Boolean,默认:false 允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启time:2000 //2秒后销毁,还有其他的基础参数可以设置。。。。这里就不添加了});});</script>
</body>
layer.tips('可以发html代码哦', '依附在谁旁边', {tips: [1, '#F0F0F0'],time: 10000,area: ['auto', 'auto']//这个属性可以设置宽高 auto 表示自动});
运行效果:
layer ui
插件显示tips
时,修改字体颜色
今天做调查问卷,又遇到一个蛋疼小问题,记录下。
调查问卷有很多选项是要求必填的,如果不填的话,需要给出友好的提示。用的如下组件:http://layer.layui.com/
1、之前一直默认用的:
<script src="/assets/js/layer/layer.js"></script>function showMessage(msg, domObj) {layer.tips(msg, domObj,{tips:3});//弹出框加回调函数
}showMessage("选项不能为空", $(this));
效果如下:
2、ui过来看了下之后,说太丑,要换成白色背景,红色字体
可是查看了半天的官方文档,只看到了修改背景颜色的配置项,没找到改字体色的配置项:
勉强修改背景色后如下:
function showMessage(msg, domObj) {layer.tips(msg, domObj,{tips:[3,"red"]});//弹出框加回调函数
}
3、最后实在无语,说搞不了,后边同事折腾了一会,过来提供了如下方案:
function showMessage(msg, domObj) {layer.tips("<span style='color:red'>"+msg+"</span>", domObj,{tips:[3,'#fff']});//弹出框加回调函数}
好吧,背景色还是可以改的。。。有时候说不行,只是没想到而已
layer Tips参数使用相关推荐
- layer.tips使用
用layer.tips实现划过显示,划出隐藏效果 layer-tips使用 1.引入文件 layer.css . layer.js 2.参数介绍: layer.tips(content, follow ...
- layui使用tips_使用layer.tips实现鼠标悬浮时触发事件提示消息实现
代码: 你瞅啥!?过来试试! 方法一: function show(id) { layer.tips("左边么么哒", "#"+id+"", ...
- layer.tips使用+样式修改
文章目录 使用--鼠标滑过或移开控制tips的显示和隐藏 步1:$('.fujian') ------ 获取需要显示tips的元素 步2: $('.fujian').on() ----- 绑定事件 步 ...
- layui 鼠标移动到单元格显示tips(layer.tips)
分下面三个步骤实现表格的tips实现: 1,field 部分:加入[templet:'#titleTipl'] cols: [[ //表头 {field: '#', ...
- layer.tips定义弹出的宽度
layer.tips('xxx', '.onlinetest', {tips: [1, '#3595CC'],area: ['500px', 'auto'],time: 4000 });
- 使用layer.tips实现鼠标悬浮时触发事件提示消息实现
https://www.cnblogs.com/Big-Boss/p/9531235.html /*** 服务商管理初始化*/ var invoice = {id: "invoiceTabl ...
- layer tips 宽和高自定义
layer.tips('可以发html代码哦', '依附在谁旁边', { tips: [1, '#F0F0F0'], time: 10000, a ...
- layer.tips换行问题(解决layui tips连续英文和数字不换行问题)
jsp>style里添加: .layui-layer-tips {word-break: break-all;} tips代码: layer.tips(text, $(this), {area: ...
- Layer.tips
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件 不论鼠标指针离开被选元素还是任何子元素,都会触发 mous ...
最新文章
- poj1236(强连通缩点)
- LInux找不到动态链接库,./cyusb_linux: error while loading shared libraries: libcyusb.so: cannot open shared
- 九、Docker快速搭建Elastic Stack(上篇)
- Web开发学习路线图
- 牛客 - 第k小数(线性寻找第 k 小数)
- java按条件查询结果为空_mybatis中查询结果为空时不同返回类型对应返回值问题...
- 2场直播,本周二四丨Oracle drop table MySQL HeatWave
- Python提取任意长度整数的每位数字
- 【DFS + backtracking】LeetCode 216. Combination Sum III
- GB28181---XML解析
- Leetcode: Maximal Square
- 北航计算机组成重修,北航计算机组成原理123希望大伙把作业上传.pdf
- win10关闭电池保护模式_近年最稳的Win10更新?Win10 1909值得升级吗
- 参考文献标引方式_参考文献标注及排写格式
- XUGU:利空频传,建网站如何去赚钱?
- 一段关于霸面腾讯的经历以及霸面的技巧跟准备
- c语言中以追加只写方式打开文本文件,C语言中打开文件读取,写入的操作
- C语言中“/”(除号)应用时的注意问题
- philips 968 也可以telnet
- 九九乘法表编程上三角python_【转】Python实现不同格式打印九九乘法表