Fantatrao ve fa misy vahaolana HTML5 teratany mba hamoronana mora foana bokotra accordion mamaky bebe kokoa / kely hanafenana sy hanehoana votoaty miaraka TSY MISY JavaScript na CSS. Vakio hatrany mba hahitana ny fomba.
The ary HTML5 tags dia ofisialy a singa widget fampahafantarana, Fa ny ampiarahina amin'ny HTML5 tags dia hanome anao a akordiona madio HTML ihany.
Meaning tsy misy JS OR CSS ilaina. Tena mahafinaritra izany!
Ity misy ohatra mampiseho singa tsotra misy a ary .
Ity ny kaody:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>ary ho toy izao ny fijery azy:
Hamaky bebe kokoa
Ity dia akordion HTML5 teratany hanafina sy hanambara votoaty. Tena tsara, sa tsy izany?
Ahoana no miasa? The tag dia toy ny fonon'ny singa azo sokafana na hikatona. Ny mpampiasa dia tsy maintsy manindry ny etikety izay ny tag hanokafana na hanidy ny singa.
Ahoana ny amin'ny styling sy ny fitondrantena?
Styles
Azonao atao ny mampihatra ny styling CSS hanamboarana ny endriky ny boaty lahatsoratra. Ity ambany ity dia manome style interface misy tabbed:
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;
}Amin'ny alàlan'ny default, ny cursor dia miseho toy ny zana-tsipìka, fa raha tianao ho a nanondro tanana fa ampiasao ity:
details {
cursor: pointer;
}fihetsika
Ny fametrahana ny fitondran-tena dia tena voafetra, tsy misy afa-tsy ny zavatra azonao atao ary izany dia ny fanaovana ny lahatsoratra nambara misokatra amin'ny alàlan'ny default.
Mba hanombohana ny akorandriaka amin'ny endriny misokatra dia ampio ny Boolean misokatra toetra ny Tags:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Hamaky bebe kokoa
Ity dia akordion HTML5 teratany hanafina sy hanambara votoaty. Tena tsara, sa tsy izany?
Inona no toetra azoko ampiasaina?
Ireo toetra etsy ambany dia azo ampiasaina ho an'ny Tags:
| toetra | sarobidy | famintinana |
|---|---|---|
| misokatra | misokatra | Ny default dia tsy misokatra. |
| id | sarobidy | Manome famantarana tokana. |
| am-pianarana | anaram-pianarana | Manendry ny anaran'ny kilasy amin'ilay singa. |
| fomba | CSS-values | Manendry fomba CSS amin'ilay singa. |
Inona àry no fetra? Misy foana ny tratra, sa tsy izany?
Tsy misy fanohanana ny Internet Explorer
Ity akordona HTML5 irery ity dia tsy mandeha amin'ny dikan-teny Internet Explorer rehetra. Raha tsy maintsy manana azy io ianao dia manohana ny IE11 dia tsy maintsy mampiasa vahaolana hafa ianao amin'ny fampiasana JQuery. Manohana ny navigateur hafa rehetra ary .
Tsy misy sarimiaina namboarina na fifindrana
Na dia azonao atao aza ny manova sy manamboatra ny bika aman'endriny (araka ny aseho etsy ambony), dia tsy ho vitanao ny hanao sary mihetsika na fiovana. Raha te hanao izany ianao dia mila vahaolana accordion CSS/JSS hafa.
Mpamaky efijery sy fahafahana miditra
teratany io HTML5 ary *tokony* azo idirana nefa hita fa ny tena soratra nambara dia tsy ambaran'ny mpamaky ecran tsara foana.
References:
