Video: Emergence – How Stupid Things Become Smart Together 2024
Alle jQuery UI-widgene gir seg tilpasning til CSS3. De fleste endringene du gjør, omhandler bruk av innebygde funksjoner på riktig måte. Du kan også arbeide med CSS som jQuery brukergrensesnittet bruker til å formatere widgets for å produsere spesialeffekter.
Selvfølgelig, hvis ikke noe annet, kan du alltid bruke JavaScript til å endre den faktiske widgetadfæren etter behov. Poenget er at du kan endre widgets (for eksempel Spinner) for å møte spesifikke behov uten å måtte gjenoppfinne hjulet. Modifikasjonene er vanligvis korte og enkle å gjøre, noe som betyr at du ikke trenger å starte fra bunnen av med en ide du må kode for hånden.
Spinnere er populære fordi du kan bruke dem til å kontrollere brukerinngang på en rekke måter. Tanken er å gi kontroll for data som vanligvis er variabel, slik at du ikke kan bruke noe som en rullegardinliste. En av de mest interessante bruksområdene til spinnere er vist på Ben Knows Code-siden.
I dette tilfellet viser forfatteren hvordan du skal utføre oppgaver som å flytte plasseringen av pilene og opprette en alfabetisk spinner. Eksemplet som brukes her, spiller av eksemplet på dette nettstedet, men det er litt mer greit og lettere å forstå. Når du forstår dette eksemplet, kan du gå til Ben Knows Code-siden og forstå det eksemplet med en gang.
Spinnere behandler normalt numerisk inngang. Du kan imidlertid ha behov for alfabetisk inngang i stedet. Hvis du vil opprette en alfabetisk inngang, må du gi utseendet til bokstaver uten å bruke bokstaver, fordi Spinner-widgeten bare fungerer med tall. Følgende eksempel tar en standard jQuery UI Spinner-widget og forvandler den til å bruke bokstaver i stedet for tall.
$ (funksjon () {var CurrentValue = 65; var ThisSpinner = $ ("Spinner"). Spinner ({// Still inn minimumet til koden for A // og maksimumet til koden for Z. min: 65, max: 90, // Når brukeren begynner å spinne spinneren, // konvertere verdien til et tall og skjul // tekst fra visningen. Start: funksjon (ui, hendelse) {ThisSpinner.spinner ", CurrentValue); $ (" # Spinner "). Css (" farge "," gjennomsiktig ");}; // Når brukeren slutter å spinne spinneren, // lagre tallverdien, konvertere den til en // bokstav (CurrentValue = ThisSpinner. spinner ("value"); ThisSpinner. spinner ("verdi", String. fromCharCode (CurrentValue)); $ ("# Spinner"). css ("farge", "grønn");}});});
Koden begynner med å opprette en variabel, CurrentValue, som sporer den numeriske verdien til spinneren.Verdien, 65, er den numeriske ekvivalenten til bokstaven A. Så begynner spinneren med en verdi på A, men den lagrer denne verdien som nummer 65.
Skaper spinner, ThisSpinner, kommer neste. Du må angi minimums- og maksimumverdier som reflekterer de numeriske verdiene for A og Z. Denne samme teknikken kan fungere for alle serier av bokstaver. Du kan like lett bruke små bokstaver, hvis ønskelig. For øvrig vil noen serier virke, inkludert spesialtegn. Det er også mulig å bruke denne tilnærmingen for tellerte verdier.
Den enkleste tilnærmingen gir håndterere for start og stopp hendelser. Når brukeren klikker på en av de to pilene, starter den en snurrhendelse. Endringen skjer, og deretter stopper spinnet. For at spinner skal fungere riktig, må verdien attributt inneholde en numerisk verdi.
Koden setter verdi for CurrentValue, som er koden som tilsvarer det valgte bokstaver. Men på dette punktet kan du se den numeriske verdien som tekst i spinneren, som er distraherende. For å unngå at dette skjer, stiller hendelseshandleren også tekstfargen til gjennomsiktig, slik at brukeren ikke kan se teksten på skjermen.
Pass på at du tenker på hvordan du angir fargene for skjulte gjenstander. Det er en tendens med noen utviklere til å sette den skjulte elementets farge i bakgrunnsfargen, men bakgrunnsfargen kan endres. Selv om mange referanser ikke oppgir det, er en av de anerkjente farger gjennomsiktige, noe som ikke betyr noe farge i det hele tatt. Bruk alltid gjennomsiktige objekter når du vil skjule noe.
Stopphendelsesbehandleren lagrer den nye spinnerverdien i CurrentValue. Den konverterer deretter tallverdien fra et tall, for eksempel 65, til et brev, for eksempel A. Koden endrer deretter tekstfargen til grønt slik at brukeren kan se bokstaven på skjermen.
Dette eksemplet endrer også noen av widgetstypene. Disse stilene er oppført som en del av jQuery UI CSS-filen. I dette tilfellet vil du ikke at brukeren skal kunne skrive mer enn ett tegn, slik at bredden på widgeten endres for å akseptere bare ett bokstav. I tillegg endres tekstfargen til grønt, som vist her:
. ui-spinner {width: 45px;}. ui-spinner-input {color: green;}
Ved hjelp av en kombinasjon av hendelser og CSS kan du lage alle slags tilpassede effekter med noen av jQuery UI-widgets. Alt du trenger å gjøre er å eksperimentere litt for å skape noe virkelig interessant utgang.
