Teman är inte ett nytt koncept. Du har förmodligen tagit fram några med hjälp av CSS-stilar (Cascading Style Sheet) och klasser för att formatera utseendet och känslan på dina webbplatser. Genom att använda ett ramverk standardiseras tillvägagångssättet och minskar mängden arbete och kod som behöver skrivas.

jQuery UI är nu industristandarden för implementering av teman. Det finns andra alternativ, till exempel Dojo (kopplat till Dijit) eller Ext JS, men jQuery UI kombinerar teman med användning av widgets, som är de element som användarna interagerar med datumväljare eller knappar. När man dissekerar det inre arbetet i de filer som utgör ett jQuery UI-tema är det inget annat än CSS och JavaScript. Men det är tankeprocessen och standardiseringen som har gått in i denna användning av CSS och JavaScript som gör jQuery UI till en sådan utmärkt plattform för att bygga upp utseendet och känslan på en webbplats.

jQuery UI-teman

Plattformen jQuery UI består av två underramar: ett widgetramverk, som innehåller Widget Factory och en uppsättning vanligt förekommande widgetar, och CSS-ramverket. Widget Factory utgör grunden för alla jQuery UI-widgets, inklusive de vanliga widgets som ingår i uppsättningen widgets. När du skapar widgetar använder du antingen en av de vanliga widgetarna från uppsättningen som utgångspunkt eller skapar en widget från grunden. När du vet var de gemensamma widgetarna finns kan du öppna någon av dem i din favoritredigerare och se koden. Därifrån kan du antingen ändra koden och skapa en anpassad widget (med en av de andra widgetarna som utgångspunkt) eller skapa en widget med en liknande struktur.

Mappstrukturen för jQuery UI-teman

För att fortsätta titta på de olika filerna och deras innehåll, ladda ner ett av temana från jQuery UI-plattformen (se Relaterade ämnen för en länk). Den nedladdade ZIP-filen innehåller tre mappar: css, js och development-bundle. Mappen development-bundle innehåller en mapp som heter themes, där jQuery UI-teman under utveckling förvaras. Mappen themes innehåller i sin tur en mapp med namnet på det valda/nedladdade temat (t.ex. UI lightness) samt en mapp som heter base. Denna mapp innehåller en utgångspunkt för dina egna teman. Den laddas alltid ner, oavsett vilket tema som valts.

Mappen css innehåller en mapp med namnet på det nedladdade temat. Den här temamappen innehåller en CSS-fil som innehåller CSS-markeringen för alla komponenter eller widgets. Mappen development-bundle innehåller dock också en mapp themes/ (där det faktiska namnet på det valda temat står) som innehåller de enskilda CSS-filerna för varje komponent eller widget. Denna struktur gör det lättare att hitta och ändra ändringarna i dina egna teman. Figur 1 visar strukturen för mappen themes.

Figur 1. Struktur för mappen themes

Visa bilden i full storlek

Inte alla filer från mappen är listade i figur 1, men de viktiga finns här. Filen jquery.ui.all.css importerar filerna jquery.ui.base.css och jquery.ui.theme.css, vilket gör det enkelt att importera filerna genom att bara använda filen jquery.ui.all.css. Filen jquery.ui.base.css importerar filen jquery.ui.core.css och alla andra komponent- och widgetfiler från samma mapp (visas inte i figur 1). Filen jquery.ui.core.css innehåller gemensamma klasser som delas av alla widgetfiler. Den tillhandahåller grundläggande CSS-klasser för alla jQuery UI-widgetar (inom temat) samt gemensam synlighet och positionering för widgetarna. Den sista viktiga filen är filen jquery.ui.theme.css, som ger det gemensamma utseendet och beteendet som delas av alla widgetar i temat samt själva temat.

Filen jquery.ui.theme.css har tre olika typer av stilar:

• Container – Den här stilen definierar containertemat, till exempel ui-widget, ui-widget-content eller ui-widget-header.
• States – Den här stiltypen används av jQuery UI-widgetar för att definiera hur widgeten ser ut när användaren interagerar med den. Klasserna omfattar ui-state-default, ui-state-hover och ui-state-active.
• Cues – När något händer i programmet (inte genom användarens åtgärd) ändrar dessa klasser widgets utseende. Klasserna omfattar ui-state-highlight, ui-state-error och ui-state-disabled.

Gemensamma widgets

Detta avsnitt tittar på exempelkod som använder några vanliga widgets för att bygga ett exempelprogram. Det här exemplet innehåller en widget för skjutreglage, en knapp som öppnar en dialogruta och en dialogruta som visar det aktuella värdet för skjutreglaget varje gång den öppnas. I figur 2 visas en ögonblicksbild av programmet.

Figur 2. Ett exempelprogram som använder vanliga widgets

Visa bilden i full storlek

Lista 1 innehåller HTML-indexfilen.

Lista 1. Exempelprogram som använder vanliga widgets

Lista 2 visar den tillhörande JavaScript-filen (index.js).

Lista 2. Den tillhörande JavaScript-filen för exempeltillämpningen

Den inledande inställningen sker i rubriken med följande kod:

Efter länkningen i CSS inkluderas JavaScript-filerna.

De tre widgetarna i den här tillämpningen definieras till största delen med hjälp av <div>-angivelser (med undantag för knappen, som redan har en tagg i HTML). Dessa widgets definieras i följande kod:

<div style="margin-bottom:10px;"></div><button>Display Value</button><div></div>

Fördröj slutligen den faktiska konstruktionen av widgetarna i JavaScript-koden tills sidan har laddats fullt ut av webbläsaren, vilket visas i Listing 3.

Lista 3. Konstruktion av widgets

Varje widget som redan nämnts konstrueras med den här koden. Dialogrutan och knappen tilldelas båda funktioner till specifika händelser. Till exempel får knappens klickhändelse veta att den ska öppna dialogrutan när den klickas. Dialogrutan ska ändra sin text för att ange det aktuella värdet på reglaget, vilket den gör varje gång den öppnas.

Det finns två sätt att ändra utseendet på en widget. Du kan skicka värden till konstruktören tillsammans med eventuella nödvändiga konstruktörsparametrar för widgeten. Till exempel:

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

Och du kan anropa metoder på widgeten efter att den har skapats, enligt följande:

$("#dlg_popup").dialog({ draggable: false });

De flesta vanliga widgets har många associerade alternativ som kan ställas in. Om du dessutom väljer att ignorera dessa alternativ ställer widgetarna in dem på standardvärden, så att du kan ställa in och ändra vad som behövs.

Widget-händelser

Eftersom widgets i grunden är JavaScript-objekt kan de konfigureras med händelser som utlöses under webbplatsapplikationens livstid. När dessa händelser inträffar fångas de antingen upp av webbplatsens JavaScript-kod eller hanteras i widgeten (standard).

Alla widgets standardbeteendeimplementering är väldokumenterad av jQuery UI-teamet för varje vanlig widget. Du kan dock injicera din egen kod för att hantera en eller flera av en vald widgets händelser. Här är ett exempel på kod för att ställa in mottagningen av en händelse:

$( "#dlg_popup" ).dialog({ drag: function(event, ui) { ... }});

Detta exempel kopplar in sig på drag-händelsen, som utlöses när dialogrutan dras. Ellipsen (…) som visas i exemplet är den plats där individuell kod kan placeras för att hantera och implementera koden för händelsen.

Widget methods

Metoder (som i alla välkända språk) är associerade med widgeten och gör det möjligt att utföra förskriven funktionalitet på en viss widget för att få den att utföra en viss åtgärd. Här är ett exempel på hur man anropar en widgets metod:

$("#dlg_popup").dialog("moveToTop");

Inteoretiskt sett är alternativ och metoder olika. Observera dock att ett options värde kan ändras eller hämtas med hjälp av en metodliknande implementering, vilket visas i följande exempel.

$("#dlg_popup").dialog("option", "autoOpen", false);

Växla tema

Kod kan inkluderas i HTML- och JavaScript-filer som ger möjlighet att byta tema i farten med hjälp av en rullgardinsmeny. Listing 4 visar ändringarna i HTML-källkoden för att göra en sådan ändring.

Lista 4. Byte av tema i farten

Lista 5 visar JavaScript-källkoden.

Lista 5. JavaScript-källkod för ändring av teman i farten

$(document).ready(function(){ $('#switcher').themeswitcher();...});

Figur 3 visar exempelprogrammet efter dessa ändringar.

Figur 3. Exempelprogrammet efter kodändringar

Visa bilden i full storlek

Kör HTML-sidan i webbläsaren igen och visa resultatet. Du kan nu klicka på rullgardinslistan för att byta tema. Det valda temat laddas ner i bakgrunden vid behov.

Och även om det går bra att använda verktyget för att byta tema på webbplatser som inte är produktionswebbplatser (för att testa och visa resultat), är det ingen bra idé för produktionswebbplatser. Verktyget förlitar sig på en tredjepartsserver för att vara värd för temana, och du kan inte vara säker på de resultat som användaren ser.

Ett annat sätt att testa jQuery UI-teman är att använda verktyget ThemeRoller, som endast finns tillgängligt för Mozilla Firefox (se Relaterade ämnen för en länk). När du har installerat verktyget (som en bookmarklet i Firefox) öppnar du galleriet och väljer teman för att visa dem. Välj ett tema och klicka på nedladdningslänken. När du har laddat ner extraherar du temamappen, placerar den i din jQuery UI-mapp och pekar dina HTML-filer till den.

Det här verktyget är dock mycket mer användbart än att bara byta tema. Det gör också att du kan bygga anpassade teman lättare än om du måste rulla ut dem för hand.

Skapa unika teman

Med hjälp av webbplatsen ThemeRoller (som körs i de flesta populära webbläsare; se Relaterade ämnen för en länk) kan ändringar göras i ett befintligt jQuery-tema (som utgångspunkt) för att skapa ett unikt tema. Genom att göra det slipper du skapa temat från grunden. Det innebär också att expertis inom CSS inte krävs, och med verktyget kan du se ändringar i befintliga teman och widgetar i farten. Figur 4 visar ThemeRollers webbplats (inte att förväxla med ThemeRoller bookmarklet, som körs i Firefox).

Figur 4. Webbplatsen ThemeRoller

Se bilden i full storlek

Klickar du på Galleriet kan du välja något av de befintliga temana. När du gör det byter du CSS-stilar och bilder som exempelwidgetarna använder för att återspegla ändringen. Om du klickar på knappen Redigera som är kopplad till ett tema kommer du till fliken ”Roll Your Own”, där du kan göra ändringar i de CSS-stilar som är kopplade till temat. Om du inte väljer ett tema att redigera och börjar på fliken ”Roll Your Own” utan att ha valt något tema, bygger du helt enkelt ett tema från grunden.

Till sist klickar du på Ladda ner tema och laddar ner det valda temat som ett anpassat tema som innehåller alla dina ändringar av temat. Observera att jQuery UI och dess teman stöder många CSS3-funktioner, vilket innebär att alla större webbläsare stöds (utom tidigare versioner av Windows Internet Explorer).

Fliken ”Roll Your Own” i ThemeRoller är snyggt organiserad så att du snabbt kan hitta och ändra det du letar efter. Fliken innehåller bland annat följande viktiga avsnitt:

• Typsnittsinställningar – Gör det möjligt att göra allmänna ändringar i det typsnitt som används i hela temat.
• Hörnradie – Styr avrundningen (eller avsaknaden av hörn) för olika widgets.
• Rubrik/verktygsfält – Ger utseendet och känslan för rubrikerna som används i de olika widgets.
• Innehåll – Ger inställningar för att styra huvuddelen av widgetarna.
• Klickbart – Styr olika tillstånd som widgetarna använder.

När du klickar dig igenom alternativen märker du några intressanta saker om konstruktionen av dessa teman. Till exempel drar jQuery UI-teman nytta av texturer. Om du vill se dem i användning klickar du på Header/Toolbar i ThemeRoller. Klicka sedan på den färgade knappen i mitten. En rullgardins-palett visas som innehåller mönster som du kan välja mellan. Den valda texturen kombineras med ditt val av bakgrundsfärg för att skapa det mönster som rubriker och verktygsfält använder. Detta är bara en av användningsområdena för texturer. Det finns andra i alla jQuery UI-teman. Ändra till exempel texturen i ”Clickable: default state” för att se hur ändringen påverkar knappar i det valda temat.

En intressant funktion i jQuery UI-teman är användningen av markeringar och fel (även kallade visuella signaler). ThemeRoller ger fullständig kontroll över hur dessa visuella signaler visas för användarna. Texturen, bakgrundsfärgen, konturhörnen, textfärgen och till och med ikonfärgen kan ändras (om en ikon visas i cue). Namnen på dessa stilar visas i ThemeRoller, så det är bara att använda dessa namn på dina egna webbplatser för att få dessa stilar tillämpade efter behov på den text som visas för användarna.

Förändringar i de olika inställningarna ger ändringar i URL:en i din webbläsare. Listing 6 innehåller en URL som exempel.

Listing 6. Exempel på URL för ThemeRoller

Spara och återställ senare denna URL för att komma tillbaka och göra ytterligare ändringar i inställningarna. Kopiera till exempel URL:n efter att du har gjort ändringar och klistra in den någonstans för att förvara den. Stäng nu webbläsaren (eller den webbläsarflik som innehåller ThemeRoller-webbplatsen) och öppna den igen med den kopierade webbadressen. Som du kan se är alla dina ändringar tillbaka, redo för ytterligare ändringar.

Slutsats

Mycket mer kan sägas om jQuery UI:s interna delar, men du bör ha de grunder som behövs för att börja experimentera med jQuery UI:s teman. Du har sett mapparnas och filernas struktur, vilket gör att du kan ändra ett tema. Du kan visa eller använda dessa filer som utgångspunkt för att skapa dina egna teman när du är redo.

Denna artikel behandlade också ThemeRoller och de tillhörande webbsidorna med stöd för ändring av befintliga teman samt skapande av nya teman från grunden. Slutligen utforskade du processen för att spara och återställa temaändringar på ThemeRollers webbplats.

Hernedladdningsbara resurser

• PDF av detta innehåll

• jQuery UI-plattform: Ladda ner jQuery UI för att testa och följa med i den här artikeln och de exempel som ges.
• ThemeRoller: Kolla in webbplatsen ThemeRoller, där du kan testa befintliga teman från jQuery UI-plattformen, anpassa befintliga teman eller skapa egna teman.
• developerWorks Webbutvecklingszon: Här hittar du artiklar om olika webbaserade lösningar. Se det tekniska biblioteket för webbutveckling för ett brett utbud av tekniska artiklar och tips, handledningar, standarder och IBM Redbooks.
• IBM:s produktutvärderingsversioner: Ladda ner och få tillgång till verktyg för programutveckling och middlewareprodukter från DB2, Lotus, Rational, Tivoli och WebSphere.
• developerWorks på Twitter: Gå med idag för att följa developerWorks tweets.