Mettre en œuvre les boîtes de dialogue

Comme l'article précédent fait allusion, vous pouvez utiliser un élément div comme un bloc de contenu qui imite le comportement d'une boîte de dialogue. Cet article porte plus spécifiquement à la mise en œuvre effective des boîtes de dialogue dans les applications Web modernes. Problème Vous souhaitez mettre en œuvre des boîtes de dialogue dans les applications Web. Théorie Le titre de cet article montre les mots «les boîtes de dialogue» entre guillemets, parce que l'élément div n'est pas un véritable boîte de dialogue. Au lieu de cela, il est limité aux frontières de la page HTML. En général, vous pouvez placer les boîtes de dialogue réel n'importe où sur l'écran d'ordinateur. Real boîtes de dialogue ne sont pas d'intérêt dans cet article. Ce qui est intéressant est de savoir comment créer un "HTML boîte de dialogue." Par exemple, lorsque l'écriture des pages HTML, vous pouvez utiliser les boîtes de dialogue pour une foule de choses, comme

• Pour fournir des métadonnées associées à un hotspot sur une page HTML

• Pour demander des informations complémentaires au moment de remplir un formulaire ou le traitement d'un workflow

• Menus

• Se comporter comme une icône d'attente Vous pouvez également utiliser des fenêtres popup pour indiquer des échecs, des fenêtres popup un aspect différent des boîtes de dialogue, mais la technique utilisée pour les créer est identique. Solution Deux choses doivent se produire pour rendre un élément div se comporter comme un boîte de dialogue. Tout d'abord, vous devez placer l'élément div sur la page HTML en utilisant des coordonnées absolues. Deuxièmement, vous avez besoin pour réaliser l'élément div conscients de mouvement de souris. L'exemple suivant place deux éléments div 100 pixels à gauche et 100 pixels du haut de la fenêtre du navigateur client.

 Source: / site / ROOT / articles ajax / dhtml / divdialogessentials.html  DIV essentiel de dialogue  Commencer  bonjour 
 Fin

L'exemple de code HTML contient deux éléments div imbriqués l'un dans l'autre. Ignorer l'attribut de classe, comme il est utilisé pour colorer les éléments div. Au lieu de cela, regardez attentivement l'attribut style, qui possède trois propriétés: gauche, haut, et sa position. La propriété position et la valeur absolue indiquent que le positionnement de l'élément utilise des coordonnées absolues. Les coordonnées absolues de la gauche coin supérieur sont donnés par les propriétés du haut et à gauche, respectivement. La largeur et la hauteur, qui indiquent comment large et haute de l'élément div sera, sont portées disparues. Lorsque ces propriétés sont manquantes, le navigateur calcule dynamiquement la largeur et la hauteur. Dans l'exemple de code HTML, un élément div est encapsulé dans l'autre. Les deux éléments div sont placé à 100 pixels de haut et 100 pixels de la gauche. À première vue, les coordonnées absolues d'indiquer que les deux éléments div sont situés dans le même endroit. Cependant, ce n'est pas ce que le navigateur affiche.

Les deux éléments div ne sont pas les uns sur les autres, mais plutôt l'un est relatif à l'autre. C'est un peu déroutant, la position attribut est fixé à l'absolu, si les coordonnées devraient être absolue. La vraie question est: «Quel est absolu?" Par exemple, avez-vous besoin pour calculer toutes les coordonnées absolues à l'égard de l'élément parent? Imaginez si un élément div qui n'est pas placé en utilisant des coordonnées absolues contient un élément div qui est positionnées à l'aide des coordonnées absolues. Qui coordonne serait à l'utilisation confinée élément div? La réponse est qu'il utilise le dernier élément qui est soit positionné: absolute ou position: relative (position: l'héritage est la valeur par défaut). C'est ainsi que vous obtenez le positionnement absolu au sein de positionnement relatif. Comment utiliser les coordonnées, il est possible d'avoir un élément div apparaître et afficher ses informations comme une boîte de dialogue. Vous pouvez ajouter des fonctionnalités où un lien dans la boîte de dialogue "serait masquer la boîte de dialogue contextuel. Pour être en mesure de savoir où faire une boîte de dialogue apparaissent, vous devez capturer le message onclick et le traiter. Le code source suivant fait un élément div apparaissent là où les utilisateurs cliquent sur l'écran. L'élément div contient un lien qui est utilisée pour masquer l'élément div.

 Source: / site / ROOT / articles ajax / dhtml / clickappeardiv.html  DIV essentiel de dialogue  Bonjour un peu de texte Cachez-moi

Dans la page HTML d'exemple, le corps est un élément div unique, ce qui n'est pas affichée lorsque la page HTML est chargée. L'élément div unique est l'élément div qui sera placé quelque part dans la page HTML lorsque la souris est cliqué. Remarquez la largeur, hauteur, et les propriétés de position sont attribués dans la déclaration de l'élément div. Ces propriétés sont par défaut que vous pouvez régler au moment du design, réduisant ainsi la quantité de code, vous devez définir l'affichage de l'élément div.

L'exemple de code contient deux fonctions: DisplayDiv et HideDiv. La fonction DisplayDiv est utilisé pour montrer l'élément div. La fonction HideDiv est utilisée pour masquer l'élément div. Le gestionnaire body.onclick appelle la fonction DisplayDiv. L'élément du corps est utilisée parce que les bulles d'évènement onclick à la hausse de l'enfant au parent, et l'élément div devrait être placé quelque part sur la page HTML affichée. La fonction HideDiv est appelé en cliquant sur le lien qui s'affiche lorsque l'élément div est affichée. Lorsque le chargement d'une page HTML, les utilisateurs sont présentés avec un écran vide. Quand ils cliquez n'importe où sur l'écran, l'élément body capture l'événement click et passe l'événement à la fonction DisplayDiv. Dans la mise en œuvre de DisplayDiv, l'objet de l'événement evt est testé en utilisant une seule ligne. La seule ligne est nécessaire pour une compatibilité inter-navigateur. Une fois l'objet complet de l'événement a été récupéré et affecté à evt, il est supposé qu'un événement de souris est envoyé. Un navigateur envoyé événement de souris a les propriétés clientX et clientY, qui contiennent les coordonnées du clic dans le contexte de la page HTML.

Les coordonnées position de l'élément div utilisant les propriétés style.left et style.top. Après l'élément div a été positionné, vous affichez à l'aide du style.display propriété. Vous pouvez masquer l'élément div en cliquant sur le lien Cachez-moi, ce qui ensuite les résultats dans une page HTML vide. L'affichage et le masquage de l'élément div est assez élémentaire, mais il ya un gotcha cachés. Si un élément div utilise des coordonnées absolues et est encapsulé dans un autre élément div qui utilise des coordonnées absolues, puis en définissant les coordonnées se traduira par un élément mal positionnées. Cela se produit parce que l'événement click utilise des coordonnées relatives au navigateur, et de l'utilisation des éléments encapsulés div coordonnées par rapport à l'élément parent. Pour remédier à ce problème, vous avez besoin pour faire référence à des propriétés différentes, comme le texte suivant réécrit DisplayDiv fonction illustre:

fonction DisplayDiv (evt) (evt = (evt)? evt: ((event)? événement: null); if (evt.layerX) ( x = evt.layerX; y = evt.layerY; ) else if (evt.offsetX) ( x = evt.offsetX; y = evt.offsetY; )var element = document.getElementById ( "display"); element.style.left = x; element.style.top = y; element.style.display = "block";)

Le code en gras représente le code utilisé pour trouver les coordonnées de l'événement click par rapport à l'élément étant cliqué. Le code a deux tests de l'existence de l'une ou layerX offsetX. Si layerX existe, alors vous utilisez aMozilla navigateur compatible, et si offsetX existe, alors vous utilisez Microsoft Internet Explorer. Ce code modifié travailler dans des situations simples, mais il n'est pas fiable, parce que les coordonnées sont relatives à la élément étant cliqué. Par exemple, si vous avez un élément div encapsulé dans un élément div encapsulé dans un élément div, et que vous cliquez sur l'élément div-Orient, les coordonnées relatives seront fausses. En un mot, une fois que vous commencez à utiliser des coordonnées absolues dans des éléments qui sont positionnées à l'aide des coordonnées absolues, vous allez avoir des problèmes figurant sur la véritable situation. Au lieu de cela, utilisez clientX et clientY, et calculer le coordonnées absolues des éléments HTML à l'aide d'une itération récursive. La possibilité d'afficher des éléments div, où l'utilisateur clic vous permet d'implémenter des fonctionnalités de type menu. Vous pouvez implémenter des gestionnaires d'erreurs d'affichage et d'autres messages d'information qui doivent être positionnés. La seule chose que vous ne pouvez pas faire, c'est d'affichage unMessage ou la fonctionnalité que vous pouvez faire glisser vers une autre position sur la page HTML. Pour ce faire, la solution la plus simple consiste à mettre en œuvre la souris vers le bas, déplacez la souris, et déplacez la souris sur pied des événements. Cela semble simple, mais cela nécessite un peu de travail supplémentaire pour le faire de façon certaine.

Pour commencer, vous ne pouvez pas utiliser l'événement onclick, parce que cet événement est envoyé lorsque le bouton de la souris est relâché. Pour mettre en œuvre une opération de glisser, vous devez saisir les onmousedown, onmousemove et les événements onmouseup. Le reste de cet article utilise une solution precanned, parce que tout un peu de détails sont en jeu, et vous pouvez appliquer cette solution de base dans des contextes multiples. La solution consiste à utiliser un fichier à partir du site AWeb appelé Dynamic Drive (ou, dom-drag.js ), 4 qui exige que seuls les utilisateurs de préciser quel élément HTML doit être déplaçable. Les DOM-drag.js application s'occupe de toutes les plus bas des détails d'événements au niveau de la souris clic. La barre d'outils est reconnue comme un point d'accès utilisé pour faire glisser l'élément div autour de la page HTML. Il n'est pas nécessaire de définir un élément div utilisant la notation traditionnelle boîte de dialogue. Le code HTML suivant montre comment vous pouvez définir un élément div comme un hotspot:

 Glissez la DIV  Drag Me 
 lien aucun contenu

Avis code combien mise en page et le code de script existe. Le code de format plus nombreux que le code de script, qui est ce qui va se produire la plupart des implémentations probablement dans votre boîte de dialogue. Avec les DOM-solution drag.js, votre objectif premier est d'apporter une valeur ajoutée en termes de look. Les DOM-drag.js solution ne nécessite pas l'utilisation d'un élément div, comme vous avez pu avoir créé un élément de tableau déplaçable. Rappelez-vous les choses suivantes lors de l'application des boîtes de dialogue:

• Mettre en place une boîte de dialogue en HTML, utilisation des coordonnées absolues, le dessus des propriétés, à gauche, et l'affichage, et onclick ou onmousedown, onMouseMove et les événements de souris onmouseup.

• Lors de la mise en œuvre des boîtes de dialogue, vous allez être confronté à deux problèmes majeurs: l'obtention du droit coordonnées, et en veillant à l'élément qui déclenche l'événement a quelque rapport à l'élément qui sera manipulé. Par exemple, vous ne voulez pas un menu qui apparaît en haut à droite le coin en bas à gauche quand le coin est cliqué. Ce comportement peut dérouter les utilisateurs.

• Toujours délégué glisser-déposer des fonctionnalités pour une autre bibliothèque. Cet article a utilisé les DOM-drag.js solution, mais beaucoup d'autres solutions abondent, et vous êtes invités à les essayer.

un article présenté par Sonja Lande

Disclaimer:Notre site n'est pas responsable du contenu de cet article. Webarticles est une ressource d'information gratuite.
Important: Cet article «Mettre en œuvre des boîtes de dialogue" a été traduit par un logiciel automatique. Nous nous sentons désolés pour les fautes d'orthographe que mai ont eu lieu. Nous vous remercions de votre compréhension.