jQuery för nybörjare (del 6) - jQuery UI och vidare läsning

I vår sista lektion i detta jQuery för nybörjare handledning serie, vi kommer att ta en kort titt på jQuery UI - det mest använda jQuery-pluginet för att lägga till grafiska användargränssnitt för webbapps. Från fancy former och visuella effekter, till draggbara widgets, spinnare och dialogrutor - jQuery UI ger dig kraft att skapa rika webb-UI.

Om du inte redan har det, se till att läsa igenom våra tidigare artiklar i serien:

• Introduktion: Vad är jQuery och varför ska du bry dig? Att göra webben interaktiv: En introduktion till jQuery Att göra webben interaktiv: En introduktion till jQuery jQuery är ett skrivbibliotek på klientsidan som nästan alla moderna webbplatser använder - det gör webbplatser interaktiva. Det är inte det enda Javascript-biblioteket, men det är den mest utvecklade, mest stödda och mest använda ... Läs mer
• 1: Väljare och grunder jQuery-handledning - Komma igång: Grunder och väljare jQuery Handledning - Komma igång: Grunder och valörer I förra veckan pratade jag om hur viktigt jQuery är för alla moderna webbutvecklare och varför det är fantastiskt. Den här veckan tror jag att det är dags att vi fick våra händer smutsiga med lite kod och lärde oss hur ... Läs mer
• 2: Metoder Introduktion till jQuery (del 2): ​​Metoder och funktioner Introduktion till jQuery (Del 2): ​​Metoder och funktioner Detta är en del av en pågående nybörjare introduktion till jQuery webbprogrammeringsserier. Del 1 omfattade jQuery-grunderna om hur man ska inkludera det i ditt projekt och väljare. I del 2 fortsätter vi med ... Läs mer
• 3: Väntar på sidlastning och anonyma funktioner Introduktion till jQuery (Del 3): Väntar på sidan för att ladda och anonyma funktioner Introduktion till jQuery (del 3): Väntar på sidan för att ladda och anonyma funktioner jQuery är förmodligen en viktig färdighet för den moderna webbutvecklaren, och i denna korta mini-serie hoppas jag ge dig kunskapen för att börja använda den i dina egna webbprojekt. I ... Läs mer
• 4: Händelser jQuery-handledning (del 4) - Händelselysare jQuery-handledning (del 4) - Händelselyttare Idag ska vi sparka upp det och se hur jQuery lyser - händelser. Om du följde tidigare tutorials, borde du nu ha en ganska bra förståelse av grundläggande koden ... Läs mer
• Felsökning med verktyget för Chrome-utvecklare Uträtta webbproblem med verktygen för Chrome-utvecklare eller Firebug Utvärdera webbproblem med Chrome Developer Tools eller Firebug Om du har följt mina jQuery-tutorials hittills har du kanske redan stött på några kodproblem och inte vet hur att fixa dem. När man möter en icke-funktionell kodbit, är det väldigt ... Läs mer
• 5: AJAX jQuery-handledning (del 5): AJAX dem alla! jQuery handledning (del 5): AJAX dem alla! När vi nära slutet av vår jQuery mini-tutorial-serie är det dags att vi tog en djupare titt på en av de mest använda funktionerna i jQuery. AJAX tillåter en webbplats att kommunicera med ... Läs mer

Vad är jQuery UI och varför ska jag använda den?

jQuery UI ger dig alla komponenter som behövs för ett modernt webbprogram med en GUI. För att ha en bättre beskrivning är det en samling widgets.

För en snabb uppfattning om vad du kan göra med det, bläddra bara runt MakeUseOf. I vårt är innehållet faktiskt bara separat divs med en oorderad lista för att fungera som ett index. Kör funktionen jQuery-flikar på dem och de blir magiskt till flikar. Grymt bra! Du kan till och med ladda in flikinnehåll via AJAX om du vill.

Sidan Belöningar använder också a “modal popup” dialogrutan för att bekräfta användaråtgärden och returnera meddelanden. För att fokusera användarens uppmärksamhet kan du få dialogrutan dimma resten av sidinnehållet tills samspelet är klart.

På vår svarssida använder vi den enkla verktygstips funktion för att ge tips på knappar.

jQuery UI utmärker verkligen när det gäller former, vilket ger tillgång till en mängd glidare och plockare. Jag är en stor fan av Datumväljare widget själv, som du kan ladda ovanpå en vanlig textinmatningslåda där användaren ska skriva ett datum.

Ser komplicerat eller hur? Kan du föreställa dig att du kodar någonting så här i ren JavaScript? Så här gör du med jQuery UI:

$ ( "# DateField") datepicker ().

Jag kommer inte spendera mer tid för att förklara hur fantastisk det är för att jQuery UI-officiella demo ger en bra översikt över alla tillgängliga funktioner samt enkla kodprover. Läs det.

Lägga till jQuery-användargränssnittet

Det enklaste sättet att komma igång med jQuery UI är att lägga till följande rader i ditt huvud - men se till att dessa läggs till efter den huvudsakliga jQuery-referensen, eftersom jQuery UI kräver att jQuery är förinstallerad. Du behöver både en referens till plugin scriptet och a format som innehåller den visuella beskrivningen av dessa användargränssnitt.

>