今天就跟大家聊聊有關(guān)layui中 timeline如何使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

在瓊山等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司 網(wǎng)站設(shè)計(jì)制作定制開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),網(wǎng)絡(luò)營銷推廣,外貿(mào)營銷網(wǎng)站建設(shè),瓊山網(wǎng)站建設(shè)費(fèi)用合理。

使用layui timeline過程記錄：

layui官網(wǎng)時(shí)間線介紹比較少，可能是太簡(jiǎn)單了，這里把時(shí)間線通過請(qǐng)求后臺(tái)數(shù)據(jù)。再自動(dòng)填寫到對(duì)應(yīng)區(qū)塊，進(jìn)行了封裝；

代碼如下：

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 = "<ul class=\"layui-timeline\">";                       var uls1 = "<ul>";                       var uls2 = "</ul>";                       var lis = "<li class=\"layui-timeline-item\">";                       var lis1 = "<li>";                       var lis2 = "</li>";                       var is = "<i class=\"layui-icon layui-timeline-axis\"></i>";                       var divs = "<div class=\"layui-timeline-content layui-text\">";                       var divs2 = "</div>";                       var h4s = "<h4 class=\"layui-timeline-title\">";                       var h4s2 = "</h4>";                       var ps = "<p>";                       var ps2 = "</p>";                       var br = "</br>";                                               if(list.length>0){                           var content1 = "";                           content1 = content1+uls;                           for(var i=0; i<list.length; i++){                               var content2 = "";                               content2 = content2+lis+is+divs;                               if(list[i].time!=null&&list[i].time!=''){                                   content2 = content2+h4s+createTime(list[i].time)+h4s2                               }                               if(list[i].content!=null&&list[i].content!=''){                                   content2 = content2+ps+list[i].content+ps2;                               }                               if(list[i].ul!=null&&list[i].ul.length>0){                                   var list2 = list[i].ul;                                   content2 = content2+uls1;                                   for(var j=0; j<list2.length; j++){                                       if(list2[j].content!=null&&list2[j].content!=''){                                           content2 = content2+lis1+list2[j].content+lis2;                                       }                                   }                                   content2 = content2+uls2;                                                                   }                                                               //可擴(kuò)展                               content2 = content2 + divs2+lis2;                               content1 =content1+content2;                           }                           content1 = content1 +uls2;                            //再跟你想追加的代碼加到一起插入div中                           document.getElementById(div).innerHTML = content1;                       }                   }else if(res.SUCCESS===false){                       layer.msg(res.msg);                   }               }                           });   } function createTime(v){       var date = new Date(v);       var y = date.getFullYear();       var m = date.getMonth()+1;       m = m<10?'0'+m:m;       var d = date.getDate();       d = d<10?("0"+d):d;       var h = date.getHours();       h = h<10?("0"+h):h;       var ms = date.getMinutes();       ms = ms<10?("0"+ms):ms;       var s = date.getSeconds();       s = s<10?("0"+s):s;       var str = y+"-"+m+"-"+d+" "+h+":"+ms+":"+s;       return str;   }

調(diào)用如下：

var url = "./json/timeline/dome1.js";<br>var json = {}; <br>timelineshow(url,json,"div1");//url為請(qǐng)求數(shù)據(jù)地址；json為參數(shù)json字符串；打三個(gè)參數(shù)為時(shí)間線顯示位置標(biāo)簽id

參數(shù)說明：

url:實(shí)際后臺(tái)請(qǐng)求地址；

json:請(qǐng)求參數(shù)；

第三個(gè)參數(shù):時(shí)間線繪制點(diǎn)

數(shù)據(jù)響應(yīng)形式：

{    "SUCCESS": true,    "data": [{        "time": "2019-01-04 11:00:42",        "content":"這是一條測(cè)試內(nèi)容",        "ul":[{            "content":"子內(nèi)容1"        },        {            "content":"子內(nèi)容1"        }]    }, {        "time": 1546571007000,        "content":"這是一條測(cè)試內(nèi)容",        "ul":[{            "content":"子內(nèi)容1"        },        {            "content":"子內(nèi)容1"        }]    }, {        "time": 1546571096000,        "content":"這是一條測(cè)試內(nèi)容"    }, {        "time": 1546571118000,        "content":"這是一條測(cè)試內(nèi)容"    }, {        "time": 1546571159000,        "content":"這是一條測(cè)試內(nèi)容"    }, {        "time": 1546571372000,        "content":"這是一條測(cè)試內(nèi)容"    }, {        "time": 1546571458000,        "content":"這是一條測(cè)試內(nèi)容"    }, {        "time": 1546571721000,        "content":"這是一條測(cè)試內(nèi)容"    }, {        "time": 1546572137000,        "content":"這是一條測(cè)試內(nèi)容"    }],    "msg": "查詢成功！"}

參數(shù)說明：

“SUCCESS”：調(diào)用接口狀態(tài)反饋；

“data”:時(shí)間線內(nèi)容

“time”:時(shí)間線時(shí)間;這里可以傳入時(shí)間戳形式；也可以傳入定義好的時(shí)間格式;如："2019-01-04 11:00:42"

“content”:內(nèi)容

“url”:子內(nèi)容

“content”:內(nèi)容部分

“msg”:調(diào)用接口反饋信息；當(dāng)“SUCCESS”為false時(shí)，會(huì)根據(jù)此字段進(jìn)行提示信息

看完上述內(nèi)容，你們對(duì)layui中 timeline如何使用有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

新聞名稱：layui中timeline如何使用-創(chuàng)新互聯(lián)
文章出自：http://www.rwnh.cn/article38/joisp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、定制網(wǎng)站、響應(yīng)式網(wǎng)站、標(biāo)簽優(yōu)化、Google、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)