Använd inbyggda JavaScript-beteenden

Använd inbyggda beteenden

Funktionerna som ingår i Dreamweaver har skrivits för att fungera i moderna webbläsare. I äldre webbläsare misslyckas beteendena utan att orsaka fel.

Även om Dreamweaver-åtgärderna skrevs för att maximera kompatibilitet mellan webbläsare stöder vissa webbläsare inte JavaScript alls, och många som bläddrar på webben håller JavaScript avstängt i sina webbläsare. För bästa resultat över flera plattformar ska du tillhandahålla alternativa gränssnitt omslutna av <noscript>-taggar så att personer utan JavaScript kan använda din webbplats.

Använda beteendet Anropa JavaScript

Funktionen Call JavaScript kör en anpassad funktion eller kodrad i JavaScript när en händelse inträffar. (Du kan skriva skript själv eller använda kod från olika fritt tillgängliga JavaScript-bibliotek på webben.)

Använda beteendet Ändra egenskap

Använd funktionen Change Property för att ändra värdet för en av ett objekts egenskaper (till exempel Bakgrundsfärgen för en div eller åtgärden för ett formulär).

Använda beteendet Kontrollera plugin-program

Använd funktionen Check Plugin för att skicka besökare till olika sidor beroende på om de har det angivna tillägget installerat. Du kanske till exempel vill att besökare ska gå till en sida om de har Shockwave och en annan sida om de inte har det.

Använda beteendet Dra AP-element

Beteendet Dra AP-element låter besökaren dra ett absolut positionerat (AP) element. Använd det här beteendet för att skapa pussel, reglage och andra rörliga gränssnittselement.

Du kan ange i vilken riktning besökaren kan dra AP-elementet (horisontellt, vertikalt eller i valfri riktning), ett mål som besökaren ska dra AP-elementet till, om AP-elementet ska snäppa till målet om AP-elementet är inom ett visst antal pixlar från målet, vad som ska hända när AP-elementet träffar målet, med mera.

Eftersom beteendet Dra AP-element måste anropas innan besökaren kan dra AP-elementet bör du koppla Dra AP-element till body-objektet (med händelsen onLoad).

Hämta information om det dragbara AP-elementet

När du kopplar beteendet Dra AP-element till ett objekt infogar Dreamweaver funktionen MM_dragLayer() i head-sektionen av ditt dokument. (Funktionen behåller den gamla namnkonventionen för AP-element [det vill säga "Layer"] så att lager skapade i tidigare versioner av Dreamweaver förblir redigerbara.) Förutom att registrera AP-elementet som dragbart definierar den här funktionen tre egenskaper för varje dragbart AP-element—MM_LEFTRIGHT, MM_UPDOWN och MM_SNAPPED—som du kan använda i dina egna JavaScript-funktioner för att bestämma AP-elementets relativa horisontella position, AP-elementets relativa vertikala position och om AP-elementet har nått släppmålet.

Till exempel visar följande funktion värdet för egenskapen MM_UPDOWN (AP-elementets aktuella vertikala position) i ett formulärfält kallat curPosField. (Formulärfält är användbara för att visa information som uppdateras kontinuerligt eftersom de är dynamiska—det vill säga, du kan ändra deras innehåll efter att sidan har laddats klart.)

function getPos(layerId){

var layerRef = document.getElementById(layerId);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

Istället för att visa värdena för MM_UPDOWN eller MM_LEFTRIGHT i ett formulärfält kan du använda dessa värden på en mängd andra sätt. Du kan till exempel skriva en funktion som visar ett meddelande i formulärfältet beroende på hur nära värdet är släppzonen, eller så kan du anropa en annan funktion för att visa eller dölja ett AP-element beroende på värdet.

Det är särskilt användbart att läsa egenskapen MM_SNAPPED när du har flera AP-element på sidan som alla måste nå sina mål innan besökaren kan gå vidare till nästa sida eller uppgift. Du kan till exempel skriva en funktion som räknar hur många AP-element som har ett MM_SNAPPED-värde på true och anropa den när ett AP-element släpps.När det fästa antalet når det önskade antalet kan du skicka besökaren till nästa sida eller visa ett gratulationsmeddelande.

Använda beteendet Gå till URL

Beteendet Gå till URL öppnar en ny sida i det aktuella fönstret eller i den angivna ramen. Detta beteende är användbart för att ändra innehållet i två eller flera ramar med ett klick.

Använda beteendet Hoppmeny

När du skapar en hoppmeny genom att använda Infoga > Formulär > Hoppmeny skapar Dreamweaver ett menyobjekt och kopplar beteendet Hoppmeny (eller Hoppmeny Kör) till det. Det finns vanligtvis inget behov av att koppla beteendet Hoppmeny till ett objekt manuellt.

Du kan redigera en befintlig hoppmeny på två sätt:

• Du kan redigera och ordna om menyalternativ, ändra filerna att hoppa till och ändra fönstret där dessa filer öppnas genom att dubbelklicka på ett befintligt Jump Menu-beteende i panelen Beteenden.

• Du kan redigera alternativen i menyn precis som du skulle redigera alternativ i vilken meny som helst genom att välja menyn och använda knappen Listvärden i Egenskapsinspektören.

Använda beteendet Hoppmeny Gå

Beteendet Jump Menu Go är nära kopplat till beteendet Jump Menu; Jump Menu Go låter dig associera en Go-knapp med en hoppmeny.(Innan du använder det här beteendet måste det redan finnas en hoppmeny i dokumentet.)Att klicka på Go-knappen öppnar länken som är vald i hoppmenyn.En hoppmeny behöver normalt ingen Go-knapp; att välja ett objekt från en hoppmeny gör vanligtvis att en URL läses in utan behov av ytterligare användaråtgärd.Men om besökaren väljer samma objekt som redan är valt i hoppmenyn sker inte hoppet.I allmänhet spelar det ingen roll, men om hoppmenyn visas i en ram och hoppmenyobjekten länkar till sidor i andra ramar är en Go-knapp ofta användbar för att låta besökare välja om ett objekt som redan är valt i hoppmenyn.

Använda beteendet Öppna webbläsarfönster

Använd beteendet Öppna webbläsarfönster för att öppna en sida i ett nytt fönster.Du kan specificera egenskaperna för det nya fönstret, inklusive dess storlek, attribut (om det kan ändras i storlek, har en menyrad och så vidare) och namn.Du kan till exempel använda det här beteendet för att öppna en större bild i ett separat fönster när besökaren klickar på en miniatyrbild; med det här beteendet kan du göra det nya fönstret till exakt samma storlek som bilden.

Om du inte specificerar några attribut för fönstret öppnas det med samma storlek och attribut som fönstret det öppnades från.Att specificera något attribut för fönstret stänger automatiskt av alla andra attribut som inte uttryckligen är påslagna.Om du till exempel inte anger några attribut för fönstret kan det öppnas på 1024 x 768 pixlar och ha ett navigeringsfält (som visar knapparna Tillbaka, Framåt, Startsida och Uppdatera), platsverktygsfält (som visar URL:en), statusfält (som visar statusmeddelanden längst ned) och menyrad (som visar menyerna Fil, Redigera, Vy och andra).Om du uttryckligen ställer in bredden till 640 och höjden till 480 och inte ställer in några andra attribut öppnas fönstret på 640 x 480 pixlar utan verktygsfält.

Använda beteendet Popup-meddelande

Beteendet Popup-meddelande visar en JavaScript-varning med det meddelande du specificerar.Eftersom JavaScript-varningar bara har en knapp (OK) ska du använda det här beteendet för att ge användaren information snarare än att presentera ett val.

Du kan bädda in alla giltiga JavaScript-funktionsanrop, egenskaper, globala variabler eller andra uttryck i texten. För att bädda in ett JavaScript-uttryck placerar du det inom klammerparenteser ({}). För att visa en klammerparentes föregår du den med ett omvänt snedstreck (\{).

Exempel:

URL:en för denna sida är {window.location}, och idag är det {new Date()}.

Använda beteendet Förhandsladda bilder

Funktionen Förladda bilder förkortar visningstiden genom att cachelagra bilder som inte visas när sidan förs visas (till exempel bilder som kommer att bytas ut med funktioner eller skript).

Använda beteendet Ange texten i ramen

Funktionen Ange text för ram låter dig dynamiskt ange texten för en ram och ersätta Innehåll och formatering för en ram med det Innehåll du anger. Innehållet kan inkludera all giltig HTML-kod. Använd det här beteendet om du vill visa information dynamiskt.

Även om funktionen Ange text för ram ersätter formateringen för en ram kan du välja Bevara bakgrundsfärg för att bevara sidans bakgrund och textfärgsattribut.

Du kan bädda in alla giltiga JavaScript-funktionsanrop, egenskaper, globala variabler eller andra uttryck i texten. För att bädda in ett JavaScript-uttryck placerar du det inom klammerparenteser ({}). För att visa en klammerparentes föregår du den med ett omvänt snedstreck (\{).

Exempel:

URL:en för denna sida är {window.location}, och idag är det {new Date()}.

Använd beteendet Ange text för behållare

Funktionen Ange text för behållare ersätter innehållet och formateringen i en befintlig behållare (det vill säga valfritt element som kan innehålla text eller andra element) på en sida med det innehåll du anger.Innehållet kan vara valfri HTML-källkod.

Du kan bädda in vilket giltigt JavaScript-funktionsanrop, egenskap, global variabel eller annat uttryck som helst i texten.För att bädda in ett JavaScript-uttryck, placera det inom klammerparenteser ({}). För att visa en klammerparentes, föregå den med ett omvänt snedstreck (\{).

Exempel:

URL:en för denna sida är {window.location}, och idag är det {new Date()}.

Tillämpa funktionen Set Text Of Status Bar

Funktionen Set Text Of Status Bar visar ett meddelande i statusfältet längst ner till vänster i webbläsarfönstret. Du kan till exempel använda denna funktion för att beskriva destinationen för en länk i statusfältet istället för att visa URL:en som är kopplad till den. Besökare ignorerar ofta eller förbiser meddelanden i statusfältet (och inte alla webbläsare ger fullständigt stöd för att ställa in texten i statusfältet); om ditt meddelande är viktigt, överväg att visa det som ett popup-meddelande eller som text i ett AP-element.

Du kan bädda in vilket giltigt JavaScript-funktionsanrop, egenskap, global variabel eller annat uttryck som helst i texten. För att bädda in ett JavaScript-uttryck, placera det inom klammerparenteser ({}). För att visa en klammerparentes, föregå den med ett omvänt snedstreck (\{).

Exempel:

URL:en för denna sida är {window.location}, och idag är det {new Date()}.

Tillämpa funktionen Set Text Of Text Field

Funktionen Set Text Of Text Field ersätter innehållet i ett formulärs textfält med det innehåll du anger.

Du kan bädda in vilket giltigt JavaScript-funktionsanrop, egenskap, global variabel eller annat uttryck som helst i texten. För att bädda in ett JavaScript-uttryck placerar du det inom klammerparenteser ({}). Vill du visa en klammer infogar du ett omvänt snedstreck före klammern (\{).

Exempel:

URL:en för denna sida är {window.location}, och idag är det {new Date()}.

Skapa ett textfält med ett namn

Använda Ange texten i textfältet

Använda beteendet Visa-dölj element

Beteendet Visa-dölja element visar, döljer eller återställer standardsynligheten för ett eller flera sidelement. Det här beteendet är användbart för att visa information när användaren interagerar med sidan. När användaren till exempel för muspekaren över en bild av en växt kan du visa ett sidelement med information om växtens växtsäsong och region, hur mycket sol den behöver, hur stor den kan bli och så vidare. Beteendet visar eller döljer bara det relevanta elementet – det tar inte bort elementet från sidans flöde när det är dolt.

Det här beteendet har tagits bort från och med Dreamweaver CS5.

Använda beteendet Växla bild

Beteendet Växla bild växlar en bild mot en annan genom att ändra attributet src för taggen <img>. Använd det här beteendet för att skapa knapprullningar och andra bildeffekter (inklusive växling av fler än en bild i taget). När du infogar en överrullningsbild läggs automatiskt ett beteende för Växla bild till på sidan.

Det finns också ett Återställ växlingsbild-beteende som återställer den senaste uppsättningen växlade bilder till deras tidigare källfiler.Det här beteendet läggs automatiskt till när du kopplar beteendet Växla bild till ett objekt. Om du låter alternativet Återställ vara valt när du kopplar Växla bild behöver du aldrig välja beteendet Återställ växlingsbild manuellt.

Använda beteendet Ändra egenskap

Beteendet Validera formulär kontrollerar innehållet i angivna textfält för att säkerställa att användaren har angett korrekt typ av data. Koppla detta beteende till enskilda textfält med händelsen onBlur för att validera fälten medan användaren fyller i formuläret, eller koppla det till formuläret med händelsen onSubmit för att utvärdera flera textfält på en gång när användaren klickar på knappen Skicka. Att koppla detta beteende till ett formulär förhindrar att formulär med ogiltig data skickas.

Liknande innehåll

• Infoga eller ändra en dynamisk HTML-formulärmeny
• Skapa ramar och ramuppsättningar