html/jsp 利用juicer模版添加页面标签内容

最新推荐文章于 2021-07-02 05:54:01 发布

QD_阿乐

最新推荐文章于 2021-07-02 05:54:01 发布

阅读量1.4k

点赞数

分类专栏： javaScript 文章标签： append javascript html

本文链接：https://blog.csdn.net/qd_ale113/article/details/50099107

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

运用juicer这个js框架真的很方便，简化了原先利用append等添加内容；但是目前juicer支持的数据类型好像只有json,首先引用js文件

<script type="text/javascript" src="${contextPath }/js/juicer-min.js"></script>
<script type="text/javascript" src="${contextPath }/js/vanwins.lib.min.js"></script>

然后这里是页面的一些标签

在js里面进行操作，首先建立模版，获取这个模版，把json数据放到模版里面，将获取数据的模版放到最外层的div中

<script type="text/javascript">
var json={
           "maxInfo":{
	              "matter":"【卫生工具换新】各部门前往后勤部领取卫生工具",
	   
	   }
};
var maxinfo = $("#Info").html();
var compiled = juicer(maxinfo, json);
$(".maxEvent").html(compiled);
</script>

<script id="Info" type="text/template">
<div class="tit">
	<p>最新公告</p>
</div>
<div class="cont">
	{@if maxInfo.img.indexOf("none.png")<0}	
	<img src="&{maxInfo.img}"/>
	{@/if}
	<p>
	    <span>{@if maxInfo.matter.match(/【.*】/)!=null}&{maxInfo.matter.match(/【.*】/)}{@/if}
	    </span>
		&{maxInfo.matter.replace(/【.*】/, "")}
	</p>
</div>      
</script>

需要注意的是，这里取值的方式不同，应该是可以自定义的，我这里用的是用&｛｝