Kont taf li hemm soluzzjoni nattiva HTML5 biex toħloq faċilment buttuna taqra aktar/inqas accordion biex taħbi u tiżvela kontenut bi LE JavaScript jew CSS. Kompli aqra biex issir taf kif.
il u, It-tikketti HTML5 huma uffiċjalment a element tal-widget ta' żvelar, Iżda l- flimkien ma ' It-tikketti HTML5 jagħtuk a accordion pur HTML biss.
Tifsira ebda JS JEW CSS hija meħtieġa. Kemm hu jibred hekk!
Hawn eżempju li juri element sempliċi b'a u, .
Hawn il-kodiċi:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>u hawn kif se tidher:
Aqra iktar
Dan huwa accordion nattiv HTML5 biex jaħbi u jiżvela l-kontenut. Pjuttost jibred, hux?
Kif taħdem? il tikketta sservi bħala tgeżwir għal element li jista 'jinfetaħ jew jingħalaq. L-utent irid ikklikkja fuq it-tikketta li hija l- tag biex tiftaħ jew tagħlaq l-element.
Xi ngħidu dwar l-istil u l-imġieba?
Stili
Tista' tapplika l-istil CSS biex tippersonalizza d-dehra tal-kaxxa tat-test jiżvela. Dan hawn taħt jagħti stil ta' interface b'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;
}B'mod awtomatiku, il-cursor jidher bħal vleġġa, imma jekk trid li tkun a idejn tipponta minflok imbagħad uża dan:
details {
cursor: pointer;
}Imgieba
L-issettjar tal-imgieba huwa limitat ħafna, hemm verament ħaġa waħda biss li tista 'tagħmel u li hija li tagħmel it-test żvelat miftuħa awtomatikament.
Biex tibda l-accordion fl-istat miftuħ tiegħu, żid il-Boolean tiftaħ attribut lill - tikketta:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Aqra iktar
Dan huwa accordion nattiv HTML5 biex jaħbi u jiżvela l-kontenut. Pjuttost jibred, hux?
Liema attributi nista' nuża?
L-attributi hawn taħt jistgħu jintużaw għall- tikketta:
| Attribut | valur | sommarju |
|---|---|---|
| tiftaħ | tiftaħ | In-nuqqas huwa mhux miftuħ. |
| id | valur | Jipprovdi identifikatur uniku. |
| klassi | ismijiet tal-klassi | Jassenja l-ismijiet tal-klassi lill-element. |
| istil | CSS-valuri | Jassenja stili CSS lill-element. |
Allura x'inhuma l-limitazzjonijiet? Dejjem hemm qabda, hux?
L-ebda appoġġ għall-Internet Explorer
Dan l-accordion HTML5 biss mhux se jaħdem fl-ebda verżjoni tal-Internet Explorer. Jekk ikollok bżonn li tappoġġja IE11 ser ikollok tuża soluzzjoni alternattiva differenti billi tuża JQuery. Il-browsers l-oħra kollha jappoġġjaw u, .
Ebda animazzjonijiet jew transizzjonijiet personalizzati
Filwaqt li tista 'timmodifika u tfassal id-dehra (kif muri hawn fuq), ma tkun tista' tagħmel xi test tiżvela animazzjonijiet jew transizzjonijiet. Jekk trid tagħmel dan, ikollok bżonn soluzzjoni CSS/JSS accordion oħra.
Screen readers u aċċessibbiltà
Dan huwa indiġenu HTML5 u *għandu jkun* aċċessibbli iżda nstab li t-test attwali żvelat mhux dejjem jitħabbar b'mod korrett minn screen reader.
Referenzi:
