Оё шумо медонед, ки як ҳалли аслии HTML5 вуҷуд дорад, ки ба осонӣ сохтани аккордеон тугмаи хондани бештар/камтар барои пинҳон ва ошкор кардани мундариҷа бо НЕ JavaScript ё CSS. Хонда шуд, то бидонед, ки чӣ тавр.
Дар ва Тегҳои HTML5 расман а унсури виджетро ошкор мекунад, аммо ҷуфтшуда барчаспҳои HTML5 ба шумо медиҳад аккордеони тозаи HTML.
маъно нест JS ё CSS лозим аст. Ин чӣ қадар сард аст!
Ин аст мисоле, ки унсури оддӣ бо a ва .
Ин аст коди:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>ва ин аст, ки он чӣ гуна хоҳад буд:
Бештар
Ин як аккордеони аслии HTML5 барои пинҳон ва ошкор кардани мундариҷа аст. Хеле сард, дуруст?
Чӣ тавр он кор мекунад? Дар барчасп ҳамчун парпеч барои элементе хизмат мекунад, ки кушода ё пӯшида мешавад. Истифодабаранда бояд нишонаеро, ки он аст, клик кунад барчасп барои кушодан ё пӯшидани элемент.
Дар бораи услуб ва рафтор чӣ гуфтан мумкин аст?
сабкҳои
Шумо метавонед услуби CSS-ро барои танзим кардани намуди қуттии матни ошкор истифода баред. Дар зер услуби интерфейси ҷадвалбандишуда дода шудааст:
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}Бо нобаёнӣ, курсор мисли тирча пайдо мешавад, аммо агар шумо хоҳед, ки он a дасти ишора ба ҷои ин истифода баред:
details {
cursor: pointer;
}Рафтор
Танзими рафторҳо хеле маҳдуд аст, дар ҳақиқат танҳо як коре ҳаст, ки шумо метавонед анҷом диҳед ва он матни ошкоршуда аст бо нобаёнӣ кушоед.
Барои оғоз кардани аккордеон дар ҳолати кушод, мантиқиро илова кунед кушодан хосият ба барчасп:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Бештар
Ин як аккордеони аслии HTML5 барои пинҳон ва ошкор кардани мундариҷа аст. Хеле сард, дуруст?
Кадом сифатҳоро ман метавонам истифода барам?
Атрибутҳои дар поён овардашуда метавонанд барои барчасп:
| хусусиятҳои | арзиши | хулоса |
|---|---|---|
| кушодан | кушодан | Бо нобаёнӣ ин аст кушода нест. |
| id | арзиши | Идентификатори беназирро таъмин мекунад. |
| синф | номҳои синфҳо | Номҳои синфро ба элемент таъин мекунад. |
| услуб | Арзишҳои CSS | Услубҳои CSS-ро ба элемент таъин мекунад. |
Пас чӣ гуна маҳдудиятҳо вуҷуд доранд? Ҳамеша як сайд вуҷуд дорад, ҳамин тавр не?
Дастгирии Internet Explorer нест
Ин аккордеони танҳо HTML5 дар ягон версияи Internet Explorer кор намекунад. Агар шумо бояд IE11-ро дастгирӣ кунед, шумо бояд бо истифода аз JQuery ҳалли дигари бозгаштро истифода баред. Ҳамаи браузерҳои дигар дастгирӣ мекунанд ва .
Аниматсия ё гузаришҳои фармоишӣ вуҷуд надорад
Дар ҳоле, ки шумо метавонед намуди зоҳириро тағир диҳед ва услуб кунед (тавре ки дар боло нишон дода шудааст), шумо наметавонед ягон матни аниматсия ё гузаришро ошкор созед. Агар шумо хоҳед, ки ин корро кунед, ба шумо ҳалли дигари аккордеони CSS/JSS лозим мешавад.
Хонандагони экран ва дастрасӣ
Ин ватанӣ аст HTML5 ва он *бояд дастрас бошад, аммо маълум шуд, ки матни воқеии ошкоршуда на ҳамеша аз ҷониби хонандаи экран дуруст эълон карда мешавад.
АДАБИЁТ:
