Hvordan man laver faneblade med jQuery i Dreamweaver - dummies

Valgmuligheden jQuery UI Tab i Dreamweaver gør det nemt at tilføje en række paneler, der viser eller skjuler indhold svarende til en række faner. På samme måde som de sammenklappelige paneler giver denne jQuery UI-funktion dig mulighed for at vise flere oplysninger på mindre plads i et browservindue.

På samme måde som accordeonpanelerne kan fanepaneler bruges til at vise tekst, billeder og multimedie.

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

Følg disse trin for at oprette en panelpanelgruppe:

1. Placer markøren på en side, hvor du vil have, at det panelede panel skal vises.

2. Vælg Indsæt → jQuery UI → Tabs, eller klik på fanen Tabs i panelet jQuery UI Insert.

   Der indsættes et faneblad på siden, og de tilsvarende CSS-filer vises i CSS Designer Source-panelet.

   

3. I hovedarbejdsområdet skal du vælge fanen Tab1, Tab2, og Tab 3 , og derefter erstatte hver enkelt overskrift med den tekst, du vil se i panelets fane areal.

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

4. For at justere størrelsen af ​​hver fane skal du vælge fanen og derefter bruge indstillingerne Højde og Bredde i egenskabsinspektøren.

   Med en individuel fane valgt, viser ejendomsinspektøren indstillingerne for den pågældende fane specifikt.

   

5. For at tilføje indhold skal du vælge ordet Indhold i hovedområdet af et hvilket som helst valgt fanepanel og derefter indtaste tekst, billeder eller multimedie.

   Du kan kopiere tekst til et panel ved at indsætte det, ligesom du vil indsætte tekst andetsteds 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 GIF, JPEG eller PNG-filen, du vil vise. Du kan også tilføje multimedie- eller Photoshop-filer, hvis du vil bruge Dreamweaver til at optimere dine billeder.

6. For at ændre udseendet på en fane eller et panel, f.eks. Skrifttypens ansigt eller farve, skal du redigere den tilsvarende CSS-regel.

   Hvis du f.eks. Vil redigere tekstfarven eller skrifttypen i fanerne, skal du markere feltet omkring fanen, og feltet omkring stil vælges automatisk i CSS Designer Selector panelet.

7. For at redigere nummer eller rækkefølge af faneblade, skal du klikke på fanen blå jQuery-faner øverst på panelet i designområdet.

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

   

8. For at tilføje faner skal du klikke på plustegnet (+) -ikonet i ejendomsinspektøren.

   Der vises nye faner i arbejdsområdet.

9. Hvis du vil ændre rækkefølgen af ​​faner, skal du vælge fanenavn i egenskabsinspektøren og derefter bruge pilene i panelet for at flytte panelet.

   Panelnavne bevæger sig op og ned i menuen, da ordren ændres. Paneler og deres tilhørende faner vises på websiden i den rækkefølge, hvor de vises i ejendomsinspektøren.

10. Vælg panelet i rullemenuen Paneler, som du vil vise, når siden er indlæst i en webbrowser.

    Drop-down listen svarer til de navne, du giver hver fane i arbejdsområdet.

11. Vælg Filer → Gem for at gemme siden; Når dialogboksen Copy Dependent Files vises, skal du klikke på OK for automatisk at generere alle relaterede filer.

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

12. Klik på kloden ikonet øverst i arbejdsområdet, og vælg en browser for at forhåndsvise dit arbejde i en browser.

    Afhængigt af din webbrowser må du muligvis tillade ActiveX-kontroller at forhåndsvise siden på din computer.