Designskolan - Webbutveckling och design

jQuery UI står för jQuery User Interface, och består i grund och botten av ett gäng moduler och plugins för jQuery. Det är inte självständigt utan kräver en vanlig ”installation” av jQuery-ramverket för att fungera. Dessa finns att ladda ner på jquery.com och jqueryui.com.

Modulerna som ingår är bland annat dragable, som gör att du kan flytta runt element, Sortable, som låter användaren sortera exempelvis en lista, dialog, Datepicker, som fungerar som en liten almanacka som kommer upp när användaren ska välja ett datum.

En komplett lista över vilka moduler som ingår hittar du på jqueryui.com/demos/.

Rekommenderad läsning

Har du inte varit kontakt med jQuery ännu så rekommenderar jag att läsa lite grunder först. Här på designskolan.net hittar du ett gäng du kan läsa för att komma igång.

Då kör vi!

Börja med att inkludera både jQuery och jQuery UI. Detta gör du antingen genom att ladda ner och importera, men jag skulle rekomendera att hämta dem från Googles API, då det kommer gå snabbare för användaren(förutsatt att du inte har snabbare servrar än Google, ha ha). En sak att veta om är att ifall man importerar ifrån Google så får du inte med något tema(kommer till vad det är senare).

För att visa enkelheten i jQuery UI ska jag visa hur man enkelt kan göra en lista där innehållet går att sortera. Därefter vill vi att den nya ordningen ska läggas i en array som vi sedan kan skicka till en databas eller dylikt(detta kommer vi dock inte göra i den här guiden).

Först måste vi ha en lista:

Objekt 1
Objekt 2
Objekt 3
Objekt 4
Objekt 5

Nu lägger du till följande innanför head-taggarna:

Förklaring

Först ut: $(#sortable).sortable(). Detta triggar igång jQuery UI:s funktion sortable, vilket gör listan med id:et #sortable sorterbar.

Därefter kommer alla våra inställningar, som vi lägger innanför två klamrar och separerar med hjälp av kommatecken. Vilka inställngar som finns möjliga hittar du i dokumentationen.

Sen lägger vi till ett event, update. I denna event lägger vi en method, toArray. Denna method skapar en array av ordningen som vi sedan skriker ut med hjälp av en enkelt alert().

jQuery UI teman

En av de riktigt fina funktionerna när man använder sig av jQuery UI är möjligheten att skapa teman. Det är nästan löjligt enkelt att göra riktigt snygga, användarvänliga gränssnitt.

Du skapar ditt tema i samband med att du väljer moduler och laddar ner scriptet. Du får alltså med bilder och en .css-fil i din nerladdning, som du själv valt eller skapat i deras ThemeRoller.

DEMO.

Dokumentationen

Har du följt artikeln hela vägen hit så har du säkert insett att ifall jag skriver mer kommer det bara vara överflödig information, så enkelt är det. Det är dock en sista sak jag vill ta upp. Dokumentationen. jQuerys dokumentation i all ära, men jQuery UI slår den med hästlängder.

Upplägget är som så att du väljer vilken modul du vill använda, därefter hittar du ett gäng exempel som visar vad exakt det är modulen gör. Under denna hittar du allt du behöver veta om den, och det är bra förklarat.
Det är uppdelat i 4(+1 för widgets som har teman, såsom kalendern och dialogen).

Slutord

Har du någon webbapplikation eller dylikt är jQuery UI verkligen att rekommendera. Det är enkelt, kraftfullt och framförallt pålitligt. Det fungerar i princip alla webbläsare(tom IE6!) och du slipper otrevliga buggar som kan uppstå om du väljer att koda själv.