SELFHTML/Aides à la navigation HTML dynamique Solutions pour la pratique| SELFHTML/Aides à la navigation HTML dynamique Solutions pour la pratique |
 |
Barre de navigation dynamique |
|
|
 | |
Sur de nombreuses pages Web, la navigation occupe à vrai dire trop de place. Là c'est souvent un tiers de la fenêtre d'affichage qui est sacrifié, pour une ou deux poignées de liens à d'autres pages du projet. Cet exemple met un point final à ces problèmes de place. Avec cette solution, la page Web appartient toute entière à la structuration libre du contenu et au texte. La navigation n'apparaît que lorsque l'utilisateur le veut. Pour cela, il n'a pas besoin de cliquer exprès quelque part. Il dirige simplement la souris en direction du bord gauche de la fenêtre et déjà apparaît la barre de navigation. S'il éloigne à nouveau la souris du bord gauche de la fenêtre, la barre de navigation disparaît automatiquement. Cet effet est connu par de nombreux utilisateurs sous une forme similaire, celle de la barre des tâches de Windows et y sont pour cette raison habitués.
L'exemple fonctionne avec les navigateurs à partir de la 4 ème génération. L'exemple montre avant tout comment maîtriser le problème des différents modèles de gestion d'événements chez les navigateurs. L'exemple utilise par ailleurs la 
bibliothèque DHTML, pour accéder aux éléments.
 |
Texte source avec explicationsL'exemple montre un fichier HTML complet avec la navigation dynamique. Si vous voulez avoir la navigation sur plusieurs pages, vous devez soit noter le code JavaScript dans toutes le pages, soit le stocker dans fichier JavaScript externe et incorporer simplement celui-ci.
Le fichier dhtml.js, dans lequel sont contenues les fonctions de la bibliothèque DHTML doit être disponible et se trouver dans l'exemple, dans le même répertoire que le fichier HTML.
Exemple d'affichage: aperçu ( Bibliothèque DHTML générale)
<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
<!--
function menus() {
if(DOM) {
if(MS)
getElem("id","Nav",null).style.top = document.body.scrollTop + 50;
else
getElem("id","Nav",null).style.top = window.pageYOffset + 50;
}
if(DOM || MS) {
if (!DOM) getElem("id","Nav",null).style.top = document.body.scrollTop + 50;
if (OP) getElem("id","NavLinks",null).style.pixelTop = NavLinksPos;
getElem("id","Nav",null).style.visibility = "visible";
}
else if(NS) {
getElem("id","Nav",null).visibility = "show";
getElem("id","Nav",null).top = window.pageYOffset + 50;
}
}
function aucun_menu() {
if(DOM || MS)
getElem("id","Nav",null).style.visibility = "hidden";
if(NS)
getElem("id","Nav",null).visibility = "hide";
}
function handleMove(ev) {
if(!MS) {
Event = ev;
if(Event.screenX < 270)
menus();
else if(Event.screenX > 420)
aucun_menu();
}
}
function MShandleMove() {
if(MS) {
if(window.event.clientX < 270)
menus();
else if(window.event.clientX > 420)
aucun_menu();
}
}
function Event_init() {
if(DOM && !MS && !OP) {
getElem("tagname","body",0).addEventListener("mousemove", handleMove, true);
}
if(NS) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=handleMove;
}
if (DOM && OP) {
document.onmousemove=handleMove;
NavLinksPos=42; //Position du passage NavLinks
getElem("id","NavLinks",null).style.pixelTop=NavLinksPos;
}
if (MS) getElem("tagname","body",0).onmousemove=MShandleMove;
}
//-->
</script>
<style type="text/css">
<!--
body { margin-left:50px; margin-top:20px; margin-right:50px; }
#Nav { position:absolute; top:50px; left:0px; padding:0px; visibility:hidden; margin:0px; }
#NavLinks { position:absolute; top:42px; left:42px; padding:0px; }
a.nav:link { color:#000080;
font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
a.nav:visited { color:#000080;
font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
a.nav:hover { color:#FFFFFF; background-color:#000080;
font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
a.nav:active { color:#000080;
font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
-->
</style>
</head>
<body onLoad="Event_init()" background="navigation_back.gif" bgcolor="#FFFFFF">
<div id="Nav">
<img src="navigation.gif" width="250" height="450" border="0" alt="">
<div id="NavLinks">
<style type="text/css">
<!--
a.nav:link { color:#000080;
font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
a.nav:visited { color:#000080;
font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
a.nav:hover { color:#FFFFFF; background-color:#000080;
font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
a.nav:active { color:#000080;
font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
-->
</style>
<a class="nav" href="http://fr.selfhtml.org/"><b>SELFHTML</b></a><br>
<a class="nav" href="http://actuel.fr.selfhtml.org/"><b>SELFHTML actuel</b></a><br>
<a class="nav" href="http://forum.fr.selfhtml.org/"><b>Forum SELFHTML</b></a><br>
<a class="nav" href="http://actuel.fr.selfhtml.org/articles/index.htm"><b>Articles spécialisés SELFHTML</b></a><br>
</div>
</div>
<h1>La page à la navigation astucieuse</h1>
<p>Dirigez simplement la souris en direction du bord gauche de la fenêtre.
Pour que le menu disparaisse à nouveau, dirigez la souris à nouveau vers le bord droit de la fenêtre.</p>
<p>Et maintenant viennent encore de nombreux paragraphes vides, afin qu'il soit aussi possible de voir que le menu apparaît toujours au même endroit, peu importe jusqu'où on a fait défiler la fenêtre.</p>
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
<p>Bien, ça devrait suffire :-)</p>
</body></html>
|
Dans la passage HTML visible est d'abord noté un grand passage div qui est positionné de façon absolue à l'aide de mentions CSS (les mentions à cet effet sont placées dans un passage style de l'entête de fichier) et qui contient aussi la mention visibility:hidden. Cela signifie que tout ce qui se trouve dans un premier temps dans ce passage, n'est d'abord pas du tout affiché. Dans ce passage avec le nom id Nav est d'abord noté un graphique (navigation.gif) et ensuite un autre passage div positionné de façon absolue, où néanmoins les affectations CSS telles que top:42px ou bien left:42px sont à interpréter de façon relative par rapport au bord supérieur gauche du passage div parent. Le graphique navigation.gif est simplement un support optique pour le passage div qui suit et qui contient les liens proprement-dits de la barre de navigation.
Le reste du code HTML statique noté dans le fichier est superflu pour l'exemple. Les nombreux paragraphes de texte avec l'espace imposé &npsp; qui les sépare, n'ont pour seul but que de créer une bonne hauteur au document pour que l'on puisse faire défiler la fenêtre. Car il faut démontrer que la barre de navigation dynamique apparaît toujours au même endroit, même si on a fait défiler la page.
Dans le repère d'ouverture <body> du fichier est noté le gestionnaire d'événement onLoad. Quand le document est complètement chargé, la fonction Event_init() est appelée. Event_init() met en branle la surveillance des mouvements de souris dans le document. Car ce n'est que si une telle surveillance a lieu que la barre de navigation peut apparaître de façon dynamique.
La gestion d'événements est malheureusement un chapitre ardu étant donné que les implémentations sont jusqu'alors encore très différentes. L'exemple essaie d'abord d'après la nouvelle syntaxe DOM. La requête if(DOM && !MS && !OP) s'assure d'abord que ni l'Explorer Internet ni Opera 5.12 ne soient concernés par cet embranchement, étant donné que tous les deux dans leur version 5.x interprètent certes l'accès aux éléments du modèle DOM mais pas encore la gestion d'événements d'après la syntaxe du modèle DOM. Dans l'embranchement correspondant est cependant concerné Netscape 6.x, qui comprend la méthode addEventListener(), avec laquelle d'après la syntaxe du modèle DOM une fonction est déterminée pour être appelée quand un certain événement survient. Dans l'exemple est surveillé l'événement mousemove. Pendant que l'utilisateur bouge la souris dans le domaine du document. cette "instruction d'enregistrement" fait en sorte qu'ensuite la fonction handleMove() soit appelée aussi souvent que possible. Pour déterminer l'élément à surveiller, la fonction getElem() de la bibliothèque DHTML générale est appelée.
Avec if(NS) la fonction Event_init() demande si un navigateur Netscape de la quatrième génération est en service. Il y a là également un "enregistrement" pour les événements. Avec document.captureEvents(Event.MOUSEMOVE) l'événement "mouvement de souris" est enregistré et avec document.onmousemove=handleMove la fonction handleMove() est appelée quand survient l'événement.
Les navigateurs Opera supportant DHTML suivent l'instruction if (DOM && OP) . Ici l'initialisation de la gestion d'événement se fait avec document.onmousemove=handleMove. Étant donné qu'Opera 5 sous Windows oublie manifestement la position du passage Div NavLinks, la position fixée dans le passage de style est sauvegardée dans la variable NavLinksPos. Ensuite, le passage NavLinks est à nouveau positionné. Afin que même les versions plus anciennes d'Opera comprennent également, ls propriété pixelTop est utilisée. pour déterminer l'élément, la fonction getElem() de la bibliothèque DHTML générale est appelée.
Pour l'explorer Internet, le traitement de l'événement se structure malheureusement quelque peu différemment. Avec if (MS), le passage s'appliquant à l'Explorer Internet de la fonction Event_init() est traité. Ici aussi la fonction getElem() de la bibliothèque DHTML générale est employée. Contrairement aux autres navigateurs, c'est ici la fonction MShandleMove() qui est appelée si l'événement survient. On s'assure ici avec if(MS) qu'aucun autre navigateur que l'Explorer Internet n'est actif. En fonction de cela est recherché, avec window.event.clientX, l'espace qui sépare le curseur de la souris du bord gauche de la fenêtre. S'il est inférieur à 270 pixels, la fonction menus() est appelée. S'il est supérieur à 420 pixels, c'est la fonction aucun_menu(). C'est exactement la même chose qui se passe dans la fonction handleMove(), à laquelle aboutissent les navigateurs Netscape. Là l'espace qui sépare le curseur de la souris du bord gauche de la fenêtre est interrogé avec cependant la propriété screenX. Ce sont les mille petites différences entre les navigateurs qui peuvent faire tourner en bourrique les programmeurs. Quoiqu'il en soit, tous ces embranchements avec if tomberont un jour à l'eau et tous les navigateurs comprendront la syntaxe du modèle DOM.
La fonction menus() fait apparaître la barre de navigation et la fonction aucun_menu() fait en sorte que la barre de navigation ne soit pas ou ne soit plus visible. Ces deux fonctions exécutent à cette fin à nouveau diverses requêtes if pour différencier les modèles DHTML et modifient pour finir la propriété CSS visibility (visibilité) du grand passage div avec le nom Id Nav. La fonction menus() s'assure en outre cependant que le passage de navigation qu'elle a connecté sur visible soit également toujours bien affiché dans le domaine visible du document, même si l'utilisateur a fait défiler la fenêtre. À cette fin, la fonction doit rechercher la position en pixels actuelle du "rouleau" que représente un long document. Même ici la syntaxe est complètement différente pour les navigateurs. Pour l'Explorer Internet, la fonction obtient la valeur désirée par la propriété document.body.scrollTop, et pour les navigateurs Netscape et Opera par window.pageYOffset. Aux valeurs trouvées sont encore ajoutés 50 pixels, car dans le passage div avec le nom Id Nav est mentionnée en tant que mention top, à savoir en tant que position de départ à partir du haut une valeur de 50.
Étant donné qu'Opera 5 "oublie" les positions fixées par JavaScript lors de la modification de la taille de la fenêtre, la position sauvegardée dans la variable NavLinksTop est affectée au passage NavLinks avant chaque apparition du menu.
Peut être vous posez vous la question encore maintenant d'où viennent les valeurs 270 et 420 pour l'espace qui sépare le curseur de la souris du bord gauche de la fenêtre et qui décident de l'appel de menus() et de aucun_menu(). Il n'y a pas grand chose à dire de plus que ce sont des valeurs empiriques testées avec différents navigateurs. En règle générale, cela ne fonctionne plus par exemple si la plus faible valeur est inférieure à 250. Pourquoi, c'est un mystère. Mais ces mystères feront partie du quotidien de la programmation en DHTML, aussi longtemps que les interpréteurs JavaScript ne seront pas encore au point.
Expliquez toujours à l'utilisateur sur la première page où est mise en place une telle navigation, brièvement en une phrase comment s'en servir. Soyez également conscient que les utilisateurs dont le navigateur ne supporte pas DHTML ou qui l'ont désactivé, ne disposeront d'aucune possibilité de navigation de la façon dont est noté l'exemple. Pour permettre au moins aux utilisateurs ayant désactivé JavaScript de naviguer, vous pouvez par exemple noter à un endroit approprié du texte normal, un passage Noscript dans lequel vous notez encore les liens de navigation.
|
| |
 |
Affichage de la date et de l'heure
|
 |
Bibliothèque DHTML générale
|
| SELFHTML/Aides à la navigation HTML dynamique Solutions pour la pratique |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org