آموزش HTML 5 > تگ های جدید HTML 5 > تگ < details >
تگ < details > :
از تگ < details > برای تعیین توضیحات اضافه درباره یک موضوع استفاده می شود
، که کاربر می تواند بر طبق نیاز و انتخاب خود ، آن را مخفی یا نمایان سازد .
به عبارت دیگر تگ < details > ، برای ایجاد یک منو یک منوی متحرک استفاده شده
، که کاربر می تواند آن را با کلیک باز و بسته نماید . هر نوع متن یا تگ دیگر را می
توان درون تگ < details > ، تعیین نمود .
نکته مهم : اگر خاصیت open را برای تگ < details > تعیین نکنید
، محتویات درونی آن به صورت پیش فرض مخفی خواهد بود .
نکته مهم 2 : از تگ < summary >
برای تعیین محتویانت درونی تگ < details > ، استفاده می شود .
هنگامی که کاربر بر روی عنوان تگ < details > کلیک نماید ، این محتویات مخفی
و نمایان می شوند .
شکل کلی تعریف یک تگ < details > بصورت زیر است :
|
syntax
|
<details> محتویان مورد نظر درون تگ
</details>
|
پشتیانی در مرورگر های مختلف :
این تگ فقط در مرورگر کروم و Safari پشتیبانی می شود .
مثال عملی :
در مثال های زیر ، نحوه استفاده از تگ < details > را در 2 حالت متفاوت آن ، در
عمل نمایش داده ایم :
توجه ! : این مثال فقط در مرورگر کروم کار می کند .
|
مثال
|
حالت اول
open عدم تعیین خاصیت
<details>
<summary>Copyright 2008-2013.</summary>
<p> - by Developer1.ir : All Rights Reserved.</p>
</details>
حالت دوم
open تعیین خاصیت
<details open>
<summary>Copyright 2008-2013.</summary>
<p> - by Developer1.ir : All Rights Reserved.</p>
</details>
|
|
خروجی
|
Copyright 2008-2013.
- by Developer1.ir : All Rights Reserved.
Copyright 2008-2013.
- by Developer1.ir : All Rights Reserved.
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :