Hvordan lage fanepaneler med jQuery i Dreamweaver

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

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

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

Følg disse trinnene for å opprette en panelgruppe med faner:

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

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

Et panel med faner settes inn på siden og de tilsvarende CSS-filene vises i CSS Designer-kildepanelet.

I hovedarbeidsområdet velger du Tab1-, Tab2- og Tab 3- teksten etter tur, og erstatter deretter hver faneoverskrift med teksten du vil skal vises i panelets faneområde .

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

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

Med en individuell fane valgt, viser egenskapsinspektøren innstillingene spesifikt for den fanen.

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

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

For å endre utseendet til en fane eller et panel, for eksempel skriftflaten eller fargen, rediger den tilsvarende CSS-regelen.

For å redigere tekstfargen eller fonten i fanene, velger du for eksempel boksen rundt fanen, og boksen rundt stilen velges automatisk i CSS Designer Selector-panelet.

For å redigere antallet eller rekkefølgen på paneler med faner, klikk på den blå jQuery-fanen øverst i panelsettet i designområdet.

Når du klikker på den blå fanen, vises panelinnstillingene i egenskapsinspektøren. Klikk utenfor området med blå boks, og egenskapsinspektøren går tilbake til standardinnstillingene.

For å legge til faner, klikk på plusstegnet (+)-ikonet i egenskapsinspektøren.

Nye faner vises i arbeidsområdet.

For å endre rekkefølgen på fanene, velg fanenavnet i egenskapsinspektøren og bruk deretter pilene i Paneler-feltet for å flytte panelet.

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

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

Nedtrekkslisten tilsvarer navnene du gir hver fane i arbeidsområdet.

Velg Fil → Lagre for å lagre siden; Når dialogboksen Kopier avhengige filer vises, klikker du OK for å generere alle de relaterte filene automatisk.

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

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.