Välj ett element på sidan, som en bild eller en länk.
Senast uppdaterad den
27 apr. 2021
Använd JavaScript-beteenden i Adobe Dreamweaver för att placera JavaScript-kod i dokument så att besökare kan ändra en webbsida eller initiera vissa uppgifter.
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 JavaScript-kod på klientsidan, det vill säga den körs i webbläsare, inte på servrar.
Händelser är i själva verket meddelanden som genereras av webbläsare som anger att en besökare på din sida har gjort något. Till exempel, när en besökare för pekaren över en länk, genererar webbläsaren en onMouseOver-händelse för den länken; webbläsaren kontrollerar sedan om den ska anropa lite JavaScript-kod (specificerad i sidan som visas) som svar. Olika händelser definieras för olika sidelement; till exempel, i de flesta webbläsare är onMouseOver och onClick händelser som är associerade med länkar, medan onLoad är en händelse som är associerad med bilder och med brödtext-sektionen i dokumentet.
En åtgärd är fördefinierad JavaScript-kod för att utföra en uppgift, som att öppna ett webbläsarfönster, visa eller dölja ett AP-element, spela upp ett ljud eller stoppa en Adobe Shockwave-film.Åtgärderna som medföljer Dreamweaver ger maximal kompatibilitet mellan webbläsare.
Efter att du kopplar ett beteende till ett sidelement, anropar beteendet åtgärden (JavaScript-kod) som är associerad med en händelse när den händelsen inträffar för det elementet. (Händelserna som du kan använda för att utlösa en given åtgärd varierar från webbläsare till webbläsare.) Till exempel, om du kopplar åtgärden Popup Message till en länk och anger att den kommer att utlösas av onMouseOver-händelsen, då dyker ditt meddelande upp när någon placerar pekaren över den länken.
En enda händelse kan utlösa flera olika åtgärder, och du kan ange ordningen i vilken dessa åtgärder inträffar.
Dreamweaver tillhandahåller omkring två dussin åtgärder; ytterligare åtgärder kan hittas på Exchange-webbsidan på www.adobe.com/go/dreamweaver_exchange samt på utvecklarsidor från tredje part. Du kan skriva dina egna åtgärder om du är skicklig i JavaScript.
Obs!
Termerna beteende och åtgärd är Dreamweaver-termer, inte HTML-termer. Från webbläsarens synvinkel är en åtgärd precis som vilken annan JavaScript-kod som helst.
Översikt över panelen Beteenden
Du använder panelen Behaviors (Fönster > Behaviors) för att koppla beteenden till sidelement (mer specifikt till taggar) och för att ändra parametrar för tidigare kopplade beteenden.
Beteenden som redan har kopplats till det för närvarande valda sidelementet visas i beteendelistan (huvudområdet i panelen), listade alfabetiskt efter händelse. Om flera åtgärder är listade för samma händelse, kommer de att utföras i den ordning de visas i listan. Om inga beteenden visas i beteendelistan har inga beteenden kopplats till det aktuella 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. Show Set Events ä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 kan kopplas till det för närvarande valda elementet. När du väljer en åtgärd från den här listan visas en dialogruta där du kan ange parametrar för åtgärden.Om alla åtgärder är nedtonade kan inga händelser genereras av det valda elementet.
Ta bort händelse (–)
Tar bort den markerade händelsen och åtgärden från beteendelistan.
Upp- och nedpilar
Flytta den valda åtgärden upp eller ner i beteendelistan för en viss händelse. Du kan ändra ordningen för åtgärder endast för en viss händelse—du kan till exempel ändra ordningen i vilken flera åtgärder inträffar för händelsen onLoad, men alla onLoad-åtgärder förblir tillsammans i beteendelistan. Pilknapparna är inaktiverade för åtgärder som inte kan flyttas upp eller ned 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 tillhandahåller en uppsättning händelser som du kan associera med åtgärderna som listas i Behavior-panelens Actions (+)-meny. När en besökare på din webbsida interagerar med sidan—till exempel genom att klicka på en bild—genererar webbläsaren händelser; dessa händelser kan användas för att anropa JavaScript-funktioner som utför en åtgärd.Dreamweaver tillhandahåller många vanliga åtgärder som du kan utlösa med dessa händelser.
För namn och beskrivningar av händelserna som tillhandahålls av varje webbläsare, se Dreamweaver Support Center på www.adobe.com/go/dreamweaver_support.
Olika händelser visas i Events-menyn beroende på det valda objektet. För att ta reda på vilka händelser en given webbläsare stöder för ett givet sidelement, infoga sidelementet i ditt dokument och koppla ett beteende till det, titta sedan på Events-menyn i Behaviors-panelen. (Som standard hämtas händelser från HTML 4.01-händelselistan och stöds av de flesta moderna webbläsare.) Händelser kan vara inaktiverade (nedtonade) om relevanta objekt ännu inte finns på sidan eller om det valda objektet inte kan ta emot händelser. Om de förväntade händelserna inte visas, kontrollera att rätt objekt är valt.
Om du kopplar ett beteende till en bild visas vissa händelser (som onMouseOver) inom parentes.Dessa händelser är endast tillgängliga för länkar. När du väljer en av dem omsluter Dreamweaver bilden med en <a>-tagg för att definiera en null-länk.Null-länken representeras av javascript:; i egenskapsinspektorns länkruta.Du kan ändra länkens Värde om du vill förvandla det 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 kommer du att ta bort beteendet.
För att se vilka taggar du kan använda med en given händelse i en given webbläsare, sök efter händelsen i en av resurserna i Dreamweaver/Configuration/Behaviors/Events-mappen.
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.
Den målwebbläsare du väljer avgör vilka händelser som stöds för ett givet element.
Du kan ange mer än en åtgärd för varje händelse. Åtgärder inträffar i den ordning som de listas i Actions-kolumnen i Behaviors-panelen, men du kan ändra denna ordning.
För att koppla ett beteende till hela sidan, klicka på <body>-taggen i taggväljaren i det nedre vänstra hörnet av dokumentfönstret.
Välj Fönster > Beteenden.
Klicka på plusknappen (+) och välj en åtgärd från menyn Lägg till beteende.
Nedtonade åtgärder på menyn går inte att välja. De kan vara nedtonade eftersom ett nödvändigt objekt inte finns i det aktuella dokumentet. Till exempel är åtgärden Control Shockwave eller SWF nedtonad om dokumentet inte innehåller några Shockwave- eller SWF-filer.
När du väljer en åtgärd visas en dialogruta med parametrar och instruktioner för åtgärden.
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.
Standardhändelsen för att utlösa åtgärden visas i
kolumnen Händelser.Om detta inte är den utlösarhändelse du vill ha väljer du
en annan händelse från popup-menyn Händelser.(För att öppna menyn Händelser
väljer du en händelse eller åtgärd i panelen Beteenden och klickar på den
nedåtriktade svarta pilen som visas mellan händelsenamnet
och åtgärdsnamnet.)
Ändra eller ta bort ett beteende
Efter att ha kopplat ett beteende kan du ändra händelsen som utlöser åtgärden, lägga till eller ta bort åtgärder och ändra parametrar för åtgärder.
Markera ett objekt med ett kopplat beteende.
Välj Fönster > Beteenden.
Gör de ändringar du vill göra:
För att redigera en åtgärds parametrar dubbelklickar du på namnet eller väljer det och trycker på Retur (Windows) eller Return (Macintosh); ändra sedan parametrarna i dialogrutan och klicka på OK.
För att ändra ordningsföljden för åtgärder för en given händelse väljer du en åtgärd och klickar på Uppåtpilen eller Nedåtpilen.Alternativt kan du välja åtgärden och klippa ut och klistra in den på önskad plats bland de andra åtgärderna.
För att ta bort ett beteende väljer du det och klickar på knappen Minus (–) eller trycker på Delete.
Uppdatera ett beteende
Välj ett element som har beteendet
kopplat till sig.
Välj Window > Behaviors och dubbelklicka på
beteendet.
Gör dina ändringar och klicka på OK i beteendets dialogruta.
Då uppdateras samtliga beteenden av samma slag på sidan. Om andra sidor på din webbplats har det beteendet måste du uppdatera dem sida för sida.
Hämta och installera beteenden från tredje part
Många tillägg är tillgängliga på Dreamweaver Exchange-webbplatsen (www.adobe.com/go/dreamweaver_exchange).
Välj Window > Behaviors och
välj Get More Behaviors från menyn Add Behavior.
Standardwebbläsaren startas och Exchange-webbplatsen visas.
Bläddra bland eller sök efter paket.
Hämta och installera det tilläggspaket du vill ha.
För mer information, se Lägg till och hantera tillägg i Dreamweaver.
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
