Hvordan du lager fanepaneler med jQuery i Dreamweaver - dummies

Alternativet jQuery UI Tab i Dreamweaver gjør det enkelt å legge til en serie paneler som viser eller skjuler innhold som tilsvarer en rekke faner. I likhet med de sammenleggbare panelene, gir denne jQuery UI-funksjonen deg mulighet til å vise mer informasjon på mindre plass i et nettleservindu.

I likhet med trekkspillpanelene kan flippte paneler brukes til å vise tekst, bilder og multimedia.

Når du oppretter flippte paneler med jQuery UI-widgeten i Dreamweaver, kan du angi rekkefølgen på kategoriene, og effektivt kontrollere hvilket innhold som vises når siden først lastes inn.

Følg disse trinnene for å opprette en flippert panelgruppe:

1. Plasser markøren på en side der du vil at panelet skal vises.

2. Velg Sett inn → jQuery UI → Tabs, eller klikk på kategorien Tabs i jQuery UI Insert-panelet.

   Et faneblad er satt inn på siden, og de tilsvarende CSS-filene vises i CSS Designer Source-panelet.

   

3. I hoved arbeidsområdet velger du tabbladet Tab1, Tab2, og Tab 3 , og deretter erstattes hver overskrift med teksten du vil se på panelets faneblad område.

   Du kan bare redigere innholdet i kategoriene bare i arbeidsområdet, ikke i egenskapsinspektøren. Som standard er teksten i kategorien Fet fet og svart, men du kan endre den formateringen ved å endre den tilsvarende CSS-regelen.

4. For å justere størrelsen på hver kategori, velg fanen og bruk deretter Innstillinger for høyde og bredde i egenskapsinspektøren.

   Med en individuell kategori valgt, viser egenskapsinspektøren innstillingene for den aktuelle kategorien spesielt.

   

5. For å legge til innhold, velg ordet Innhold i hovedområdet av et hvilket som helst valgt fanepanel, og skriv deretter inn tekst, bilder eller multimedia.

   Du kan kopiere tekst til et panel ved å lime det akkurat som du vil lime inn tekst noe annet sted på siden. På samme måte kan du sette inn bilder i paneler akkurat som du vil noe annet sted på en side: Velg Sett inn → Bilde → Bilde, og velg deretter GIF, JPEG eller PNG-filen du vil vise. Du kan også legge til multimedie- eller Photoshop-filer hvis du vil bruke Dreamweaver til å optimalisere bildene dine.

6. Hvis du vil endre utseendet til en kategori eller et panel, for eksempel skriftfarge eller farge, rediger du tilsvarende CSS-regel.

   For eksempel, for å redigere tekstfarge eller skrift i fanene, velg boksen rundt fanen og boksen rundt stilen blir automatisk valgt i CSS Designer Selector-panelet.

7. Hvis du vil redigere nummeret eller rekkefølgen på flippte paneler, klikker du på kategorien blå jQuery-faner øverst på panelet som er angitt i designområdet.

   Når du klikker på den blå kategorien, vises panelinnstillingene i Egenskapsinspektøren. Klikk utenfor det blå boksområdet, og egenskapsinspektøren returnerer til standardinnstillingene.

   

8. For å legge til faner klikker du på plustegnet (+) -ikonet i egenskapsinspektøren.

   Nye faner vises i arbeidsområdet.

9. For å endre rekkefølgen på faner, velg fanenavnet i egenskapsinspektøren og bruk pilene i panelpanelet for å flytte panelet.

   Panelnavn flytter opp og ned på menyen som bestillingen endres. Paneler og tilhørende faner vises på nettsiden i den rekkefølgen de vises i eiendomsinspektøren.

10. Velg panelet i rullegardinlisten Paneler som du vil vise når siden er lastet inn i en nettleser.

    Rullegardinlisten tilsvarer navnene du gir hver kategori i arbeidsområdet.

11. Velg Arkiv → Lagre for å lagre siden; Når dialogboksen Kopier avhengighetsfiler vises, klikker du OK for å generere alle relaterte filer automatisk.

    For at jQuery brukergrensesnittfunksjonene skal fungere, må du laste opp disse filene til webserveren din når du laster opp nettsiden.

12. Klikk på globusikonet øverst i arbeidsområdet, og velg en nettleser for å forhåndsvise arbeidet ditt i en nettleser.

    Avhengig av nettleseren din, må du kanskje tillate ActiveX-kontroller å forhåndsvise siden på datamaskinen.