|
| Home → WEBDEV 2025 → Astuce : Appliquer un GFI, non à une page entière, mais à une cellule |
| Astuce : Appliquer un GFI, non à une page entière, mais à une cellule |
| Started by René MALKA, May, 08 2025 5:24 PM - No answer |
| |
| | | |
|
| |
Registered member
274 messages |
|
| Posted on May, 08 2025 - 5:24 PM |
Bonjour,
Il vous est peut-être arrivé d'avoir dans une de vos pages plusieurs champs cellules, contenant d'autres champs, et de vouloir appliquer un GFI (grisage et blocage) à chacune d'entre elles.
Mais voilà, la fonction PageActiveGFI() concerne l'intégralité d'une page et non une partie distincte, par exemple lors de l'ouverture d'une Popup.
Il faut nativement beaucoup de code pour un résultat équivalent mais limité au contenu d'une cellule...
Voici une solution pratique et simple pour obtenir ce résultat.
Pour notre exemple, nous allons partir de cette composition :
Où nous avons un champ interrupteur (INT_GFIActiver), à gauche, qui va agir sur la cellule à droite (CELL_Champs). Cette cellule contenant d'autre champs.
En agissant sur cet interrupteur nous allons bloquer l'accès aux champs contenus dans la cellule, tout en faisant apparaître un grisage de la cellule.
Suivons ces étapes :
1 - Convenez d'un préfixe d'ID d'une DIV de recouvrement, ici nous aurons "celGFI"
2 - Créer deux procédures en pur JavaScript / jQuery, l'une étant celluleGFIActive(), et l'autre celluleGFIDesactive() (ci-dessous)
3 - Dans le code de l'interrupteur, suivant sa valeur (O/N), nous déclencherons l'une ou l'autre de ces deux fonctions.
4 - Avec en paramètres pour la 1ère, celluleGFIActive(), l'alias (ID) de la cellule, et le taux de GFI désiré, une valeur entre 0.1 et 1, 1 étant la valeur par défaut.
5 - Pour la 2ème, celluleGFIDesactive(), seul l'alias de la cellule est nécessaire.
Voilà la première des deux fonctions, celle qui active le GFI de la cellule :
// Active un GFI limité à un champ cellule function celluleGFIActive(aliasCellule, tauxOpacite) { var opac = tauxOpacite ? tauxOpacite : 1; var celGFI = "celGFI" + aliasCellule; $("#" + celGFI).remove() $(" ").css({ position: "absolute", width: "100%", height: "100%", left: 0, top: 0, zIndex: 100000, background: "#ccc", opacity: opac }).appendTo($("#"+aliasCellule).css("position", "relative")); }
Et voilà la deuxième fonction, la désactivation :
// Désactive le GFI préalablement activé
function celluleGFIDesactive(aliasCellule)
{
$("#celGFI" + aliasCellule).remove()
}
Dans le code navigateur de l'interrupteur vous aurez deux possibilités :
1 - Le plus simple est de tester la valeur de INT_GFIActiver et de déclencher l'une des deux fonctions au changement de sa valeur.
2 - Vous aurez peut-être aussi le cas où ce n'est pas un champ interrupteur qui déclenche le GFI de la cellule, et que vous désiriez que ce soit l'état de GFI qui détermine le basculement. Pour cela une solution simple c'est de tester l'existence de la DIV de recouvrement dans la page :
SI jQuery("#celGFI"+CELL_Champs..Alias).length ALORS
celluleGFIDesactive(CELL_Champs..Alias)
SINON
celluleGFIActive(CELL_Champs..Alias,0.4)
FIN
3 - Vous remarquerez l'ID "celGFI" en chaine, qui ne peut malheureusement par être une constante. Il faut donc faire attention à ce qu'il soit identique dans toutes les fonctions.
4 - L'association de cet ID avec l'alias de la cellule permet d'appliquer ce GFI sur différentes et distinctes cellules dans une même page.
Voilà, en espérant que cela puisse aider ou au moins inspirer certains d'entre vous 
Restant à l'écoute de questions éventuelles.
Cordialement
--
René MALKA |
| |
| |
| | | |
|
| | | | |
| | |
|