Handboek Annuleren

jQuery-effecten gebruiken in Dreamweaver

Zoeken

Laatst bijgewerkt op 3 mei 2021

Ontwerp boeiende websites ontwerpen met behulp van coole jQuery-effecten. Door de integratie van Dreamweaver met jQuery kunt u effecten, zoals schuifregelaars, invoegen zonder code te schrijven.

jQuery-effecten toevoegen

Selecteer in de ontwerpweergave of codeweergave van uw Dreamweaver-document het element waarop u een jQuery-effect wilt toepassen.
Selecteer Venster > Gedrag om het deelvenster Gedrag te openen.
Klik op het plusteken, klik vervolgens op Effecten en klik tenslotte op het gewenste effect.

jQuery-effecten toevoegen

Het aanpassingsdeelvenster met de instellingen voor het geselecteerde effect wordt weergegeven.
Geef de instellingen op, zoals het doelelement waarop het effect moet worden toegepast en de duur van het effect.

Het doelelement kan het element zijn dat u oorspronkelijk hebt geselecteerd of een ander element op de pagina. Als u bijvoorbeeld wilt dat gebruikers op een element A klikken om een element B te verbergen of weer te geven, is het doelelement B.
Herhaal de bovenstaande stappen om meerdere jQuery-effecten toe te voegen.

Wanneer u meerdere effecten kiest, worden de effecten in Dreamweaver toegepast in de volgorde waarin ze in het deelvenster Gedrag worden weergegeven. Als u de volgorde van de effecten wilt wijzigen, gebruikt u de pijltoetsen boven aan het deelvenster.

Dreamweaver voegt automatisch de relevante code in uw document in. Als u bijvoorbeeld het effect 'Vervagen' hebt geselecteerd, wordt de volgende code ingevoegd:

Externe bestandverwijzingen voor de afhankelijke bestanden die vereist zijn de werking van jQuery-effecten:

<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>

De volgende code wordt toegepast op het element in de body-tag:

<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>

Een scripttag wordt samen met de volgende code toegevoegd:

<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

Op gebeurtenissen gebaseerde jQuery-effecten

Wanneer u een jQuery-effect toepast, wordt het effect standaard toegewezen aan de gebeurtenis onClick. U kunt de gebeurtenis voor activering van het effect wijzigen met het deelvenster Gedrag.

Selecteer het gewenste pagina-element.
Klik in het deelvenster Venster > Gedrag op het pictogram Gebeurtenissen instellen weergeven.
Klik op de rij die overeenkomt met het effect dat momenteel is toegepast. De eerste kolom in een vervolgkeuzelijst verandert in een lijst met gebeurtenissen waaruit u kunt kiezen.
Klik op de gewenste gebeurtenis.

jQuery-effecten verwijderen

Selecteer het gewenste pagina-element.

In het deelvenster Gedrag worden alle effecten weergegeven die momenteel zijn toegepast op het geselecteerde pagina-element.
Klik op het effect dat u wilt verwijderen en klik vervolgens op het pictogram Verwijderen.