‎‎تگ جزئياتHTML <details> Tag -‎

Previous >    <Next  

‎‎مثال ـ استفاده از‎<details>‎

‎ 
 <details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

--(go to editor for change code and run)

‎‎تعريف وكاربردDefinition and Usage -‎

‎تگ‎<details>‎ تگي است كه بكمك آن ميتوان جزئيات يك محتوا را از ديد كاربر مخفي ‎نمود، اما در صورت تقاضا يا كليك برخلاصه آن ظاهر يا پنهان ميشود.

‎ازتگ فوق ميتوان براي ايجاد وبحث هاي تعاملي استفاده كر.د، كه بتوانند آنرا باز وبسته كنند. ‎همچنين ميتوان براي كوتاه نمودن نمايش صفحه آنرابكاربرد ودر صورت ضرورت آنرا به نمايش در آورد

‎‎در تگ فوق هر نوع محتوائي را ميتوان در دل آن قرار داد.

‎

‎نكته ـ تگ‎<summary>‎ براي ارتباط با محتوي تگ ‎<details>‎ ‎مورد استفاده قرارميگيرد، محتوي اين قابل مشاهده است .تگ خلاصه در دل تگ جزئيات قرار ميگيرد.

‎‎پشتيباني مرورگرBrowser Support -‎

‎اعداد مشخص شده در جدول اولين نسخه مرورگرست كه بطور كامل تگ‎<details>‎ ‎پشتيباني ميكنند.

‎
‎Element‎ Chorome Edge Firefox Safari Opera
‎‎<details>‎‎ ‎‎12.0‎ ‎‎79.0‎ ‎‎49.0‎ ‎‎6.0‎ ‎‎15.0‎

‎‎ويژگي هاAttributes -‎

‎
‎‎ويژگي ‎‎مقدار ‎‎شــرح
‎open‎ ‎open‎‎ ‎‎مشخص ميكند كه محتوي براي كاربربايد قابل مشاهده با.شد

‎‎ويژگي هاي جهانيGlobal Attributes -‎

‎‎تگ‎<details>‎ از ويژگي هاي جهاني HTML پيروي ميكند .

‎‎ويژگي هاي رويداديEvent Attributes -‎

‎‎تگ فوق همجنين از ويژگي هاي رويدادي پيروي ميكند.

‎‎مثال بيشتر

‎‎مثال ـ استفاده ازCSS براي استايل ‎<details> , <summary>‎

‎ 
<html>
<style>details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style><body>

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

</body>
</html>

--(go to editor for change code and run)

‎‎تنظيمات پيش فرضDefault CSS Settings -‎

‎‎اغلب مرورگرها محتوي تگ جزئيات را با تنظيمات پيش فرض زير نمايش ميدهند.

‎ 
details {
  display: block;
}

‎مرجع كامل تگهايHTML‎
‎مرجع كامل ويژگيهايHTML‎

Previous >    <Next