Annons

I vår sista lektion i detta jQuery för nybörjare tutorial-serien, vi ska ta en kort titt på jQuery UI - den mest använda jQuery-plugin för att lägga till grafiska användargränssnitt till webbappar. Från snygga former och visuella effekter, till dragbara widgetar, spinnare och dialogrutor - jQuery UI ger dig kraften att skapa rika webbgränssnitt.

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

  • Inledning: Vad är jQuery och varför ska du bry dig? Att göra webben interaktiv: en introduktion till jQueryjQuery är ett skriptbibliotek 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 det mest utvecklade, mest stödda och mest använda ... Läs mer
  • 1: Väljare och grunder jQuery Tutorial - Komma igång: Basics & SelectorsFörra veckan talade jag om hur viktigt jQuery är för alla moderna webbutvecklare och varför det är fantastiskt. Den här veckan tror jag det är dags att vi blir smutsiga med lite kod och lärde oss hur ... Läs mer
    • instagram viewer
  • 2: Metoder Introduktion till jQuery (del 2): ​​Metoder och funktionerDetta är en del av en pågående introduktion av nybörjare till jQuery webbprogrammeringsserier. Del 1 omfattade grunderna för jQuery för hur du inkluderar det i ditt projekt och väljare. I del 2 fortsätter vi med ... Läs mer
  • 3: Väntar på sidbelastning och anonyma funktioner Introduktion till jQuery (del 3): Väntar på att sidan laddas och anonyma funktionerjQuery är utan tvekan en väsentlig färdighet för den moderna webbutvecklaren, och i denna korta miniserie hoppas jag ge dig kunskap om att börja använda det i dina egna webbprojekt. I... Läs mer
  • 4: Händelser jQuery Tutorial (del 4) - Lyssnar på evenemangIdag kommer vi att sparka upp ett hack och verkligen visa var jQuery lyser - händelser. Om du följde tidigare tutorials bör du nu ha en ganska god förståelse för grundkoden ... Läs mer
  • Felsökning med Chrome Developer Tools Ta reda på problem med webbplatsen med Chrome Developer Tools or FirebugOm du har följt mina jQuery-tutorials hittills har du kanske redan stött på några kodproblem och inte vetat hur du fixar dem. När du står inför en icke-funktionell kodkod, är det mycket ... Läs mer
  • 5: AJAX jQuery Tutorial (del 5): AJAX dem alla!När vi nära slutet av vår mini-tutorial-serie för jQuery är det dags att ta en mer djupgående 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 det?

jQuery UI ger dig alla komponenter som behövs för en modern webbapplikation med ett 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 i MakeUseOf. I vårt är innehållet faktiskt bara separat divs med en oordnad lista för att fungera som ett index. Kör funktionen jQuery-flikar på dem, och de förvandlas magiskt till flikar. Grymt bra! Du kan till och med ladda flikinnehåll via AJAX om du vill.

jquery ui

Rewards-sidan använder också en "modal popup" -dialogruta för att bekräfta användarens åtgärd och returnera meddelanden. För att fokusera användarens uppmärksamhet kan du låta dialogrutan dämpa resten av sidinnehållet tills interaktionen är klar.

jquery ui tips

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

jquery ui tips

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

jquery ui tips

Ser det ut komplicerat inte? Kan du föreställa dig att koda något liknande i rent JavaScript? Så gör du det med jQuery UI:

$ ( "# DateField") datepicker ().

Jag kommer inte att spendera mer tid på att förklara hur fantastisk det är för att officiella demonstrationer för jQuery UI ge en bra överblick över alla tillgängliga funktioner samt enkla kodprover. Läs det.

Lägger till jQuery UI

Det enklaste sättet att komma igång med jQuery UI är att lägga till följande rader i din rubrik - men gör säker på att dessa läggs till efter huvudreferensen för jQuery, eftersom jQuery UI kräver att jQuery ska laddas i förväg. Du behöver både en referens till plugin-skriptet och a format som innehåller den visuella beskrivningen av dessa UI-element.