Hur man skapar flikar med jQuery i Dreamweaver

Alternativet jQuery UI Tab i Dreamweaver gör det enkelt att lägga till en serie paneler som visar eller döljer innehåll som motsvarar en serie flikar. I likhet med de hopfällbara panelerna låter den här jQuery UI-funktionen dig visa mer information på mindre utrymme i ett webbläsarfönster.

I likhet med dragspelspanelerna kan flikpaneler användas för att visa text, bilder och multimedia.

När du skapar flikpaneler med jQuery UI-widgeten i Dreamweaver kan du ange ordningen på flikarna, vilket effektivt styr vilket innehåll som visas när sidan först laddas.

Följ dessa steg för att skapa en panelgrupp med flikar:

Placera markören på en sida där du vill att flikpanelen ska visas.

Välj Infoga → jQuery UI → Tabs, eller klicka på objektet Tabs i panelen jQuery UI Insert.

En panel med flikar infogas på sidan och motsvarande CSS-filer visas i panelen CSS Designer Source.

I huvudarbetsytan väljer du texten Tab1, Tab2 och Tab 3 i tur och ordning och ersätter sedan varje flikrubrik med den text du vill ska visas i panelens flikområde.

Du kan bara redigera innehållet på flikarna i arbetsytan, inte i egenskapsinspektören. Som standard är texten i flikområdet fet och svart, men du kan ändra den formateringen genom att ändra motsvarande CSS-regel.

För att justera storleken på varje flik, välj fliken och använd sedan inställningarna för höjd och bredd i egenskapsinspektören.

Med en enskild flik vald visar egenskapsinspektören inställningarna specifikt för den fliken.

För att lägga till innehåll, välj ordet Innehåll i huvudområdet på valfri vald flikpanel och skriv sedan in text, bilder eller multimedia.

Du kan kopiera text till en panel genom att klistra in den precis som du klistrar in text någon annanstans på sidan. På liknande sätt infogar du bilder i paneler precis som du skulle göra någon annanstans på en sida: Välj Infoga → Bild → Bild och välj sedan den GIF-, JPEG- eller PNG-fil du vill visa. Du kan också lägga till multimedia- eller Photoshop-filer om du vill använda Dreamweaver för att optimera dina bilder.

Om du vill ändra utseendet på en flik eller en panel, till exempel teckensnitt eller färg, redigerar du motsvarande CSS-regel.

Om du till exempel vill redigera textfärgen eller teckensnittet i flikarna, markerar du rutan runt fliken och rutan runt stil väljs automatiskt i CSS Designer Selector-panelen.

För att redigera antalet eller ordningen på flikar, klicka på den blå fliken jQuery Tabs överst i paneluppsättningen i designområdet.

När du klickar på den blå fliken visas panelinställningarna i egenskapsinspektören. Klicka utanför det blå rutan så återgår egenskapsinspektören till sina standardinställningar.

För att lägga till flikar, klicka på plustecknet (+) i egenskapsinspektören.

Nya flikar visas i arbetsytan.

För att ändra ordningen på flikarna, välj fliknamnet i egenskapsinspektören och använd sedan pilarna i fältet Paneler för att flytta panelen.

Panelnamn flyttas upp och ner i menyn när ordningen ändras. Paneler och deras motsvarande flikar visas på webbsidan i den ordning som de visas i fastighetsinspektören.

Välj panelen i rullgardinsmenyn Paneler som du vill visa när sidan läses in i en webbläsare.

Den nedrullningsbara listan motsvarar namnen du ger varje flik i arbetsytan.

Välj Arkiv → Spara för att spara sidan; när dialogrutan Kopiera beroende filer visas klickar du på OK för att automatiskt generera alla relaterade filer.

För att funktionerna i jQuery UI ska fungera måste du ladda upp dessa filer till din webbserver när du laddar upp webbsidan.

Klicka på klotikonen högst upp på arbetsytan och välj en webbläsare för att förhandsgranska ditt arbete i en webbläsare.

Beroende på din webbläsare kan du behöva tillåta ActiveX-kontroller att förhandsgranska sidan på din dator.