jQuery for Beginners (Del 6) - jQuery UI og videre lesing

I vår siste leksjon i dette jQuery for nybegynnere opplæringsserie, skal vi ta en kort titt på jQuery brukergrensesnitt - det mest brukte jQuery-pluginet for å legge til grafiske brukergrensesnitt til webapps. Fra fancy former og visuelle effekter, til drakkbare widgets, spinnere og dialogbokser - jQuery UI gir deg muligheten til å lage rike webgrensesnitt.

Hvis du ikke allerede har det, må du lese gjennom våre tidligere artikler i serien:

• Innledning: Hva er jQuery og hvorfor skal du bryr deg? Gjør Internett interaktivt: En introduksjon til jQuery Å gjøre Internett-interaktiv: En introduksjon til jQuery jQuery er et klientsideskriptbibliotek som nesten alle moderne nettsider bruker - det gjør nettsteder interaktive. Det er ikke det eneste Javascript-biblioteket, men det er den mest utviklede, mest støttede og mest brukte ... Les mer
• 1: Selectors and Basics jQuery Tutorial - Komme i gang: Grunnleggende & Selectors jQuery Opplæringsprogram - Komme i gang: Grunnleggende og Selectors I forrige uke snakket jeg om hvor viktig jQuery er for enhver moderne webutvikler og hvorfor det er kjempebra. Denne uken, jeg tror det er på tide at vi fikk våre hender skitne med noe kode og lærte hvordan ... Les mer
• 2: Metoder Introduksjon til jQuery (del 2): ​​Metoder og funksjoner Introduksjon til jQuery (del 2): ​​Metoder og funksjoner Dette er en del av en igangværende introduksjon til jQuery webprogrammeringsserier. Del 1 dekket grunnleggende om jQuery om hvordan å inkludere det i prosjektet og selektorer. I del 2 fortsetter vi med ... Les mer
• 3: Venter på sidelast og anonyme funksjoner Introduksjon til jQuery (del 3): Venter på siden for å laste og anonyme funksjoner Introduksjon til jQuery (del 3): Venter på siden for å laste inn og anonyme funksjoner jQuery er uten tvil en viktig ferdighet for den moderne webutvikleren, og i denne korte mini-serien håper jeg å gi deg kunnskapen om å begynne å bruke det i dine egne webprosjekter. I ... Les mer
• 4: Hendelser jQuery opplæring (del 4) - Event Lyttere jQuery opplæring (del 4) - Event Lyttere I dag skal vi sparke det oppe og virkelig vise hvor jQuery skinner - hendelser. Hvis du fulgte de tidligere opplæringsprogrammene, bør du nå ha en ganske god forståelse av grunnkoden ... Les mer
• Feilsøking med verktøylinjer for Chrome Utvikle webområdeproblemer med verktøylinjer for Chrome Utviklerverktøy eller Firebug Finn ut nettsideproblemer med Chrome Developer Tools eller Firebug Hvis du har fulgt mine jQuery-opplæringsprogrammer så langt, kan det hende at du allerede har kjørt inn noen kodeproblemer og ikke vet hvordan å fikse dem. Når du møter en ikke-funksjonell bit av kode, er det veldig ... Les mer
• 5: AJAX jQuery opplæring (del 5): AJAX dem alle! jQuery opplæring (del 5): AJAX dem alle! Når vi er i nærheten av vår jQuery mini-opplæringsserie, er det på tide at vi tok en mer grundig titt på en av de mest brukte funksjonene i jQuery. AJAX tillater et nettsted å kommunisere med ... Les mer

Hva er jQuery UI og hvorfor skal jeg bruke den?

jQuery brukergrensesnitt gir deg alle komponentene som er nødvendige for et moderne webprogram med en GUI. For å ha en bedre beskrivelse, er det en samling av widgets.

For en rask ide om hva du kan gjøre med det, bare bla gjennom MakeUseOf. I vår er innholdet egentlig bare skilt divs med en uordnet liste for å fungere som en indeks. Kjør funksjonen jQuery-faner på dem, og de blir magiske til faner. Rått! Du kan til og med laste inn fanens innhold via AJAX hvis du vil.

Siden Belønninger bruker også en “modal popup” dialogboksen for å bekrefte brukerhandlingen og returmeldingene. For å fokusere brukerens oppmerksomhet kan du få dialogboksen til å dimme resten av sidens innhold til samspillet er ferdig.

På vårt svarsted bruker vi den enkle verktøytips funksjon for å gi tips om knapper.

jQuery UI utmerker virkelig når det gjelder skjemaer, noe som gir tilgang til en rekke skyveknapper og plukkere. Jeg er en stor fan av Datovelger Widget meg selv, som du kan laste opp på en vanlig tekstoppføringskasse der brukeren skal skrive inn en dato.

Ser komplisert ut? Kan du forestille deg å kode noe slikt i ren JavaScript? Slik gjør du det med jQuery UI:

$ ( "# DateField") datepicker (.);

Jeg vil ikke bruke mer tid på å forklare hvor fantastisk det er fordi jQuery UI offisielle demoer gir en god oversikt over alle tilgjengelige funksjoner, samt enkle kodeprøver. Les det.

Legge til jQuery UI

Den enkleste måten å komme i gang med jQuery UI, er å legge til følgende linjer i overskriften din - men sørg for at disse blir lagt til etter den viktigste jQuery-referansen, siden jQuery brukergrensesnitt krever at jQuery forhåndsbelastes. Du trenger både en referanse til plugin scriptet, og a stilark som inneholder den visuelle beskrivelsen av disse brukergrensesnittelementene.

>