jQuery 插件(二) —— jQuery 模板

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wuxinwudai/article/details/52493692

#####一、使用

<script id="jqtmpl" type="text/x-jquery-tmpl">
	<div class="title">
		<h3>${title}</h3>
	</div>
	<div class="year">
		{{if year > 3}}
			${year} <img src="oldcar.jpg"/>
		{{else}}
			${year} <img src="newcar.jpg"/>
		{{/if}}		
	<div>
	<div>
		<ul>
		{{each images}}		 //数组遍历 $index 为索引,$value 为值
			<li >${$index + 1}. <img src="${$value}"/></li>
		{{/each}}
		</ul>
	</div>
	{{tmpl}} //其他模板
	{{html}} // 包含 HTML 标签的文本原样输出
</div>
</script>
<script>
// 使用 $.tmplate() 方法创建模板
$.template("jqtmpl",'<div><div class="title"><h3>${title}</h3></div><div class="year">${year}</div></div>');
// 调用模板创建 jQuery 对象
$("#tmpl").tmpl({title:"Car",year:2}).appendTo("#main");
//模板高级特性,{if},{each}等
</script>

猜你喜欢

转载自blog.csdn.net/wuxinwudai/article/details/52493692