layui中timeline的使用方法
使用layui timeline过程记录:
网站设计制作过程拒绝使用模板建站;使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统;成都网站设计、网站建设收费合理;免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了10年的创新互联网站建设公司。
layui官网时间线介绍比较少,可能是太简单了,这里把时间线通过请求后台数据。再自动填写到对应区块,进行了封装;
代码如下:
function timelineshow(url,json,div){ $.ajax({ url: url, type: "post", data: json, dataType: "json", success: function (res) { console.log(res); if(res.SUCCESS===true){ var list = res.data; var uls = "
- ";
var uls1 = "
- "; var lis1 = "
- "; var lis2 = " "; var is = ""; var divs = "
- ";
var uls2 = "
";
var divs2 = "
";
var h4s = ""; var h4s2 = "
"; var ps = ""; var ps2 = "
"; var br = ""; if(list.length>0){ var content1 = ""; content1 = content1+uls; for(var i=0; i调用如下:
var url = "./json/timeline/dome1.js";
var json = {};
timelineshow(url,json,"div1");//url为请求数据地址;json为参数json字符串;打三个参数为时间线显示位置标签id
参数说明:
url:实际后台请求地址;
json:请求参数;
第三个参数:时间线绘制点
数据响应形式:
{ "SUCCESS": true, "data": [{ "time": "2019-01-04 11:00:42", "content":"这是一条测试内容", "ul":[{ "content":"子内容1" }, { "content":"子内容1" }] }, { "time": 1546571007000, "content":"这是一条测试内容", "ul":[{ "content":"子内容1" }, { "content":"子内容1" }] }, { "time": 1546571096000, "content":"这是一条测试内容" }, { "time": 1546571118000, "content":"这是一条测试内容" }, { "time": 1546571159000, "content":"这是一条测试内容" }, { "time": 1546571372000, "content":"这是一条测试内容" }, { "time": 1546571458000, "content":"这是一条测试内容" }, { "time": 1546571721000, "content":"这是一条测试内容" }, { "time": 1546572137000, "content":"这是一条测试内容" }], "msg": "查询成功!" }
参数说明:
“SUCCESS”:调用接口状态反馈;
“data”:时间线内容
“time”:时间线时间;这里可以传入时间戳形式;也可以传入定义好的时间格式;如:"2019-01-04 11:00:42"
“content”:内容
“url”:子内容
“content”:内容部分
“msg”:调用接口反馈信息;当“SUCCESS”为false时,会根据此字段进行提示信息
效果展示:
以上就是layui timeline使用示例的详细内容,更多请关注创新互联其它相关文章!
文章标题:layui中timeline的使用方法
文章链接:http://hbruida.cn/article/jsjdhs.html