Solution compatible avec Adelia Web v11 minimum.

 

Lors du déclenchement d'un événement Adélia en soumission classique (non Ajax) dans une page Adélia Web, les navigateurs indiquent l'existence d'un traitement en cours par une barre de progression.
Pour des utilisateurs peu expérimentés dans l'utilisation du Web, cette barre de progression peut être insuffisamment explicite : Il devient nécessaire d'indiquer plus fortement à l'utilisateur qu'un traitement est en cours.
Une solution est d'assombrir la totalité de la page dès qu'un événement Adélia en soumission classique est déclenché : Les éléments de la page restent visibles par transparence sous un masque opaque symbolisant le blocage de la page.

 

<style>
<!--
/* Style du masque appliqué sur la page lors du déclenchement d'un événement en soumission classique */
#masque {
z-index:9999;
position:fixed;
/* couleur de fond du masque */
background-color:#777777;
/* Niveau de transparence du masque : valeur allant de 0 () à 1 () */
opacity : 0.7;
-moz-opacity : 0.7;
-ms-filter: "alpha(opacity=70)"; /* IE 8 */
filter : alpha(opacity=70); /* IE < 8 */ 
top:0px;
left:0px;
width:100%;
height:100%;
cursor:wait; /* curseur sous la forme d'un sablier */
}
-->
</style>
<script>
<!--
AWS.AWSGLOBALS.addEventHandler (window, 'load', function () {
/* Au chargement de la page, ajout d'un écouteur déclenché avant
la soumission de chaque formulaire de la page
*/
	var tab = document.getElementsByTagName('form');
	for (var i =0; i < tab.length; i++)
	{
		tab[i].oldsubmit = tab[i].submit;
		tab[i].submit = function ()
		{
			/* Ecouteur déclenché avant la soumission du formulaire pour un
			événement en soumission classique
			*/
			var me = this;
			/* Création du masque sous la forme d'une balise DIV */
			var div = document.getElementById('masque');
			if (div == null)
			{
				div = document.createElement('div');
				div.id = 'masque';
				var body = document.getElementsByTagName('body')[0];
				body.appendChild(div);
				if (AWS.AWSGLOBALS.ie)
				{
					/* Sous IE, redimentionnement du DIV masque pour prendre
					la hauteur et la largeur de la page
					*/
					if (document.compatMode == 'BackCompat')
					{
						div.style.position = 'absolute';
						div.style.top = document.body.scrollTop + 'px';
						div.style.left = document.body.scrollLeft + 'px';
						div.style.width = body.clientWidth + 'px';
						div.style.height = body.clientHeight + 'px';
					}
					else if (document.compatMode == 'CSS1Compat' && AWS.AWSGLOBALS.BrowserDetect.version == 6)
					{
						div.style.position = 'absolute';
						div.style.top = document.documentElement.scrollTop + 'px';
						div.style.left = document.documentElement.scrollLeft + 'px';
						div.style.width = document.documentElement.clientWidth + 'px';
						div.style.height = document.documentElement.clientHeight + 'px';
					}
				}
			}
			/* Déclenchement de la soumission du formulaire pour traitement de l'événement Adélia associé */
			me.oldsubmit();
		}
	}
}, false);
-->
</script>

 


Articles connexes