J'ai vu cela fait dans beaucoup de sites récemment, mais je ne peux pas sembler suivre une descente. Essentiellement, je veux "désactiver" un panneau entier (c'est sous la forme sur une table HTML) lorsqu'un bouton est cliqué sur un bouton.
Par désactivation Je veux dire que je ne veux pas que les éléments de formulaire dans la table soient utilisables et que je souhaite que la table a tricoté de disparition.
J'ai pu accomplir ceci en mettant un "voile" sur la table avec une DIV absolument positionnée qui a un fond blanc avec une opacité faible (vous pouvez donc voir la table derrière elle, mais ne peut rien cliquer sur quoi que ce soit parce que la div est devant elle). Cela ajoute également l'effet fané que je veux. Cependant, lorsque je fixe la hauteur du voile à 100%, cela ne va que sur la taille de mon écran (n'incluant pas le défilement), donc si un utilisateur fait défiler le haut ou le bas, ils voient le bord du voile et ce n'est pas joli.
Je suppose que cela se fait généralement de manière différente. Est-ce que quelqu'un a des suggestions comme un meilleur moyen d'accomplir cela?
6 Réponses :
Quelqu'un s'il vous plaît corriger-moi si je me trompe, mais j'ai vu JavaScript et certaines bibliothèques de JavaScript dérivées qui ont beaucoup d'options pour accomplir pour ce que vous souhaitez faire. J'ai utilisé la bibliothèque de jQuery pour faire des effets similaires.
Une chose à penser est ce que vous essayez exactement de désactiver. Les tables essentiellement ne sont pas interactives, donc invalidant une table n'abandonnerait pas beaucoup. Si ce sont les éléments de formulaire dans la table que vous souhaitez désactiver. Vous pouvez accomplir cela en utilisant JavaScript.
En utilisant JavaScript pour désactiver les éléments de formulaire, vous pouvez également l'utiliser pour modifier les propriétés des éléments non interactifs.
Un exemple de ceci utiliserait JavaScript pour modifier la couleur de la police et des bordures et d'autres éléments non interactifs dans le tableau pour donner le "look" d'être désactivé. Bien sûr, vous devez toujours utiliser JavaScript pour désactiver les éléments de formulaire.
Vous ne pouvez pas trouver la hauteur de la zone en pixels avec JavaScript? Puis réglez la hauteur de la voile sur ce numéro?
Je n'ai pas le code exact dans ma tête mais offsetheight pourrait faire le tour
J'ai fini par trouver la hauteur du document et l'utiliser pour étirer le voile sur toute la page au lieu d'utiliser seulement 100%: document.documentation.Clientheight;
Vous pouvez essayer JavaScript comme:
Vous êtes en fait manquant bouton , Sélectionnez et TEXAREA s. Ceux-ci peuvent également être handicapés.
Essayez le ci-dessous avec jQuery
Au lieu de cette liste longue, vous pouvez utiliser : entrée . Il y aura une certaine perte de performance, mais pas beaucoup. Peut-être...
La désactivation des éléments internes d'une table HTML peut également être effectuée à l'aide de Pointeur-Events style CSS comme indiqué ci-dessous:
let gameTable = document.getElementById('gameBoard');
gameTable.setAttribute('disabled', true);
Cela devrait être la réponse.
Une autre façon de le faire serait d'utiliser la propriété d'opacité.