HTML < template> Tag
ဥပမာ
စာမျက်နှာဖွင့်သည့်အခါ ဝှက်ထားမည့် အကြောင်းအရာအချို့ကို ထိန်းထားရန် <template> ကို အသုံးပြုပါ။ ၎င်းကိုပြသရန် JavaScript ကိုသုံးပါ-
<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() {
var temp =
document.getElementsByTagName("template")[0];
var clon =
temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
စာမျက်နှာ <template>ကိုဖွင့်သည့်အခါ အသုံးပြုသူထံမှ ဝှက်ထားသော HTML အကြောင်းအရာအချို့ကို သိမ်းဆည်းရန် tag ကို ကွန်တိန်နာအဖြစ် အသုံးပြုသည်။
အတွင်းမှ အကြောင်းအရာကို <template>JavaScript ဖြင့် နောက်ပိုင်းတွင် ပြန်ဆိုနိုင်ပါသည်။
သင် <template>ထပ်ခါထပ်ခါသုံးလိုသော HTML ကုဒ်အချို့ရှိလျှင် tag ကို သင်အသုံးပြုနိုင်သော်လည်း ၎င်းကိုမတောင်းမချင်း ၎င်းကိုသုံးနိုင်သည်။ tag မပါဘဲ ၎င်းကိုလုပ်ဆောင်ရန် ၊ <template>ဘရောက်ဆာမှ ကုဒ်ကို render လုပ်ခြင်းမှ ကာကွယ်ရန် JavaScript ဖြင့် HTML ကုဒ်ကို ဖန်တီးရပါမည်။
Browser ပံ့ပိုးမှု
| Element | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ
<template>tag သည် HTML တွင် Global Attributes ကို ပံ့ပိုးပေးသည် ။
နောက်ထပ် ဥပမာများ
ဥပမာ
array တစ်ခုစီရှိ အကြောင်းအရာတစ်ခုစီအတွက် div element အသစ်တစ်ခုဖြင့် ဝဘ်စာမျက်နှာကို ဖြည့်ပါ။ div ဒြပ်စင်တစ်ခုစီ၏ HTML ကုဒ်သည် နမူနာပုံစံဒြပ်စင်အတွင်းတွင် ရှိနေသည်-
<template>
<div class="myClass">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar",
"Nissan"];
function showContent() {
var temp, item, a,
i;
temp =
document.getElementsByTagName("template")[0];
item =
temp.content.querySelector("div");
for (i = 0; i < myArr.length; i++) {
a = document.importNode(item,
true);
a.textContent += myArr[i];
document.body.appendChild(a);
}
}
</script>
ဥပမာ
<template> အတွက် ဘရောက်ဆာ ပံ့ပိုးမှုကို စစ်ဆေးပါ-
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>