1. 程式人生 > >jQuery 外掛(二) —— jQuery 模板

jQuery 外掛(二) —— jQuery 模板

#####一、使用

<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>