Sådan opretter du faneblade med jQuery i Dreamweaver

Indstillingen jQuery UI Tab i Dreamweaver gør det nemt at tilføje en række paneler, der viser eller skjuler indhold, der svarer til en række faner. I lighed med de sammenklappelige paneler giver denne jQuery UI-funktion dig mulighed for at vise mere information på mindre plads i et browservindue.

I lighed med harmonikapanelerne kan fanepaneler bruges til at vise tekst, billeder og multimedier.

Når du opretter fanebladspaneler med jQuery UI-widgetten i Dreamweaver, kan du angive rækkefølgen af ​​fanerne og effektivt kontrollere, hvilket indhold der vises, når siden indlæses første gang.

Følg disse trin for at oprette en panelgruppe med faner:

Placer din markør på en side, hvor du vil have panelet med faner til at blive vist.

Vælg Indsæt → jQuery UI → Faner, eller klik på elementet Faner i panelet Indsæt jQuery UI.

Et panel med faner indsættes på siden, og de tilsvarende CSS-filer vises i panelet CSS Designer Source.

I hovedarbejdsområdet skal du vælge teksten Tab1, Tab2 og Tab 3 efter tur, og derefter erstatte hver faneoverskrift med den tekst, du vil have vist i panelets faneområde.

Du kan kun redigere indholdet af fanerne i arbejdsområdet, ikke i egenskabsinspektøren. Som standard er teksten i faneområdet fed og sort, men du kan ændre denne formatering ved at ændre den tilsvarende CSS-regel.

For at justere størrelsen på hver fane skal du vælge fanen og derefter bruge indstillingerne for højde og bredde i egenskabsinspektøren.

Med en individuel fane valgt, viser ejendomsinspektøren indstillingerne specifikt for den fane.

For at tilføje indhold skal du vælge ordet Indhold i hovedområdet på et valgt fanepanel og derefter indtaste tekst, billeder eller multimedier.

Du kan kopiere tekst til et panel ved at indsætte det, ligesom du ville indsætte tekst et andet sted på siden. På samme måde skal du indsætte billeder i paneler, ligesom du ville andre steder på en side: Vælg Indsæt → Billede → Billede, og vælg derefter den GIF-, JPEG- eller PNG-fil, du vil vise. Du kan også tilføje multimedie- eller Photoshop-filer, hvis du vil bruge Dreamweaver til at optimere dine billeder.

For at ændre udseendet af en fane eller et panel, såsom skrifttype eller farve, skal du redigere den tilsvarende CSS-regel.

Hvis du f.eks. vil redigere tekstfarven eller skrifttypen i fanerne, skal du markere boksen omkring fanen, og boksen omkring stilen vælges automatisk i CSS Designer Selector-panelet.

For at redigere antallet eller rækkefølgen af ​​paneler med faner skal du klikke på den blå jQuery-faneblad øverst i panelsættet i designområdet.

Når du klikker på den blå fane, vises panelindstillingerne i ejendomsinspektøren. Klik uden for det blå felt, og ejendomsinspektøren vender tilbage til standardindstillingerne.

For at tilføje faner skal du klikke på plustegnet (+) i egenskabsinspektøren.

Nye faner vises i arbejdsområdet.

For at ændre rækkefølgen af ​​faner skal du vælge fanenavnet i egenskabsinspektøren og derefter bruge pilene i feltet Paneler til at flytte panelet.

Panelnavne flyttes op og ned i menuen, efterhånden som rækkefølgen ændres. Paneler og deres tilsvarende faner vises på websiden i den rækkefølge, som de vises i ejendomsinspektøren.

Vælg det panel på rullelisten Paneler, som du vil have vist, når siden indlæses i en webbrowser.

Rullelisten svarer til de navne, du giver hver fane i arbejdsområdet.

Vælg Filer → Gem for at gemme siden; Når dialogboksen Kopier afhængige filer vises, skal du klikke på OK for automatisk at generere alle de relaterede filer.

For at jQuery UI-funktionerne skal fungere, skal du uploade disse filer til din webserver, når du uploader websiden.

Klik på globusikonet øverst i arbejdsområdet, og vælg en browser for at få vist dit arbejde i en browser.

Afhængigt af din webbrowser skal du muligvis tillade ActiveX-objekter at få vist siden på din computer.