‎‎تگ خلاصهHTML <summary> Tag -‎

Previous >    <Next  

‎‎مثال ـ استفاده از عنصر‎<summary>‎

‎ 
 <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 -‎

‎تگ‎<summary>‎ براي عنصر ‎<details>‎ يك عنوان ياتيترقابل مشاهده ‎تعريف مي نمايد .اين متن ميتواندقابل كليك برايview/hide عنصر detials باشد .

‎

‎‎توجه ـ عنصر‎<summary>‎ اولين عنصراولادي‎<details>‎ ميباشد.

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

‎اعداد مشخص شده در جدول نشان دهنده اولين نسخه مرورگراست كه از تگ فوق بطور كامل پشتيباني ‎ميكند.

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

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

‎‎تگ‎<summary>‎ از ويژگي هاي جهاني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 -‎

‎‎اغلب مرورگرها نمايش عنصر‎<dt>‎ مطابق تنظيمات پيش فرضي زيرانجام ميدهند .

‎ 
summary {
  display: block;
}

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

Previous >    <Next