Ingebouwd JavaScript-gedrag toepassen

Ingebouwd gedrag gebruiken

De gedragingen die bij Dreamweaver zijn inbegrepen, zijn geschreven om te werken in moderne browsers.In oudere browsers doen ze niets.

Hoewel de Dreamweaver-acties zijn geschreven om de browsercompatibiliteit te maximaliseren, ondersteunen sommige browsers helemaal geen JavaScript en veel mensen die op het web surfen houden JavaScript uitgeschakeld in hun browsers.Voor de beste platformoverschrijdende resultaten zorg je voor alternatieve interfaces die zijn ingesloten in <noscript> tags zodat mensen zonder JavaScript je site kunnen gebruiken.

Het gedrag Call JavaScript toepassen

Het gedrag Call JavaScript voert een aangepaste functie of regel JavaScript-code uit wanneer een gebeurtenis optreedt. (Je kunt het script zelf schrijven of je kunt code gebruiken die wordt geleverd door verschillende vrij beschikbare JavaScript-bibliotheken op het web.)

Het gedrag Eigenschap wijzigen toepassen

Gebruik het gedrag Change Property om de waarde van een eigenschap van een object te wijzigen (bijvoorbeeld de achtergrondkleur van een div of de actie van een formulier).

Het gedrag Insteekmodule controleren toepassen

Gebruik het gedrag Check Plugin om bezoekers naar verschillende pagina's te sturen, afhankelijk van of ze de opgegeven plug-in hebben geïnstalleerd.Je wilt bijvoorbeeld dat bezoekers naar één pagina gaan als ze Shockwave hebben en naar een andere pagina als ze deze niet hebben.

Het gedrag AP-element slepen toepassen

Met het gedrag 'AP-element slepen' kan de bezoeker een absoluut gepositioneerd (AP) element slepen.Gebruik dit gedrag om puzzels, schuifregelaars en andere beweegbare interface-elementen te maken.

Je kunt specificeren in welke richting de bezoeker het AP-element kan slepen (horizontaal, verticaal of in elke richting), een doel waarnaar de bezoeker het AP-element moet slepen, of het AP-element naar het doel moet springen als het AP-element binnen een bepaald aantal pixels van het doel ligt, wat er moet gebeuren wanneer het AP-element het doel raakt en meer.

Omdat het gedrag Drag AP Element moet worden aangeroepen voordat de bezoeker het AP-element kan slepen, moet je Drag AP Element koppelen aan het body-object (met de onLoad-gebeurtenis).

Informatie verzamelen over het versleepbare AP-element

Wanneer je het gedrag AP-element slepen koppelt aan een object, voegt Dreamweaver de functie MM_dragLayer() toe aan de sectie head van je document. (De functie behoudt de oude naamconventie voor AP-elementen [dat wil zeggen "Laag"] zodat lagen die in eerdere versies van Dreamweaver zijn gemaakt bewerkbaar blijven.) Naast het registreren van het AP-element als sleepbaar, definiëert deze functie drie eigenschappen voor elk sleepbaar AP-element—MM_LEFTRIGHT, MM_UPDOWN, en MM_SNAPPED—die je kunt gebruiken in je eigen JavaScript- functies om de relatieve horizontale positie van het AP-element, de relatieve verticale positie van het AP-element en of het AP-element het neerzetdoel heeft bereikt te bepalen.

De volgende functie toont bijvoorbeeld de waarde van de eigenschap MM_UPDOWN (de huidige verticale positie van het AP-element) in een formulierveld met de naam curPosField.(Formuliervelden zijn handig voor het weergeven van continu bijgewerkte informatie omdat ze dynamisch zijn—dat wil zeggen, je kunt hun inhoud wijzigen nadat de pagina is geladen.)

function getPos(layerId){

var layerRef = document.getElementById(layerId);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

In plaats van de waarden van MM_UPDOWN of MM_LEFTRIGHT weer te geven in een formulierveld, kun je die waarden op verschillende andere manieren gebruiken. Je kunt bijvoorbeeld een functie schrijven die een bericht weergeeft in het formulierveld afhankelijk van hoe dicht de waarde bij de dropzone ligt, of je kunt een andere functie aanroepen om een AP-element te tonen of verbergen afhankelijk van de waarde.

Het is vooral nuttig om de eigenschap MM_SNAPPED te lezen wanneer je meerdere AP-elementen op de pagina hebt, die allemaal hun doelen moeten bereiken voordat de bezoeker naar de volgende pagina of taak kan gaan.Je kunt bijvoorbeeld een functie schrijven om te tellen hoeveel AP-elementen een MM_SNAPPED-waarde van true hebben en die aanroepen wanneer een AP-element wordt neergezet. Wanneer het aantal vastgeklikte elementen het gewenste aantal bereikt, kun je de gebruiker naar de volgende pagina sturen of een felicitatiebericht weergeven.

Het gedrag Ga naar URL toepassen

Het gedrag 'Ga naar URL' opent een nieuwe pagina in het huidige venster of in het opgegeven frame.Dit gedrag is nuttig voor het wijzigen van de inhoud van twee of meer frames met één klik.

Het gedrag Snelmenu toepassen

Wanneer je een jump-menu maakt met Invoegen > Formulier > Jump Menu, maakt Dreamweaver een menu-object en koppelt het gedrag Jump Menu (of Jump Menu Go) eraan.Er is meestal geen reden om het gedrag Sprong-menu handmatig aan een object te koppelen.

Je kunt een bestaand jump-menu op twee manieren bewerken:

• Je kunt menu-items bewerken en herschikken, de bestanden wijzigen waarnaar wordt gesprongen en het venster wijzigen waarin die bestanden worden geopend, door te dubbelklikken op een bestaand gedrag Sprong-menu in het paneel Gedragingen.

• Je kunt de items in het menu net zo bewerken als je items in elk ander menu zou bewerken, door het menu te selecteren en de knop Lijstwaarden in de Eigenschapsinspector te gebruiken.

Het gedrag Snelmenu Go toepassen

Het gedrag Springmenu Ga is nauw verbonden met het gedrag Springmenu; met Springmenu Ga kun je een Ga-knop koppelen aan een springmenu.(Voordat je dit gedrag gebruikt, moet er al een springmenu bestaan in het document.)Als je op de Ga-knop klikt, wordt de koppeling geopend die is geselecteerd in het springmenu.Een springmenu heeft normaal gesproken geen Ga-knop nodig; het selecteren van een item in een springmenu zorgt er over het algemeen voor dat een URL wordt geladen zonder dat verdere actie van de gebruiker nodig is.Maar als de bezoeker hetzelfde item selecteert dat al is gekozen in het springmenu, vindt de sprong niet plaats.Over het algemeen maakt dat niet uit, maar als het springmenu in een frame verschijnt en de springmenu-items koppelen naar pagina's in andere frames, is een Ga-knop vaak nuttig om bezoekers toe te staan een item opnieuw te selecteren dat al is geselecteerd in het springmenu.

Het gedrag Browservenster openen toepassen

Gebruik het gedrag Browservenster openen om een pagina in een nieuw venster te openen.Je kunt de eigenschappen van het nieuwe venster opgeven, inclusief de grootte, attributen (of het venster verstelbaar is, een menubalk heeft, enzovoort) en naam.Je kunt dit gedrag bijvoorbeeld gebruiken om een grotere afbeelding in een apart venster te openen wanneer de bezoeker op een miniatuur klikt; met dit gedrag kun je het nieuwe venster precies de grootte van de afbeelding maken.

Als je geen attributen voor het venster specificeert, wordt het geopend met de grootte en attributen van het venster vanwaaruit het werd geopend.Het specificeren van een attribuut voor het venster schakelt automatisch alle andere attributen uit die niet expliciet worden ingeschakeld.Als je bijvoorbeeld geen attributen voor het venster instelt, kan het worden geopend op 1024 x 768 pixels en een navigatiebalk hebben (met de knoppen Terug, Vooruit, Startpagina en Opnieuw laden), locatiewerkbalk (met de URL), statusbalk (met statusberichten, onderaan) en menubalk (met menu's Bestand, Bewerken, Weergave en andere).Als je expliciet de breedte instelt op 640 en de hoogte op 480 en geen andere attributen instelt, wordt het venster geopend op 640 x 480 pixels, zonder werkbalken.

Het gedrag Pop-upbericht toepassen

Het gedrag Pop-upbericht toont een JavaScript-melding met het bericht dat je specificeert.Omdat JavaScript-meldingen slechts één knop hebben (OK), gebruik je dit gedrag om de gebruiker informatie te geven in plaats van een keuze te presenteren.

Je kunt elke geldige JavaScript-functieaanroep, eigenschap, globale variabele of andere expressie insluiten in de tekst.Om een JavaScript-expressie in te sluiten, plaats je deze tussen accolades ({}). Om een accolade weer te geven, zet je er een backslash voor (\{).

Voorbeeld:

De URL voor deze pagina is {window.location} en vandaag is {new Date()}.

Het gedrag Afbeeldingen vooraf laden toepassen

Het gedrag Afbeeldingen vooraf laden verkort de weergavetijd door afbeeldingen op te slaan in de cache die niet worden weergegeven wanneer de pagina voor het eerst verschijnt (bijvoorbeeld afbeeldingen die worden uitgewisseld met gedragingen of Scripts).

Het gedrag Tekst van frame instellen toepassen

Het gedrag Tekst van frame instellen stelt je in staat om dynamisch de tekst van een frame in te stellen door de content en opmaak van een frame te vervangen met de content die je opgeeft. De content kan elke geldige HTML code bevatten. Gebruik dit gedrag om gegevens dynamisch weer te geven.

Hoewel het gedrag Tekst van frame instellen de opmaak van een frame vervangt, kun je Achtergrondkleur behouden selecteren om de achtergrond van de pagina en tekstkleurkenmerken te bewaren.

Je kunt elke geldige JavaScript-functieaanroep, eigenschap, globale variabele of andere expressie in de tekst insluiten.Om een JavaScript-expressie in te sluiten, plaats je het tussen accolades ({}). Om een accolade weer te geven, laat je het voorafgaan door een backslash (\{).

Voorbeeld:

De URL voor deze pagina is {window.location} en vandaag is {new Date()}.

Pas het gedrag Tekst van container instellen toe

Het gedrag Tekst van container instellen vervangt de content en opmaak van een bestaande container (dat wil zeggen elk element dat tekst of andere elementen kan bevatten) op een pagina met de content die je opgeeft. De inhoud kan bestaan uit elke geldige HTML-broncode.

Je kunt elke geldige JavaScript-functie-aanroep, eigenschap, globale Variabele of andere expressie in de tekst insluiten. Om een JavaScript-expressie in te sluiten, plaats je deze tussen accolades ({}). Om een accolade weer te geven, laat je deze voorafgaan door een backslash (\{).

Voorbeeld:

De URL voor deze pagina is {window.location} en vandaag is {new Date()}.

Pas het gedrag Tekst van statusbalk instellen toe

Het gedrag Tekst van statusbalk instellen toont een bericht in de statusbalk linksonder in het browservenster. Je kunt dit gedrag bijvoorbeeld gebruiken om het doel van een koppeling in de statusbalk te beschrijven in plaats van de bijbehorende URL weer te geven.Bezoekers negeren of missen berichten in de statusbalk vaak (en niet alle browsers bieden volledige ondersteuning voor het instellen van de tekst van de statusbalk); als je bericht belangrijk is, overweeg dan om het weer te geven als pop-upbericht of als de tekst van een AP-element.

Je kunt elke geldige JavaScript-functie-aanroep, eigenschap, globale Variabele of andere expressie in de tekst insluiten. Om een JavaScript-expressie in te sluiten, plaats je deze tussen accolades ({}). Om een accolade weer te geven, laat je deze voorafgaan door een backslash (\{).

Voorbeeld:

De URL voor deze pagina is {window.location} en vandaag is {new Date()}.

Het gedrag Tekst van tekstveld instellen toepassen

Het gedrag Tekst van tekstveld instellen vervangt de content van een tekstveld van een formulier met de content die je opgeeft.

Je kunt elke geldige JavaScript-functieaanroep, eigenschap, globale variabele of andere expressie in de tekst insluiten.Om een JavaScript-expressie in te sluiten, plaats je deze tussen accolades ({}). Als u een accolade wilt weergeven, plaatst u een backslash voor de accolade (\{).

Voorbeeld:

De URL voor deze pagina is {window.location} en vandaag is {new Date()}.

Een benoemd tekstveld maken

Tekst van tekstveld instellen toepassen

Het gedrag Elementen tonen en verbergen toepassen

Het gedrag Elementen tonen/verbergen toont, verbergt of herstelt de standaardzichtbaarheid van een of meer pagina-elementen. Dit gedrag is handig voor het weergeven van informatie terwijl de gebruiker met de pagina werkt.Wanneer de gebruiker bijvoorbeeld de aanwijzer over een afbeelding van een plant beweegt, kun je een pagina-element tonen met details over het groeiseizoen en de regio van de plant, hoeveel zon deze nodig heeft, hoe groot deze kan worden, enzovoort.Het gedrag toont of verbergt alleen het betreffende element—het verwijdert het element niet daadwerkelijk uit de stroom van de pagina wanneer het verborgen is.

Dit gedrag is vanaf Dreamweaver CS5 afgeschaft.

Het gedrag Afbeelding verwisselen toepassen

De functie Afbeelding wisselen wisselt de ene afbeelding voor de andere door het src-kenmerk van de <img>-tag te wijzigen.Gebruik dit gedrag om knoprollovers en andere afbeeldingseffecten te maken (inclusief het wisselen van meer dan één afbeelding tegelijk).Het invoegen van een rollover-afbeelding voegt automatisch het gedrag Afbeelding wisselen toe aan je pagina.

Er is ook het gedrag Afbeelding wisselen herstellen, dat de laatste set gewisselde afbeeldingen herstelt naar hun vorige bronbestanden.Dit gedrag wordt automatisch toegevoegd wanneer je het gedrag Afbeelding wisselen koppelt aan een object; als je de optie Herstellen geselecteerd laat tijdens het koppelen van Afbeelding wisselen, hoef je het gedrag Afbeelding wisselen herstellen nooit handmatig te selecteren.

Het gedrag Formulier valideren toepassen

Het gedrag Formulier valideren controleert de inhoud van opgegeven tekstvelden om ervoor te zorgen dat de gebruiker het juiste type gegevens heeft ingevoerd. Koppel dit gedrag aan individuele tekstvelden met de onBlur-gebeurtenis om de velden te valideren terwijl de gebruiker het formulier invult, of koppel het aan het formulier met de onSubmit-gebeurtenis om verschillende tekstvelden tegelijk te evalueren wanneer de gebruiker op de knop Verzenden klikt. Het koppelen van dit gedrag aan een formulier voorkomt het verzenden van formulieren met ongeldige gegevens.

Verwante informatie

• Een dynamisch HTML-formuliermenu invoegen of wijzigen
• Frames en framesets maken