林一天
于 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
联系客服
