For å style elementet, bør CSS være nok. Men, det er ikke nok nok med hensyn til tilgjengelighet. Vi presenterer EasyDropDown.js, en gratis jQuery-plugin for å dekke alle disse feilene.
EasyDropDown.js kan enkelt style det gammeldags utvalgselementet på websiden din med mange funksjoner. Etter elementet har blitt brukt med dette pluginet, vil det få full tastaturkontroll med tekstsøk. Dette verktøyet gir også en indre rulle for elementer i lange lister for å begrense rullegardinmenyen. Skjema og validering er også tilgjengelig som hjelper med kompatibilitet.
Installasjon
For å installere EasyDropDown, ta først med jQuery-biblioteket til websiden din. Pass på at du også inkluderer javascript (få det her) slik:
Og CSS-filen inne i head taggen:
.. ..
Hvis du bruker et annet tema, må du sørge for å kopiere filene i webmappen din. Ikke bekymre deg fordi du ikke trenger å inkludere dem i HTML for å ringe dem.
Styling Velg
Når du bruker EasyDropDown.js, kan du bygge en tilpassbar rullegardinmeny med en ren, semantisk markering. De select elementene kan bare utformes i HTML. Du kan deaktivere elementet, definere et valgt alternativ eller legge til en etikett enkelt .
For å style det må du først og fremst inkludere en dropdown i kodene. En etikett kan legges ved å gi en label inne i alternativet. Her er det grunnleggende oppslaget:
Det er det, du trenger ikke noe egendefinert javascript å legge til. Nå den elendige, gammeldags har blitt til en vakker, fancy drop-down inngang.
Hvis du vil legge til et forhåndsvalgt alternativ, gi du bare rullegardinmenyen med selected attributt. Vi anbefaler at du ikke bruker etiketten med denne innstillingen, da den valgte verdien vil overstyre etiketten .
... ...
Du kan også deaktivere rullegardinmenyen ved hjelp av disabled attributt som slik:
...
Klar til å bruke temaer
EasyDropDown.js kommer med 2 flere klar-til-bruk temaer: Metro og Flat . Hvis du vil bruke temaene, kan du bruke HTML5 data-attribute .
Inne i tag, ring data-settings='{"wrapperClass":"theme-name"}' å bruke et annet tema. Du er velkommen til å endre theme-name med de tilgjengelige tema navnene: metro eller flat . Her er eksemplet:
...
Ved siden av wrapperClass er det flere innstillinger du kan legge til, se dokumentasjonssiden for detaljene. Hvis du er kult med javascript kode, kan du se veiledningen der.
Fresh Resouces for Web Developers-serien har eksistert i rundt 4 år nå, og vedlikehold av denne serien har gitt meg mye innsikt i hvordan nettverket utvikler seg gjennom årene. Det er nye verktøy som kommer ut hver måned for å gjøre webutvikling enklere.I denne delen har vi samlet inn en rekke nye verktøy, som inkluderer JavaScript-biblioteker, et par CSS-biblioteker, og referanse til å forbedre ferdighetene dine. La oss
Jeg ser ofte at bedrifter er mer opptatt av å skaffe nye kunder i stedet for å beholde de eksisterende . Men vet du at det koster fem ganger så mye å tiltrekke seg en ny kunde enn å beholde en eksisterende!Med tanke på hvor viktig det er å beholde dine gamle e-handelskunder for å kjøre gjentatt salg, har jeg skrevet denne artikkelen ved å berøre alle hovedpunkter. Jeg vil d