jQuery 外掛(二) —— jQuery 模板
阿新 • • 發佈:2018-12-28
#####一、使用
<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>