این آموزش در تاریخ ۱۳۹۸/۰۲/۱۵ آپدیت شده است.
آموزش تگ details در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ details در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Details در HTML
تگ details تگی است که با استفاده از آن میتوان یک محتوا را بصورت پیش فرض در حالت مخفی / غیرقابل نمایش ایجاد کرد ، تا کاربر بتواند با کلیک بروی این تگ محتوای مخفی شده را مشاهده نماید.
Free-Learn
مثال از تگ details در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 |
<body> <details> <summary>روی من کلیک کن</summary> <p>Salam Khobi?</p> <p>Man Sadegh Hastam.</p> </details> </body> |
مثال شماره ۲ : سفارشی سازی تگ details با استفاده از CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> summary { color:blue; cursor:pointer; padding:5px; border-radius:10px; } summary:hover{ background-color:#f2f2f2; } .mycontent { background-color:#f2f2f2; padding:3px 10px; border-radius:10px; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ details در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | ۱۲٫۰ | ۴۹٫۰ | ۱۵٫۰ | ۶٫۰ | خیر |
Free-Learn
جدول صفات تگ details در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
(علامت 
یعنی در HTML5 اضافه شده است)
| نام صفت | مقدار | توضیح |
|---|---|---|
| open | open | مشخص میکند که محتوا بصورت پیش فرض نمایش داده شود. () |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ details از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
تگ details یک تگ جدید/اضافه شده در HTML5 می باشد.
با استفاده از تگ summary میتوان عنوان (یک عنوان که به کاربر نمایش داده شود) را مشخص کرد، و با کلیک بروی آن میتوان محتوای مخفی شده را نمایش داد و برعکس با کلیک دوباره بروی آن میتوان محتوا را مخفی نمود.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ details را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
details { display: block; } |
