Om het element te stijlen, zou CSS voldoende moeten zijn. Maar goed, het is niet helemaal genoeg in termen van toegankelijkheid. Introductie van EasyDropDown.js, een gratis jQuery-plug-in om al deze tekortkomingen te verhullen .
EasyDropDown.js kan het ouderwetse select element in je webpagina gemakkelijk stijlen met veel functies. Na de element is toegepast met deze plug-in, het zal volledige toetsenbordcontrole verkrijgen met tekstuele zoekactie. Deze tool biedt ook een inner-scroll voor items in lange lijsten om de grootte van de vervolgkeuzelijst te beperken. Vorm en validatie zijn ook beschikbaar, wat de compatibiliteit ten goede komt.
Installatie
Om EasyDropDown te installeren, moet u eerst de jQuery-bibliotheek opnemen in uw webpagina. Zorg ervoor dat u ook het javascript opneemt (download het hier), zoals:
En het CSS-bestand in de head tag:
.. ..
Als u een ander thema gebruikt, kopieert u de bestanden in uw webmap. Maakt u zich geen zorgen, u hoeft ze niet in de HTML-code op te nemen om ze te bellen.
Styling The Select
Wanneer u EasyDropDown.js gebruikt, kunt u een aanpasbaar vervolgkeuzemenu maken met een schone, semantische opmaak. De select elementen kunnen alleen in HTML worden opgemaakt. U kunt het element uitschakelen, een geselecteerde optie definiëren of eenvoudig een label toevoegen .
Om het te stijlen, moet u eerst een dropdown klasse in de tags opnemen. Een label kan worden toegevoegd door een label in de optie op te geven. Dit is de standaardmarkering:
Dat is het, u heeft geen aangepast javascript nodig om toe te voegen. Nu de waardeloze, ouderwetse is veranderd in een mooie, mooie vervolgkeuzelijst.
Als je een voorgeselecteerde optie wilt toevoegen, geef je gewoon je drop-down met het selected attribuut. We raden aan om deze instelling helemaal niet te gebruiken omdat de geselecteerde waarde het label opheft .
... ...
U kunt de vervolgkeuzelijst ook uitschakelen met behulp van het kenmerk disabled zoals:
...
Klaar om te gebruiken Thema's
EasyDropDown.js wordt geleverd met nog 2 kant-en-klare thema's: Metro en Flat . Als u de thema's wilt gebruiken, kunt u HTML5- data-attribute gebruiken.
Binnen in de tag, call data-settings='{"wrapperClass":"theme-name"}' om een ander thema toe te passen. Je kunt de theme-name met de beschikbare themanamen: metro of flat . Hier is het voorbeeld:
...
Naast wrapperClass zijn er nog meer instellingen die u kunt toevoegen, zie de documentatiepagina voor meer informatie. Als je cool bent met JavaScript-code, kun je de zelfstudie daar bekijken.
In webontwerp kan zelfs een klein effect de algehele gebruikerservaring veranderen . dit kan een glitcheffect, een bounce-effect of zelfs een eenvoudig geluidseffect zijn. Een van deze effecten, die tegenwoordig vaak wordt gebruikt in webdesign, is het effect van de muisaanwijzer of mouseover. Dit overgangseffect is te zien als u met uw muis over een bepaald element beweegt dat het naar buiten laat glijden, van kleur veranderen of animeren
In tegenstelling tot wat vaak wordt gedacht, is het vermogen om goed te tekenen niet alleen voorbehouden aan mensen die gezegend zijn met natuurlijk talent. Terwijl sommigen misschien de essentie van tekenen sneller begrijpen dan andere, is de waarheid over de kwestie dat iedereen kan leren hoe goed te tekenen zolang ze over de juiste middelen beschikken