Skip to Content
Last modified by Julien EYMERY on 2015/06/30 09:05
Show last authors
1 {{hardis-info type="warning" icon="true"}}
2 Solution compatible avec Adelia Web v11 minimum.
3 {{/hardis-info}}
4
5
6
7 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.
8 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.
9 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.
10
11
12
13 {{code language="xml" language="xml"}}
14 <style>
15 <!--
16 /* Style du masque appliqué sur la page lors du déclenchement d'un événement en soumission classique */
17 #masque {
18 z-index:9999;
19 position:fixed;
20 /* couleur de fond du masque */
21 background-color:#777777;
22 /* Niveau de transparence du masque : valeur allant de 0 () à 1 () */
23 opacity : 0.7;
24 -moz-opacity : 0.7;
25 -ms-filter: "alpha(opacity=70)"; /* IE 8 */
26 filter : alpha(opacity=70); /* IE < 8 */
27 top:0px;
28 left:0px;
29 width:100%;
30 height:100%;
31 cursor:wait; /* curseur sous la forme d'un sablier */
32 }
33 -->
34 </style>
35 <script>
36 <!--
37 AWS.AWSGLOBALS.addEventHandler (window, 'load', function () {
38 /* Au chargement de la page, ajout d'un écouteur déclenché avant
39 la soumission de chaque formulaire de la page
40 */
41 var tab = document.getElementsByTagName('form');
42 for (var i =0; i < tab.length; i++)
43 {
44 tab[i].oldsubmit = tab[i].submit;
45 tab[i].submit = function ()
46 {
47 /* Ecouteur déclenché avant la soumission du formulaire pour un
48 événement en soumission classique
49 */
50 var me = this;
51 /* Création du masque sous la forme d'une balise DIV */
52 var div = document.getElementById('masque');
53 if (div == null)
54 {
55 div = document.createElement('div');
56 div.id = 'masque';
57 var body = document.getElementsByTagName('body')[0];
58 body.appendChild(div);
59 if (AWS.AWSGLOBALS.ie)
60 {
61 /* Sous IE, redimentionnement du DIV masque pour prendre
62 la hauteur et la largeur de la page
63 */
64 if (document.compatMode == 'BackCompat')
65 {
66 div.style.position = 'absolute';
67 div.style.top = document.body.scrollTop + 'px';
68 div.style.left = document.body.scrollLeft + 'px';
69 div.style.width = body.clientWidth + 'px';
70 div.style.height = body.clientHeight + 'px';
71 }
72 else if (document.compatMode == 'CSS1Compat' && AWS.AWSGLOBALS.BrowserDetect.version == 6)
73 {
74 div.style.position = 'absolute';
75 div.style.top = document.documentElement.scrollTop + 'px';
76 div.style.left = document.documentElement.scrollLeft + 'px';
77 div.style.width = document.documentElement.clientWidth + 'px';
78 div.style.height = document.documentElement.clientHeight + 'px';
79 }
80 }
81 }
82 /* Déclenchement de la soumission du formulaire pour traitement de l'événement Adélia associé */
83 me.oldsubmit();
84 }
85 }
86 }, false);
87 -->
88 </script>
89 {{/code}}
90
91
92 (((
93 ==
94 Articles connexes ==
95 )))
96
97 Les articles connexes apparaissent ici en fonction des étiquettes que vous avez sélectionnées. Cliquez pour modifier la macro et ajouter ou modifier des étiquettes.
98
99 {{liveData sort="doc.date:desc" source="liveTable" properties="doc.title,doc.date,doc.author" description="Recently updated" limit="5" filters="tag=web événement" sourceParameters="translationPrefix=platform.index."}}{{/liveData}}
100