Reklame

I vores sidste lektion om dette jQuery for begyndere tutorial serie, vi vil tage et kort kig på jQuery UI - det mest udbredte jQuery-plugin til tilføjelse af grafiske brugergrænseflader til webapps. Fra smarte former og visuelle effekter, til trækbare widgets, spinners og dialogbokse - jQuery UI giver dig magten til at oprette rigtige web-UI'er.

Hvis du ikke allerede har gjort det, skal du sørge for at læse vores tidligere artikler i serien igennem:

  • Introduktion: Hvad er jQuery, og hvorfor skal du passe på? At gøre Internettet interaktivt: En introduktion til jQueryjQuery er et script-bibliotek på klientsiden, som næsten alle moderne websteder bruger - det gør websteder interaktive. Det er ikke det eneste Javascript-bibliotek, men det er det mest udviklede, mest understøttede og mest anvendte ... Læs mere
  • 1: Valg og grundlæggende jQuery-tutorial - Kom godt i gang: Basics & SelectorsSidste uge talte jeg om, hvor vigtigt jQuery er for enhver moderne webudvikler, og hvorfor det er fantastisk. Denne uge tror jeg, det er på tide, at vi får vores hænder beskidte med noget kode og lærte hvordan ...
    instagram viewer
    Læs mere
  • 2: Metoder Introduktion til jQuery (del 2): ​​Metoder og funktionerDette er del af en igangværende introduktion til jQuery-webprogrammeringsserier. Del 1 dækkede grundlæggende oplysninger om jQuery om, hvordan man inkluderer det i dit projekt og vælgere. I del 2 fortsætter vi med ... Læs mere
  • 3: Venter på sideindlæsning og anonyme funktioner Introduktion til jQuery (del 3): Venter på, at siden indlæses og anonyme funktionerjQuery er uden tvivl en væsentlig færdighed for den moderne webudvikler, og i denne korte miniserie håber jeg at give dig viden til at begynde at gøre brug af den i dine egne webprojekter. I... Læs mere
  • 4: Begivenheder jQuery-tutorial (del 4) - BegivenhedslyttereI dag skal vi sparke det op og få vist, hvor jQuery skinner - begivenheder. Hvis du fulgte de tidligere tutorials, skulle du nu have en forholdsvis god forståelse af den grundlæggende kode ... Læs mere
  • Fejlsøgning med Chrome Developer Tools Find ud af problemer med webstedet med Chrome Developer Tools eller FirebugHvis du har fulgt mine jQuery-tutorials indtil videre, har du muligvis allerede fundet nogle kodeproblemer og ikke vidst, hvordan du løser dem. Når man står over for en ikke-funktionel kodekode, er det meget ... Læs mere
  • 5: AJAX jQuery-tutorial (del 5): AJAX dem alle!Da vi nær ved slutningen af ​​vores mini-tutorial-serie jQuery, er det på tide at vi kaster et mere dybtgående kig på en af ​​de mest anvendte funktioner i jQuery. AJAX giver et websted mulighed for at kommunikere med ... Læs mere

Hvad er jQuery UI, og hvorfor skal jeg bruge det?

jQuery UI giver dig alle de nødvendige komponenter til en moderne webapplikation med en GUI. For at have en bedre beskrivelse er det en samling widgets.

For en hurtig idé om, hvad du kan gøre med det, skal du bare bladre rundt på MakeUseOf. I vores er indholdet faktisk bare adskilt divs med en uordnet liste til at fungere som et indeks. Kør jQuery-fanefunktionen på dem, og de bliver magisk til faner. Fantastisk! Du kan endda indlæse faneindhold via AJAX, hvis du vil.

jquery ui

Rewards-siden bruger også en “modal popup” -dialogboks til at bekræfte brugerhandlingen og returnere meddelelser. For at fokusere brugerens opmærksomhed kan du få dialogboksen til at dæmpe resten af ​​sideindholdet, indtil interaktionen er afsluttet.

jquery ui tip

På vores Answers-side bruger vi det enkle værktøjstip funktion til at give tip på knapper.

jquery ui tip

jQuery UI udmærker sig virkelig, når det kommer til formularer, hvilket giver adgang til et væld af skydere og plukkere. Jeg er en stor fan af datepicker widget selv, at du kan indlæse oven på et almindeligt tekstindtastningsfelt, hvor brugeren skal skrive en dato.

jquery ui tip

Ser kompliceret ud, er det ikke? Kan du forestille dig at kode noget lignende i ren JavaScript? Sådan gør du det med jQuery UI:

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

Jeg vil ikke bruge mere tid på at forklare, hvor fantastisk det er, fordi jQuery UI officielle demoer give et godt overblik over alle tilgængelige funktioner samt enkle kodeeksempler. Gå læst den.

Tilføjelse af jQuery UI

Den enkleste måde at komme i gang med jQuery UI er at tilføje følgende linjer til din header - men lav sikker på, at disse er tilføjet EFTER den vigtigste jQuery-reference, da jQuery UI kræver, at jQuery skal indlæses. Du har brug for både en henvisning til plugin-scriptet og en stilark der indeholder den visuelle beskrivelse af disse UI-elementer.