Använd JavaScript-beteenden i Adobe Dreamweaver för att infoga JavaScript-kod i dokument så att besökarna kan ändra en webbsida eller sätta igång vissa åtgärder.

Beteenden i Adobe Dreamweaver är ett sätt att infoga JavaScript-kod i dokument så att besökarna ska kunna ändra en webbsida på olika sätt eller sätta igång vissa åtgärder. Ett beteende är en kombination av en händelse och en åtgärd som sätts igång när händelsen inträffar. Du kan lägga till ett beteende till en sida på panelen Beteenden. Ange en åtgärd och sedan händelser som gör att den utförs.

Obs!

Beteendekod är ett JavaScript som körs på klienten. Det betyder att koden körs i webbläsaren och inte på servern.

Händelser är i allt väsentligt meddelanden som webbläsaren skickar och som visar att besökaren har gjort något på sidan. Om en besökare för pekaren över en länk, skapas händelsen onMouseOver för den aktuella länken. Därefter kontrolleras om JavaScript-kod (definierad för den sida som visas) ska anropas som svar på händelsen. Olika händelser har definierats för olika sidelement. I de flesta webbläsare är till exempel händelserna onMouseOver och onClick associerade med länkar, medan händelsen onLoad är associerad med bilder och dokumentets body-avsnitt.

En åtgärd är färdig JavaScript-kod som utför en särskild uppgift, till exempel att öppna ett nytt fönster i webbläsaren, visa eller dölja ett AP-element, spela upp ett ljud eller stoppa en Adobe Shockwave-film. Åtgärderna i Dreamweaver är kompatibla med så många webbläsare som möjligt.

När du har kopplat ett beteende till ett sidelement anropas åtgärden (JavaScript-koden) som är kopplad till händelsen när den inträffar för elementet i fråga. (Vilka händelser som går att använda för att sätta igång en viss åtgärd varierar mellan olika webbläsare.) Om du till exempel kopplar åtgärden Popup-meddelande till en länk och anger att åtgärden ska utlösas av händelsen onMouseOver, öppnas ditt meddelande när någon placerar pekaren på länken.

En och samma händelse kan ge upphov till flera olika åtgärder, och du kan ange i vilken ordning de utförs.

Dreamweaver innehåller drygt tjugo åtgärder. Du hittar fler åtgärder på webbplatsen Exchange på adressen www.adobe.com/go/dreamweaver_exchange_se, men även på oberoende utvecklares webbplatser. Du kan skriva egna åtgärder om du är duktig på JavaScript.

Obs!

Termerna beteende och åtgärd är Dreamweaver-termer, inte HTML-termer. Ur webbläsarens synvinkel är en åtgärd bara ett vanligt JavaScript.

Översikt över panelen Beteenden

Det är på panelen Beteenden (Fönster > Beteenden) som du lägger till beteenden till sidelement (exaktare uttryckt till taggar) och ändrar parametrarna till beteenden som du redan har lagt till.

Beteenden som redan har kopplats till det markerade sidelementet visas i beteendelistan (huvudområdet på panelen). De visas i bokstavsordning. Om flera åtgärder har angetts för samma händelse utförs de i den ordning de står i listan. Om det inte finns några beteenden i listan har inga kopplats till det markerade elementet.

På panelen Beteenden finns följande alternativ:

Visa uppsatta händelser

Visar endast de händelser som har kopplats till det aktuella dokumentet. Händelser ordnas i klient- och serverkategorier. Händelserna i kategorierna står i en lista som går att dölja och visa. Visa uppsatta händelser är standardvyn.

Visa alla händelser

Visar en lista över alla händelser i en given kategori i bokstavsordning.

Lägg till beteende (+)

Visar en meny med åtgärder som du kan koppla till det markerade elementet. När du väljer en åtgärd i den här listan visas en dialogruta där du kan ange åtgärdens parametrar. Om alla åtgärder är nedtonade går det inte att generera någon händelse för det markerade elementet.

Ta bort händelse (–)

Tar bort den markerade händelsen och åtgärden från beteendelistan.

Upp- och nedpilar

Flyttar den markerade åtgärden för en viss händelse upp eller ned i beteendelistan. Du kan ändra åtgärdernas ordning för en viss händelse – till exempel kan du ändra ordningen för ett antal åtgärder som inträffar för händelsen onLoad. Alla onLoad-åtgärder behålls dock tillsammans i beteendelistan. Pilknapparna är inaktiverade för de åtgärder som inte går att flytta någonstans i listan.

Händelser

Visar en snabbmeny som enbart syns då en händelse är markerad. Den innehåller alla händelser som kan göra att åtgärden utlöses (menyn visas då du klickar på pilknappen bredvid den markerade händelsens namn). Olika händelser visas beroende på vilket objekt du har markerat. Om du inte ser händelser som du hade väntat dig att få se ska du kontrollera att du har markerat rätt sidelement eller tagg. (Välj en tagg med hjälp av taggväljaren längst ned till vänster i fönstret Dokument.)

Obs!

Händelsenamn som står inom parentes går bara att välja för länkar. Om du väljer ett av dem infogas automatiskt en tom länk till det valda sidelement och beteendet kopplas till länken i stället för till elementet. En tom länk anges med href="javascript:;" i HTML-koden.

Om händelser

Varje webbläsare har en egen uppsättning händelser som du kan koppla till åtgärderna på menyn Åtgärder (+) på panelen Beteende. När en besökare på webbplatsen gör något på sidan – till exempel klickar på en bild – genererar webbläsaren händelser. De går att använda för att anropa JavaScript-funktioner som utför en åtgärd. Dreamweaver innehåller många vanliga åtgärder som du kan utlösa med dessa händelser.

Namn på och beskrivningar av de händelser som olika webbläsare förstår beskrivs på Dreamweaver Support Center på adressen www.adobe.com/go/dreamweaver_support_se.

Olika händelser visas på Händelse-menyn beroende på vilket objekt du har markerat. Ta reda på vilka händelser en viss webbläsare stödjer för ett visst sidelement genom att infoga elementet i dokumentet och koppla ett beteende till det. Titta sedan på menyn Händelser på panelen Beteenden. (Som standard hämtas händelser från händelselistan i HTML 4.01 och de stöds av de flesta moderna webbläsare.) Händelser kan vara inaktiverade (nedtonade) om motsvarande objekt ännu inte finns med på sidan eller om det markerade objekt inte reagerar på händelser. Om de förväntade händelserna inte visas kontrollerar du att du har markerat rätt objekt.

Om du kopplar ett beteende till en bild visas vissa händelser (till exempel onMouseOver) inom parentes. Sådana händelser gäller enbart länkar. När du markerar en av dem infogar Dreamweaver en <a>-tagg runt bilden, så att en null-länk skapas. Den tomma länken representeras av javascript:; i rutan Länka i egenskapskontrollen. Du kan ändra länkvärdet om du vill omvandla den till en riktig länk till en annan sida, men om du tar bort JavaScript-länken utan att ersätta den med en annan länk försvinner även beteendet.

Om du vill se vilka taggar du kan använda för en viss händelse i en viss webbläsare ska du söka på händelsen i en av filerna i mappen Dreamweaver/Konfiguration/Beteenden/Händelser.

Använda ett beteende

Du kan koppla beteenden till hela dokumentet (det vill säga till <body>-taggen) eller till länkar, bilder, formulärelement och flera andra HTML-element.

Vilka händelser som stöds för ett givet element bestäms av vilken målwebbläsare du väljer.

Du kan ange mer än en åtgärd för varje händelse. Åtgärderna utförs i den ordning som de står i kolumnen Åtgärder på panelen Beteenden. Ordningen kan ändras.

  1. Markera ett element på sidan, till exempel en bild eller en länk.

    Om du vill koppla ett beteende till hela sidan klickar du på <body>-taggen i taggväljaren i dokumentfönstrets nedre, vänstra hörn.

  2. Välj Fönster > Beteenden.
  3. Klicka på plusknappen (+) och välj en åtgärd på menyn Lägg till beteende.

    Nedtonade åtgärder på menyn går inte att välja. De kan vara nedtonade på grund av att ett objekt som krävs ännu inte har lagts till i det aktuella dokumentet. Åtgärden Kontrollera Shockwave eller SWF är nedtonad om det inte finns någon Shockwave- eller SWF-fil i dokumentet.

    När du väljer en åtgärd visas en dialogruta där du kan ange dess parametrar och inställningar.

  4. Ange åtgärdens parametrar och klicka på OK.

    Alla åtgärder i Dreamweaver fungerar i moderna webbläsare. Vissa åtgärder fungerar inte i äldre webbläsare, men de orsakar inga fel.

    Obs!

    För målelement krävs unika ID:n. Om du till exempel vill använda beteendet Växla bild på en bild, måste den ha ett ID. Har du inte angett något ID för elementet, anges ett automatiskt.

  5. Standardhändelsen som utlöser åtgärden visas i kolumnen Händelser. Om det inte är den utlösningsmekanism som du önskar dig kan du välja en annan händelse på snabbmenyn Händelser. (Du kan få fram Händelser-menyn genom att markera en händelse eller åtgärd på panelen Beteenden och klicka på den nedåtriktade svarta pilen nedanför händelsens och åtgärdens namn.)

Ändra eller ta bort ett beteende

När du har kopplat ett beteende kan du ändra vilken händelse som utlöser åtgärden, lägga till eller ta bort åtgärder samt ändra deras parametrar.

  1. Markera ett objekt med ett kopplat beteende.
  2. Välj Fönster > Beteenden.
  3. Gör de ändringar du vill göra:
    • Du redigerar åtgärdens parametrar genom att dubbelklicka på dess namn eller markera den och trycka på Enter (Windows) eller Retur (Macintosh) och sedan redigera parametrarna i dialogrutan. Avsluta genom att klicka på OK.

    • Ändra åtgärdsordningen för en viss händelse genom att markera en åtgärd och klicka på upp- eller nedpilen. En annan möjlighet är att markera åtgärden och klippa ut och klistra in den på rätt ställe.

    • Du kan ta bort ett beteende genom att markera det och klicka på Delete-tangenten eller minusknappen (–).

Uppdatera ett beteende

  1. Markera ett element som är kopplat till beteendet.
  2. Välj Fönster > Beteenden och dubbelklicka på beteendet.
  3. Gör önskade ändringar och klicka på OK i beteendets dialogruta.

    Då uppdateras samtliga beteenden av samma slag på sidan. Om samma beteende finns på andra sidor på webbplatsen måste du uppdatera varje sida för sig.

Hämta och installera beteenden från andra utvecklare

Det finns många tillägg på webbplatsen Exchange för Dreamweaver (www.adobe.com/go/dreamweaver_exchange_se).

  1. Välj Fönster > Beteenden och välj Hämta fler beteenden på menyn Lägg till beteende.

    Standardwebbläsaren startas och Exchange-webbplatsen visas.

  2. Bläddra bland eller sök efter paket.
  3. Hämta och installera det tilläggspaket du vill ha.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy