آموزش تگ template در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ template در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Template در HTML
تگ template تگی است که با استفاده از آن میتوان یک محتوا را در یک صفحه وب قرار داد ولی از نمایش آن در مرورگرها جلوگیری کرد، یعنی در واقع محتویات این تگ در مرورگرها بصورت پیش فرض نمایش داده نمی شود.
حال برای نمایش محتویات تگ template میتوان از جاوااسکرپیت استفاده کرد، پس بطور کلی محتویات تگ template در یک صفحه وب وجود دارد ولی در مرورگرها نمایش داده نمی شود.
Free-Learn
مثال از تگ template در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
در مثال زیر محتویات تگ template با بالا اومدن صفحه نمایش داده نمی شود، ولی با استفاده از یک دکمه آن را ایجاد و نمایش میدهیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <button onclick="showimage()">ایجاد کن و نمایش بده</button> <template> <h2>فری لرن</h2> <img src="images/Logo-Header-2.png"> </template> <script> function showimage() { var temp = document.getElementsByTagName("template")[0]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ template در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | ۲۶٫۰ | ۲۲٫۰ | ۱۵٫۰ | ۹٫۰ | ۱۳٫۰ |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ template تنها از صفات عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
تگ template یک تگ جدید/اضافه شده در HTML5 می باشد.
