Sissejuhatus HTML-i rippmenüüsse
HTML-i ripploend on oluline element vormi loomiseks või valikloendi kuvamiseks, millest kasutaja saab valida ühe või mitu väärtust. Sellist HTML-i loendit nimetatakse ripploendiks. Selle loomiseks kasutatakse väärtusega silti. See võimaldab kasutajal valida mis tahes valiku vastavalt oma valikule. Alati on hea võimalus kasutada ripploendit, kui teate optsiooni väärtust, nii et üks saab seada mis tahes väärtuse vaikeatribuutiks ja teised valikuliseks väärtuseks.
Vaatame, kuidas ripploendit luuakse:
Süntaks:
option1
option2
option3
option3
Näide:
Red
Purple
Nagu ülaltoodud süntaksist nähtub, on ripploendi loomiseks kasutatav silt. Valitud märgendisse lisatud silt on valimisloendi atribuudi väärtus või atribuudid, väärtus kuvatakse ilmastikuvõimaluse kuvamise korral, see on keelatud või muude omadustega. valimine1, 2… .nimeks. CSS-i abil saame oma valikute loendisse anda efekte, mis on võimelised seadma positsioone nagu suhteline, absoluutne jne, määrama laiuse ja tegema paljusid muid funktsioone.
Taustavärvi või värvi määramine hõljukile, kasutades koodi:
.dropdown a:hover(
Background-color: color_name;
)
Ripploendi positsioon jaguneb kaheks väärtuseks: positsioon: suhteline, mida kasutatakse loendi sisu kuvamiseks täpselt loendi valimise nupu all. Positsiooni abil: absoluutne;
Min-laius on üks omadustest, mida kasutatakse ripploendile konkreetse laiuse määramiseks. Saame seda seadistada nii kaua, kui meie rippmenüüst, seades laiuse 100% -ni. Süntaksi kohal on määratletud ühe atribuudi valimine, nüüd näeme, kuidas üksuste loendist valitakse mitu võimalust.
Süntaks:
option1
option2
Näide:
Math
English
Science
Biology
Kuidas ripploend HTML-is töötab?
Pärast süntaksi uurimist näeme nüüd, kuidas täpselt ripploend HTML-is töötab. Sildis kasutatakse järgmisi atribuute:
- Nimi: see atribuut on kasulik nime määramiseks juhtelemendile, mis saadetakse serverisse, et see tuvastataks, ja võtab vajaliku väärtuse.
- Mitu: kui atribuudiks on seatud “mitu”, saab kasutaja valida loendist mitu väärtust.
- Suurus: atribuuti suurust kasutatakse ripploendi ümber konkreetse suurusega kerimisboksi määratlemiseks. See on abiks ka loendist mitme nähtava valiku kuvamisel.
- Väärtus: see atribuut näitab valikut, kui valitud on loend.
- Valitud: valitud atribuudid võimaldavad juba lehe laadimise alguspunktis näidata loendist juba valitud loendit.
- Silt: sildi atribuudid toimivad veel ühe lähenemisviisina valikute väärtuse märgistamisele.
- Keelatud: kui tahame näidata ripploendit koos keelamisvõimalusega, siis on seda võimalik HTML-i loendis kasutada atribuuti keelatud.
- onChange: Kui kasutaja valib ripploendist kellegi, valitakse sündmus üksuse valimisel.
- onFocus: alati, kui kasutaja hõljub hiirega loendis valiku valimiseks, käivitab see üksuse valimiseks sündmuse.
- Vorm: seda atribuuti kasutatakse ühe või mitme vormingu määratlemiseks, mis on valitud väljaga seotud.
- keelatud: peaksime selle atribuudi abil oma ripploendi kasutajalt keelama.
- nõutav: kui soovite mõnda vormi täita, tahame näidata, et see väli on vajalik enne loendi saatmist mis tahes väärtuse loendist valimiseks, seega määratleme antud juhul, et kasutaja peab valima loendist ühe väärtuse.
HTML-koodi näited
Järgmised näited näitavad, kuidas täpselt ripploendit kasutatakse:
Näide nr 1
Kood:
DropDown List
Seitse maailma imet
Taj Mahal
Hiina suur müür
Kristus Lunastaja Satue
Machu Picchu
Chichen Itza
Rooma Colosseum
Petra
Ülaltoodud näide sisaldab erinevaid võimalusi, nagu keelatud, valitud, nõutavad jne, mida kuvatakse väljundkuval.
Väljund:
Näide 2
Kood:
Mumbai
Pune
Nagpur
Solapur
Latur
Siin saab valida mitu suvandit. Palun vajutage ctrl-klahvi ja valige korraga mitu suvandit.
funktsioon multipleFunc () (document.getElementById ("multiselectdd"). multiple = true;
)
Nagu on näidatud allolevas ekraanipildis, vajutage ripploendist mitme valiku valimiseks vastavat nuppu ja CTRL-i vajutamisega mitu võimalust.
Väljund:
Näide 3
Kood:
.dropdownbtn (
background-color: black;
color: white;
padding: 12px;
font-size: 12px;
)
.dropdowndemo(
position:fixed;
display: block;
)
.dropdownlist-content (
display: none;
position: absolute;
background-color: greenyellow;
min-width: 120px;
z-index: 1;
)
.dropdownlist-content a (
color: darkblue;
padding: 14px 18px;
display: block;
)
.dropdownlist-content a:hover (background-color: lightcyan;)
.dropdowndemo:hover .dropdownlist-content (display: block;)
.dropdowndemo:hover .dropdownbtn (background-color: blue;)
Hõljutage rippmenüü demo
HTML moodustab elemendi
Lingid
Rippmenüü
Sisestusväli
Nupp
Raadio nupud
Ripploend avaneb hõljumisefekti korral.
Väljund:
Järeldus
Võib järeldada, et ripploendit kasutatakse valiku loendist valiku valimiseks. Seda kasutatakse ühe või mitme valiku valimiseks korraga. Kasutajad saavad valida loendist valiku vastavalt oma valikule, nii et see muutub kasutajasõbralikumaks. Ülaltoodud atribuute kasutatakse koos märgenditega mitmesuguste valimistoimingute tegemiseks ripploendist.
Soovitatav artikkel
See on HTML-i ripploendi juhend. Siin käsitleme HTML-i ripploendi toimimist ja selle näiteid koodi rakendamisel. Lisateavet leiate ka meie muudest seotud artiklitest -
- Ülevaade HTML-i stiili atribuudist
- 10 HTML-i eelist
- HTML-raamide erinevad tüübid süntaksiga
- 8 parimat HTML-i paigutuse elementi
- Kuidas luua raadionuppu?