Guide d'utilisation Annuler

Utilisation d’effets jQuery sous Dreamweaver

Rechercher

Dernière mise à jour le 2 mai 2021

Concevez des sites web engageants en utilisant les effets jQuery. L’intégration de Dreamweaver avec jQuery vous permet d’inclure des effets tels que les curseurs sans devoir écrire de code.

Ajout d’effets jQuery

Dans le mode Création ou Code de votre document Dreamweaver, sélectionnez l’élément auquel vous souhaitez appliquer un effet jQuery.
Choisissez Fenêtre > Comportements afin d’ouvrir le panneau Comportements.
Cliquez sur l’icône Plus, cliquez sur Effets, puis sur l’effet désiré.

Ajout d’effets jQuery

Le panneau de personnalisation s’affiche et présente les paramètres de l’effet sélectionné.
Spécifiez les paramètres, tels que l’élément cible auquel l’effet doit s’appliquer, ainsi que la durée de l’effet.

L’élément cible peut être le même que l’élément sélectionné initialement ou un autre élément de la page. Par exemple, si vous souhaitez que les utilisateurs puissent cliquer sur un élément A pour afficher ou masquer un élément B, l’élément cible est B.
Pour ajouter plusieurs effets jQuery, répétez les étapes ci-dessus.

Lorsque vous sélectionnez plusieurs effets, Dreamweaver les applique dans l’ordre où ils sont affichés dans le panneau Comportements. Pour modifier l’ordre des effets, utilisez les touches fléchées dans la partie supérieure du panneau.

Dreamweaver insère automatiquement le code approprié dans votre document. Par exemple, si vous avez sélectionné l’effet Fondu, le code suivant est inséré :

Références de fichiers externes pour les fichiers dépendants nécessaires au bon fonctionnement des effets jQuery :

<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>

Le code suivant s’applique à l’élément dans la balise body :

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

Une étiquette de script avec le code suivant est ajoutée :

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

Effets jQuery basés sur un événement

Lorsque vous appliquez un effet jQuery, il est attribué par défaut à l’événement onClick. Vous pouvez modifier l’événement déclencheur de l’effet à l’aide du panneau Comportements.

Sélectionnez l’élément de page requis.
Dans le panneau Fenêtre > Comportements, cliquez sur l’icône Afficher les événements définis.
Cliquez sur la ligne correspondant à l’effet qui est actuellement appliqué. Notez que la première colonne devient une liste déroulante qui contient la liste des événements que vous pouvez choisir.
Cliquez sur l’événement désiré.

Suppression d’effets jQuery

Sélectionnez l’élément de page requis.

Le panneau Comportements répertorie tous les effets qui sont actuellement appliqués à l’élément de page sélectionné.
Cliquez sur l’effet à supprimer, puis sur l’icône Supprimer.