Application de comportements JavaScript intégrés

Utilisation des comportements intégrés

Les comportements inclus avec Dreamweaver ont été écrits pour fonctionner dans les navigateurs modernes. Les comportements échouent dans les navigateurs plus anciens, sans que l’utilisateur en soit informé.

Bien que les actions Dreamweaver aient été écrits pour maximiser la compatibilité sur plusieurs plateformes, certains navigateurs ne prennent pas du tout en charge JavaScript, et de nombreuses personnes qui naviguent sur le web gardent JavaScript désactivé dans leurs navigateurs. Pour de meilleurs résultats sur plusieurs plateformes, fournissez des interfaces alternatives comprises dans les balises <noscript> afin que les personnes sans JavaScript puissent utiliser votre site.

Application du comportement Appel JavaScript

Le comportement Appeler JavaScript exécute une fonction personnalisée ou une ligne de code JavaScript lorsqu'un événement se produit.(Vous pouvez écrire le Script vous-même, ou vous pouvez utiliser le code fourni par diverses bibliothèques JavaScript disponibles gratuitement sur le web.)

Application du comportement Changer la propriété

Utilisez le comportement Modifier la propriété pour modifier la valeur d'une des propriétés d'un objet (par exemple, la couleur d'arrière-plan d'un div ou l'action d'un formulaire).

Application du comportement Vérifier le plug-in

Utilisez le comportement Vérifier le plugin pour envoyer les visiteurs vers différentes pages selon qu'ils ont le plug‑in spécifié installé ou non. Par exemple, vous pourriez vouloir que les visiteurs accèdent à une page s'ils ont Shockwave et à une autre page s'ils ne l'ont pas.

Application du comportement Tirer l’élément PA

Le comportement Faire glisser l'élément PA permet au visiteur de faire glisser un élément positionné de manière absolue (PA). Utilisez ce comportement pour créer des puzzles, des contrôles de curseur et d'autres éléments d'interface mobiles.

Vous pouvez spécifier dans quelle direction le visiteur peut faire glisser l'élément PA (horizontalement, verticalement ou dans n'importe quelle direction), une cible vers laquelle le visiteur doit faire glisser l'élément PA, s'il faut contraindre l'élément PA vers la cible si l'élément PA se trouve à un certain nombre de pixels de la cible, que faire lorsque l'élément PA atteint la cible, et plus encore.

Étant donné que le comportement Faire glisser l'élément PA doit être appelé avant que le visiteur puisse faire glisser l'élément PA, vous devez attacher Faire glisser l'élément PA à l'objet body (avec l'événement onLoad).

Collecte d’informations sur l’élément PA déplaçable

Lorsque vous associez le comportement Faire glisser l'élément PA à un objet, Dreamweaver insère la fonction MM_dragLayer() dans la section head de votre document. (La fonction conserve l'ancienne convention de dénomination pour les éléments PA [c'est-à-dire, « Calque »] pour que les calques créés dans les versions précédentes de Dreamweaver restent modifiables.) En plus d'enregistrer l'élément PA comme déplaçable, cette fonction définit trois propriétés pour chaque élément PA déplaçable—MM_LEFTRIGHT, MM_UPDOWN, et MM_SNAPPED—que vous pouvez utiliser dans vos propres fonctions JavaScript pour déterminer la position horizontale relative de l'élément PA, la position verticale relative de l'élément PA, et si l'élément PA a atteint la cible de dépôt.

Par exemple, la fonction suivante affiche la Valeur de la propriété MM_UPDOWN (la position verticale actuelle de l'élément PA) dans un champ de formulaire appelé curPosField. (Les champs de formulaire sont utiles pour afficher des informations mises à jour en continu car ils sont dynamiques, c'est-à-dire que vous pouvez modifier leur contenu après le chargement complet de la page.)

function getPos(layerId){

var layerRef = document.getElementById(layerId);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

Au lieu d'afficher les valeurs de MM_UPDOWN ou MM_LEFTRIGHT dans un champ de formulaire, vous pouvez utiliser ces valeurs de différentes autres façons.Par exemple, vous pouvez écrire une fonction qui affiche un message dans le champ de formulaire selon la proximité de la valeur avec la zone de dépôt, ou vous pouvez appeler une autre fonction pour afficher ou masquer un élément PA selon la valeur.

Il est particulièrement utile de lire la propriété MM_SNAPPED lorsque vous avez plusieurs éléments PA sur la page, qui doivent tous atteindre leurs cibles avant que le visiteur puisse passer à la page ou tâche suivante. Par exemple, vous pouvez écrire une fonction pour compter le nombre d'éléments PA ayant une valeur MM_SNAPPED de vrai et l'appeler chaque fois qu'un élément PA est déposé. Lorsque le nombre d'éléments contraints atteint le nombre souhaité, vous pouvez envoyer le visiteur vers la page suivante ou afficher un message de félicitations.

Application du comportement Atteindre l’URL

Le comportement Atteindre URL ouvre une nouvelle page dans la fenêtre actuelle ou dans le cadre spécifié. Ce comportement est utile pour modifier le contenu de deux cadres ou plus d'un seul clic.

Application du comportement Menu de reroutage

Lorsque vous créez un menu de redirection à l'aide d'Insertion > Formulaire > Menu de redirection, Dreamweaver crée un objet menu et y attache le comportement Menu de redirection (ou Aller au menu de redirection). Il n'est généralement pas nécessaire d'attacher le comportement Menu de redirection à un objet manuellement.

Vous pouvez modifier un menu de redirection existant de deux façons :

• Vous pouvez modifier et réorganiser les éléments de menu, modifier les fichiers vers lesquels effectuer la redirection et modifier la fenêtre dans laquelle ces fichiers s'ouvrent, en double-cliquant sur un comportement Menu de redirection existant dans le panneau Comportements.

• Vous pouvez modifier les éléments du menu comme vous modifieriez les éléments de n'importe quel menu, en sélectionnant le menu et en utilisant le bouton Valeurs de liste dans l'inspecteur de propriétés.

Application du comportement Menu de reroutage Aller

Le comportement Aller au menu de redirection est étroitement associé au comportement Menu de redirection ; Aller au menu de redirection vous permet d'associer un bouton Aller à un menu de redirection. (Avant d'utiliser ce comportement, un menu de redirection doit déjà exister dans le document.) Cliquer sur le bouton Aller ouvre le lien sélectionné dans le menu de redirection. Un menu de redirection n'a normalement pas besoin d'un bouton Aller ; sélectionner un élément dans un menu de redirection entraîne généralement le chargement d'une URL sans nécessiter d'action supplémentaire de la part de l'utilisateur. Mais si le visiteur sélectionne le même élément déjà choisi dans le menu de saut, le saut n'a pas lieu.En général, cela n'a pas d'importance, mais si le menu de redirection apparaît dans un cadre, et que les éléments du menu de redirection pointent vers des pages dans d'autres cadres, un bouton Aller est souvent utile, pour permettre aux visiteurs de re‑sélectionner un élément qui est déjà sélectionné dans le menu de redirection.

Application du comportement Ouvrir la fenêtre Navigateur

Utilisez le comportement Ouvrir une fenêtre du navigateur pour ouvrir une page dans une nouvelle fenêtre.Vous pouvez spécifier les propriétés de la nouvelle fenêtre, notamment sa taille, ses attributs (si elle est redimensionnable, possède une barre de menu, etc.) et son nom. Par exemple, vous pouvez utiliser ce comportement pour ouvrir une image plus grande dans une fenêtre séparée lorsque le visiteur clique sur une miniature ; avec ce comportement, vous pouvez dimensionner la nouvelle fenêtre exactement à la taille de l'image.

Si vous ne spécifiez aucun attribut pour la fenêtre, elle s'ouvre à la taille et avec les attributs de la fenêtre depuis laquelle elle a été ouverte. Spécifier un attribut pour la fenêtre désactive automatiquement tous les autres attributs qui ne sont pas explicitement activés. Par exemple, si vous ne définissez aucun attribut pour la fenêtre, elle peut s'ouvrir à 1024 x 768 pixels et avoir une barre de navigation (affichant les boutons Précédent, Suivant, Accueil et Charger à nouveau), une barre d'outils de localisation (affichant l'URL), une barre de statut (affichant les messages de statut, en bas) et une barre de menu (affichant les menus Fichier, Édition, Affichage et autres). Si vous définissez explicitement la largeur à 640 et la hauteur à 480 et ne définissez aucun autre attribut, la fenêtre s'ouvre à 640 x 480 pixels, sans barres d'outils.

Application du comportement Message contextuel

Le comportement Message contextuel affiche une alerte JavaScript avec le message que vous spécifiez. Étant donné que les alertes JavaScript n'ont qu'un seul bouton (OK), utilisez ce comportement pour donner des informations à l'utilisateur plutôt que pour présenter un choix.

Vous pouvez incorporer tout appel de fonction JavaScript valide, propriété, variable globale, ou autre expression dans le texte.Pour intégrer une expression JavaScript, placez-la entre accolades ({}). Pour afficher une accolade, faites-la précéder d'une barre oblique inverse (\{).

Exemple :

L'URL de cette page est {window.location}, et nous sommes le {new Date()}.

Application du comportement Précharger les images

Le comportement Précharger les images réduit le temps d'affichage en mettant en cache les images qui ne s'affichent pas lors de l'apparition initiale de la page (par exemple, les images qui seront permutées avec des comportements ou des scripts).

Application du comportement Texte d’un cadre

Le comportement Définir le texte du cadre vous permet de définir dynamiquement le texte d'un cadre, en remplaçant le contenu et la mise en forme d'un cadre par le contenu que vous spécifiez.Le contenu peut inclure tout code HTML valide. Ce comportement permet d’afficher les informations de façon dynamique.

Bien que le comportement Définir le texte du cadre remplace la mise en forme d'un cadre, vous pouvez sélectionner Conserver couleur d'arrière-plan pour conserver les attributs de couleur d'arrière-plan et de texte de la page.

Vous pouvez incorporer tout appel de fonction JavaScript valide, propriété, variable globale ou autre expression dans le texte.Pour intégrer une expression JavaScript, placez-la entre accolades ({}). Pour afficher une accolade, faites-la précéder d'une barre oblique inverse (\{).

Exemple :

L'URL de cette page est {window.location}, et nous sommes le {new Date()}.

Appliquez le comportement Définir le texte du conteneur

Le comportement Définir le texte du conteneur remplace le contenu et la mise en forme d'un conteneur existant (c'est-à-dire tout élément pouvant contenir du texte ou d'autres éléments) sur une page par le contenu que vous spécifiez.Ce contenu peut être n’importe quel code source valide en HTML.

Vous pouvez intégrer tout appel de fonction JavaScript valide, propriété, variable globale, ou autre expression dans le texte. Pour intégrer une expression JavaScript, placez-la entre accolades ({}). Pour afficher une accolade, précédez-la d'une barre oblique inversée (\{).

Exemple :

L'URL de cette page est {window.location}, et nous sommes le {new Date()}.

Appliquer le comportement Définir le texte de la barre d'état

Le comportement Définir le texte de la barre d'état affiche un message dans la barre d'état dans le coin inférieur gauche de la fenêtre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour décrire la destination d'un lien dans la barre d'état au lieu d'afficher l'URL qui lui est associée. Les visiteurs ignorent ou négligent souvent les messages dans la barre d'état (et tous les navigateurs ne fournissent pas une prise en charge complète pour définir le texte de la barre d'état) ; si votre message est important, envisagez de l'afficher comme un message contextuel ou comme le texte d'un élément de positionnement absolu.

Vous pouvez incorporer n'importe quel appel de fonction JavaScript valide, propriété, variable globale ou autre expression dans le texte.Pour intégrer une expression JavaScript, placez-la entre accolades ({}). Pour afficher une accolade, faites-la précéder d'une barre oblique inverse (\{).

Exemple :

L'URL de cette page est {window.location}, et nous sommes le {new Date()}.

Appliquez le comportement Définir le texte du champ de texte

Le comportement Définir le texte du champ de texte remplace le contenu d'un champ de texte de formulaire par le contenu que vous spécifiez.

Vous pouvez incorporer n'importe quel appel de fonction JavaScript valide, propriété, variable globale ou autre expression dans le texte.Pour intégrer une expression JavaScript, placez-la entre accolades ({}). Pour afficher une accolade, faites-la précéder d’une barre oblique inversée (\{).

Exemple :

L'URL de cette page est {window.location}, et nous sommes le {new Date()}.

Création d’un champ de texte nommé

Application de l’action Texte d’un champ de texte

Application du comportement Afficher-Masquer les éléments

Le comportement Afficher/masquer les éléments affiche, masque ou restaure la visibilité par défaut d'un ou plusieurs éléments de page. Ce comportement est utile pour afficher des informations lorsque l'utilisateur interagit avec la page. Par exemple, lorsque l'utilisateur déplace le pointeur sur une image de plante, vous pouvez afficher un élément de page donnant des détails sur la saison de croissance et la zone géographique de la plante, la quantité de soleil nécessaire, la taille qu'elle peut atteindre, etc. Le comportement affiche ou masque uniquement l' élément pertinent — il ne supprime pas réellement l'élément du flux de la page lorsqu'il est masqué.

Ce comportement a été abandonné depuis Dreamweaver CS5.

Application du comportement Permuter une image

Le comportement Permuter l'image remplace une image par une autre en modifiant l'attribut src de la balise <img>.Utilisez ce comportement pour créer des boutons de survol et d'autres effets d'image (y compris la permutation de plus d'une image à la fois). L'insertion d'une image de survol ajoute automatiquement un comportement Permuter l'image à la page.

Il existe également un comportement Restaurer la permutation d'image, qui restaure le dernier ensemble d'images permutées vers leurs fichiers sources précédents. Ce comportement est automatiquement ajouté chaque fois que vous attachez le comportement Permuter l'image à un objet ; si vous laissez l' option Restaurer sélectionnée lors de l'attachement de Permuter l'image, vous ne devriez jamais avoir besoin de sélectionner manuellement le comportement Restaurer la permutation d'image.

Application du comportement Valider le formulaire

Le comportement Validation de formulaire vérifie le contenu de champs de texte spécifiés pour s'assurer que l'utilisateur a entré le type de données correct. Associez ce comportement à des champs de texte individuels avec l'événement onBlur pour valider les champs pendant que l'utilisateur remplit le formulaire, ou associez-le au formulaire avec l'événement onSubmit pour évaluer plusieurs champs de texte à la fois lorsque l'utilisateur clique sur le bouton Envoyer. Associer ce comportement à un formulaire empêche l'envoi de formulaires contenant des données non valides.

Articles connexes

• Insertion ou modification d’un menu de formulaire HTML dynamique
• Création de cadres et de jeux de cadres