Office中國(guó)論壇/Access中國(guó)論壇

 找回密碼
 注冊(cè)

QQ登錄

只需一步，快速開始

tag 標(biāo)簽: 模板

相關(guān)帖子

 版塊 作者 回復(fù)/查看 最后發(fā)表

沒(méi)有相關(guān)內(nèi)容

相關(guān)日志

分享 Layui 2.6.8 模板
熱度 1 zhuyiwen 2021-10-21 10:42
!DOCTYPE html html head meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" title測(cè)試 Layui 模板/title link href="Mobile/lib/layui-v2.6.8/css/layui.css" rel="stylesheet" / /head body div id="view" script id="demo" type="text/html" h3{{ d.title }}/h3 ul {{# layui.each(d.list, function(index, item){ }} li span{{ index + 1 }}/span span{{ item.modname }}/span span{{ item.alias }}：/span span{{ item.site || '' }}/span /li {{# }); }} {{# if(d.list.length === 0){ }} 無(wú)數(shù)據(jù) {{# } }} /ul /script script src="Mobile/lib/layui-v2.6.8/layui.js"/script script type="text/javascript" // layui 閉包 layui.use(function () { var laytpl = layui.laytpl; // 模板對(duì)象 var $ = layui.$; // jQuery對(duì)象 //要渲染的json數(shù)據(jù) var data = { "title": "Layui常用模塊", "list": }; var demoTpl = demo.innerHTML; // 獲取模板 var view = $('#view'); // 獲取要渲染DOM對(duì)象 //laytpl.render: 渲染語(yǔ)法格式 //1. 使用回調(diào)函數(shù)：laytpl(模板字符串).render(json數(shù)據(jù), function (渲染生成的字符串) { }); //2. 直接生成字符串：var 渲染生成的字符串 = laytpl(模板字符串).render(json數(shù)據(jù)); //laytpl 模板語(yǔ)法 // d: json數(shù)據(jù) // {{ }} 默認(rèn)的模板分割符，用來(lái)插入js表達(dá)式，如果與其它模板沖突，可重新定義 laytpl.config({open: '%', close: '%'}) // {{ # ... }} 插入js語(yǔ)句塊 //示例： //h3{{ d.title }}/h3 //ul // {{# layui.each(d.list, function(index, item){ }} // li // span{{ index + 1 }}/span // span{{ item.modname }}/span // span{{ item.alias }}：/span // span{{ item.site || '' }}/span // /li // {{# }); }} // {{# if(d.list.length === 0){ }} // 無(wú)數(shù)據(jù) // {{# } }} ///ul //渲染結(jié)果 //h3Layui常用模塊/h3 //ul // li // span1/span // span彈層/span // spanlayer：/span // spanlayer.layui.com/span // /li // li // span2/span // span模板/span // spanlaytpl：/span // span/span // /li // li // span3/span // span表格/span // spantable：/span // span/span // /li // li // span4/span // span表單/span // spanform：/span // span/span // /li ///ul // 渲染模板 = html，利用回調(diào)函數(shù)添加到 DOM 對(duì)象 view 中 laytpl(demoTpl).render(data, function (html) { view.append(html); view.append('hr/'); // 添加一條分割線 }); }); /script /body /html
個(gè)人分類: 網(wǎng)站開發(fā)|1308 次閱讀|2 個(gè)評(píng)論

QQ|站長(zhǎng)郵箱|小黑屋|手機(jī)版|Office中國(guó)/Access中國(guó) ( 粵ICP備10043721號(hào)-1 )  

GMT+8, 2024-10-23 08:31 , Processed in 0.086880 second(s), 13 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

返回頂部