logo设计在线生成免费商标图片,大连seo交流群,国内最好的crm视频,网站优化 工具1、问题概述#xff1f;
在开发中#xff0c;有时候需要展示的内容非常的多#xff0c;这个时候就需要通过tips#xff0c;弹框显示出完整的内容。
解决办法#xff1a;使用jQuerylayui-table方式实现。
效果如下#xff1a;
框架的大小#xff0c;位置#xff0c;…1、问题概述
在开发中有时候需要展示的内容非常的多这个时候就需要通过tips弹框显示出完整的内容。
解决办法使用jQuerylayui-table方式实现。
效果如下
框架的大小位置颜色可以更改 2、实现方式
2.1、配置table的相关属性
案例从官网中来
重点给返回值加上class属性div classtipsfundata.sign/div
cols: [[ //标题栏{field: id, title: ID, width: 80, sort: true},{field: username, title: 用户, width: 120},{field: sign, title: 签名, minWidth: 160,templet:function(data){return div classtipsfundata.sign/div;}},{field: sex, title: 性别, width: 80},{field: city, title: 城市, width: 100},{field: experience, title: 积分, width: 80, sort: true}]]
2.2、为classtipsfun加入鼠标事件
【1、在jquery的ready中初始化即可】
使用jQuery的方式为又classtipsfun加入鼠标移入事件和鼠标移出事件
$(function(){var laytips;//鼠标进入获取当前内容并弹框显示$(.tipsfun).on(mouseover,function(){var currentText$(this).text();laytipslayer.tips(currentText,this,{tips:[1, #000],//设置tips的类型和颜色time:30000,//tips默认显示时长area:[300px,100px]//设置tip的宽高})});//鼠标移开后关闭tips$(.tipsfun).on(mouseout,function(){layer.close(laytips);}); });
【2、在layui table中的done函数中初始化也可以】
因为done是在数据渲染完毕的回调函数
time:定义弹框默认显示的时长毫秒单位
area:设置弹框的显示宽高
tips:显示弹框的类型和颜色 done:function(res,curr,count){var laytips;//鼠标进入获取当前内容并弹框显示$(.tipsfun).on(mouseover,function(){var currentText$(this).text();laytipslayer.tips(currentText,this,{tips:[1, #000],//设置tips的类型和颜色time:30000,//tips默认显示时长area:[300px,100px]//设置tip的宽高})});//鼠标移开后关闭tips$(.tipsfun).on(mouseout,function(){layer.close(laytips);});},
3、完整代码
将代码中的css和js换成你自己的文件。
jquery使用的是1.8或更高版本。
layui使用最新版本就行
!DOCTYPE html
html
headmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1titleDemo/title!-- 请勿在项目正式环境中引用该 layui.css 地址 --link hreflayui/css/layui.css relstylesheet
/head
body
table classlayui-hide idID-table-demo-data/table!-- 请勿在项目正式环境中引用该 layui.js 地址 --
script srclayui/layui.js/script
script srcjquery-1.8.0.min.js/script
script
layui.use(table, function(){var table layui.table;// 已知数据渲染var inst table.render({elem: #ID-table-demo-data,cols: [[ //标题栏{field: id, title: ID, width: 80, sort: true},{field: username, title: 用户, width: 120},{field: sign, title: 签名, minWidth: 160,templet:function(data){return div classtipsfundata.sign/div;}},{field: sex, title: 性别, width: 80},{field: city, title: 城市, width: 100},{field: experience, title: 积分, width: 80, sort: true}]],data: [{ // 赋值已知数据id: 10001,username: 张三1,sex: 男,city: 浙江杭州,sign: 人生恰似一场修行,experience: 116}, {id: 10002,username: 张三2,sex: 男,city: 浙江杭州,sign: 人生恰似一场修行,experience: 12,LAY_CHECKED: true}, {id: 10003,username: 张三3,sex: 男,city: 浙江杭州,sign: 人生恰似一场修行,experience: 65}, {id: 10004,username: 张三4,sex: 男,city: 浙江杭州,sign: 人生恰似一场修行,experience: 777}, {id: 10005,username: 张三5,sex: 男,city: 浙江杭州,sign: 人生恰似一场修行,experience: 86}, {id: 10006,username: 张三6,sex: 男,city: 浙江杭州,sign: 人生恰似一场修行,experience: 12}, {id: 10007,username: 张三7,sex: 男,city: 浙江杭州,sign: 人生恰似一场修行,experience: 16}, {id: 10008,username: 张三8,sex: 男,city: 浙江杭州,sign: 人生恰似一场修行,experience: 106}],//skin: line, // 表格风格//even: true,page: true, // 是否显示分页limits: [5, 10, 15],limit: 5 // 每页默认显示的数量});
});$(function(){var laytips;//鼠标进入获取当前内容并弹框显示$(.tipsfun).on(mouseover,function(){var currentText$(this).text();laytipslayer.tips(currentText,this,{tips:[1, #000],//设置tips的类型和颜色time:30000,//tips默认显示时长area:[300px,100px]//设置tip的宽高})});//鼠标移开后关闭tips$(.tipsfun).on(mouseout,function(){layer.close(laytips);});});/script/body
/html
