Dernière mise à jour le Samedi 9 Octobre 2005
Si vous avez un compte gmail et que vous utilisez l'interface web, vous avez sans doute remarqué le petit encadré qui s'affiche dans le coin de l'écran et qui vous demande de patienter durant les opérations.
Ce petit procédé visuel apporte un petit plus niveau ergonomie, nous allons voir comment le mettre en oeuvre très facilement.
Pour illustrer l'exemple, nous allons reprendre le code permettant de charger un fichier dans un champ texte et le remanier un peu.
Le code HTML suivant peut être placé n'importe où, tachez de le positionner d'une manière convenable dans le flux général.
<div id="messageChargement">Chargement en cours</div>
Donnons lui un style et plaçons le au milieu de la page:
#messageChargement {
background-color: #cc4444;
border: 1px solid #fff;
color: #fff;
display: none;
height: 20px;
padding: 1em;
width: 120px;
text-align: center;
position: fixed;
top: 50%;
left: 50%;
margin-left: -60px;
margin-top: -10xp;
}
Le message n'est pas visible étant donné que nous avons mis none à l'attribut display, mais voici à quoi il devrait ressembler:
La mise en place de déroule comme dans l'exemple sur lequel nous nous basons. Nous allons juste modifier les deux fonctions. La fonction de callback tout d'abord:
// Déclaration de la fonction de callback
var remplirChamp = function (obj) {
str = obj.responseText;
rExp = '/"/';
document.getElementById('champCible').value = str.replace(rExp, '\"');
// Ajout du code suivant permettant de cacher le message
document.getElementById('messageChargement').style.display = 'none';
}
Modifions à présent la fonction qui lance le chargement et désormais affiche également le message:
function chargeFichier() {
// Création de l'objet
var XHR = new XHRConnection();
// Chargement de la page
// Natures des paramètres
// + string, fichier à charger
// + string, GET ou POST
// + ref, nom de la fonction de callBack
XHR.sendAndLoad("sample.txt", "GET", remplirChamp);
// Ajout du code suivant permettant de montrer
// le message dès la soumission de la requête
document.getElementById('messageChargement').style.display = 'block';
return true;
}
Remarque: Il se peut que le chargement se fasse trop rapidement, auquel cas, le message s'affichera pour aussitôt disparaître. Vous pouvez toujours jouer sur un délai avant de le laisser s'éclipser (setTimeOut).