admin使用juicer模板創建jQuery-weui九宮格 示例
林一天
於 2018-08-30 22:30:21 發佈
1191
收藏
分類專欄： 移動web開發 移動 web APP相關開發 文章標簽： 使用juicer模板 jQuery-weui九宮格
版權
移動web開發
同時被 2 個專欄收錄
12 篇文章0 訂閲
訂閲專欄
移動 web APP相關開發
8 篇文章0 訂閲
訂閲專欄
第一步將需要的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>
根據注釋不做過多解釋！
————————————————
版權聲明：本文爲CSDN博主「林一天」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出処鏈接及本聲明。
原文鏈接：https://blog.csdn.net/zhuchenglin830/article/details/82228337
0條評論