الگو (template)
تگ الگو (template) محتوای آماده را پنهان نگه می دارد. بعداً با جاوااسکریپت نمایش می دهیم. «جاوااسکریپت (JavaScript)» زبان رفتار صفحه است.
کاربرد تگ الگو (template)
وقتی قطعه HTML را چندبار می خواهی، اما هنوز نه، از الگو استفاده کن. مرورگر آن را رندر نمی کند تا خودت بگویی «الان». سپس با اسکریپت، محتوا را کپی و درج کن.
مثلاً کارت محصول، آیتم لیست، یا هشدار تکراری. همچنین برای تست پشتیبانی مرورگر هم نمونه داریم. برای جدول ها و سلول ها هم به سلول جدول (td) سر بزن.
مثال 1: نشان دادن محتوای پنهان با دکمه
<button onclick="showContent();">Show hidden content</button>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
<\/script>
مثال 2: ساخت چند آیتم از یک الگو
<template>
<div class="myClass">I like: </div>
</template>
<script>
let myArr = [
"Audi",
"BMW",
"Ford",
"Honda",
"Jaguar",
"Nissan"
];
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let item = temp.content.querySelector("div");
for (let i = 0; i < myArr.length; i++) {
let a = document.importNode(item, true);
a.textContent += myArr[i];
document.body.appendChild(a);
}
}
<\/script>
مثال 3: تست پشتیبانی مرورگر
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
<\/script>
نکته: محتوای داخل الگو تا زمانی که کپی نشود، در صفحه دیده نمی شود. برای کار با فرم ها هم می توانی از باکس متن (textarea) کمک بگیری.
جمع بندی سریع
- تگ الگو محتوا را پنهان نگه می دارد.
- با اسکریپت آن را کپی و درج کن.
- برای آیتم های تکراری عالی است.
- اول بساز، بعداً نمایش بده.
- پشتیبانی مرورگر را می توانی چک کنی.