Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

HTMLالوسم <template>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

نستخدم الوسم <template> على هذا النحو <template>content</template> لتجهيز المحتوى الذي سيتم عرضه لاحقاً في الصفحة بشكل مخفي و عند الحاجة لإظهاره يمكن إنشاء نسخة منه بواسطة جافا سكربت.

مكان الكلمة content نضع كل المحتوى الذي نريد تجهيزه فيه.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <template>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
26 13 22 15 8 مدعوم 26 22 ؟ 8 1.5

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بكتابة كود الجافا سكربت الأساسي الذي يسمح بمعرفة ما إن كان المتصفح يدعم الوسم <template> أم لا يدعمه.

المثال الأول

<script>
// سيتم تنفيذ أمر الطباعة الموضوعة بداخله <template> في حال كان المتصفح يدعم الوسم
if (document.createElement("template").content) {
document.write("Your browser supports the template tag");
}
// سيتم تنفيذ أمر الطباعة الموضوعة بداخله <template> في حال كان المتصفح لا يدعم الوسم
else {
document.write("Your browser doesn not supports the template tag");
}
</script>
<script> // سيتم تنفيذ أمر الطباعة الموضوعة بداخله <template> في حال كان المتصفح يدعم الوسم if (document.createElement("template").content) { document.write("Your browser supports the template tag"); } // سيتم تنفيذ أمر الطباعة الموضوعة بداخله <template> في حال كان المتصفح لا يدعم الوسم else { document.write("Your browser doesn not supports the template tag"); } </script>

جرب الكود



في المثال التالي قمنا بوضع زر عادي في الصفحة و تحته وسم <template> وضعنا فيه عنوان و فقرة.
عند النقر على الزر سيتم إنشاء نسخة من المحتوى الموجود في الوسم <template> و إضافتها في الصفحة.

المثال الثاني

<!-- cloneTemplateContent() عند النقر على هذا الزر سيتم استدعاء الدالة
<template> التي تقوم بإنشاء نسخة من المحتوى المجهز بداخل الوسم -->
<button onclick="cloneTemplateContent()">Clone template content</button>
<!-- هنا قمنا بتجهيز المحتوى الذي سيتم إنشاء نسخة منه عند النقر على الزر -->
<template id="demo">
<h2>The Template Tag</h2>
<p>The temaplte tag is used to render the content after the
page is loading.</p>
<hr>
</template>
<!-- التي تقوم بإنشاء و إظهار cloneTemplateContent() هنا قمنا بتعريف الدالة
عندما يتم استدعاءها <template> نسخة من المحتوى الموضوع بداخل الوسم -->
<script>
function cloneTemplateContent() {
if (document.createElement("template").content) {
var temp = document.getElementById("demo");
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
else {
alert("Oops.. Your browser doesn not supports the template tag!");
}
}
</script>
<!-- cloneTemplateContent() عند النقر على هذا الزر سيتم استدعاء الدالة <template> التي تقوم بإنشاء نسخة من المحتوى المجهز بداخل الوسم --> <button onclick="cloneTemplateContent()">Clone template content</button> <!-- هنا قمنا بتجهيز المحتوى الذي سيتم إنشاء نسخة منه عند النقر على الزر --> <template id="demo"> <h2>The Template Tag</h2> <p>The temaplte tag is used to render the content after the page is loading.</p> <hr> </template> <!-- التي تقوم بإنشاء و إظهار cloneTemplateContent() هنا قمنا بتعريف الدالة عندما يتم استدعاءها <template> نسخة من المحتوى الموضوع بداخل الوسم --> <script> function cloneTemplateContent() { if (document.createElement("template").content) { var temp = document.getElementById("demo"); var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } else { alert("Oops.. Your browser doesn not supports the template tag!"); } } </script>

جرب الكود

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.

نصائح و ملاحظات

إذاً يمكنك الإستفادة من هذا الوسم في حال كنت تريد تجهيز محتوى في الصفحة و هذا المحتوى قد تحتاج عرضه نفسه لاحقا أكثر من مرة.

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة