使用juicer模板建立jQuery-weui九宮格 示例
阿新 • • 發佈:2019-01-03
第一步將需要的js以及css引入:
<script src="/www/all_method/jquery_weui/lib/jquery-2.1.4.js"></script> <!--引入juicer--> <script type="text/javascript" src="/www/all_method/jquery_weui/lib/juicerTemplate.js"></script> <!-- 引入jquery-weui的js --> <script src="/www/all_method/jquery_weui/js/jquery-weui.js"></script> <link rel="stylesheet" href="/www/all_method/jquery_weui/css/jquery-weui.css">
簡單解釋:第一個js為jQuery的js
第二個js為juicer所依賴的js
第三個js為jQuery-weui所依賴的js
第四個為jQuery-weui所依賴的css
第二步建立jQuery-weui的模板
<script type="text/template" id="tpl"> <div class="weui-grids"> {@each gridInfo as grid,index} <a href="${grid.herf}" class="weui-grid js_grid"> <img src="${grid.imagePath}" alt=""> </div> <p class="weui-grid__label">${grid.gridName}</p> </a> {@/each} </div> </script>
簡單解釋:
九宮格的樣式依舊使用jQuery-weui的樣式,九宮格的每一項鍊接地址以及顯示圖片跟名稱根據資料動態獲取
{@each gridInfo as grid,index}:遍歷資料中的gridInfo陣列
href="${grid.herf}" :分別取出陣列中的herf欄位賦值到a標籤的href的連結地址上,作為九宮格的標籤的連結地址
src="${grid.imagePath}" :分別取出陣列中的imagePath欄位,並賦值個img標籤的src,作為九宮格顯示圖片
${grid.gridName}:分別取出陣列中的gridName欄位,並賦值個p標籤的值,作為九宮格的顯示名稱
第三步建立一個div來接收渲染結果
<!--建立一個div來接收渲染結果-->
<div id="result"></div>
第四步根據資料得到渲染結果,放到DOM元素中,在頁面上顯示
<script type="text/javascript">
// 資料
var gridData = {
gridInfo : [ {
herf : '../button.html',
imagePath : '../images/icon_nav_button.png',
gridName : 'one',
show : true
}, {
herf : '../button.html',
imagePath : '../images/icon_nav_button.png',
gridName : 'two',
show : false
}, {
herf : '../button.html',
imagePath : '../images/icon_nav_button.png',
gridName : 'three',
show : true
}, {
herf : '../button.html',
imagePath : '../images/icon_nav_button.png',
gridName : 'four',
show : true
}, {
herf : '../button.html',
imagePath : '../images/icon_nav_button.png',
gridName : 'five',
show : true
}, {
herf : '../button.html',
imagePath : '../images/icon_nav_button.png',
gridName : 'six',
show : true
} ]
};
var tpl=document.getElementById().innerHtml;
var html = juicer(tpl, gridData); // 得到渲染結果,需要放到DOM元素中才能在頁面中顯示
console.log(html)// 編譯模板並立即渲染出結果,如沒有下一句頁面看不到結果
$("#result").html(html);
</script>
根據註釋不做過多解釋!