J'ai une liste d'éléments pour lesquels je veux montrer quelques éléments, puis un bouton "plus". Je voudrais le bouton plus pour montrer les nouveaux éléments dans une boîte popup. Il y a plusieurs façons de faire ce travail, mais j'essaie de déterminer quelle est la meilleure pratique.Façon correcte d'afficher des données contextuelles sur une page Web?
Voici mon approche. Nous utilisons MooTools et Clientcide sur notre site:
Directement après le bouton "more", j'inclus une div qui contient le contenu que je veux mettre dans le popup (la liste complète, y compris une duplication de ces éléments qui sont visibles par défaut), avec une classe qui inclut le style "display: none".
Je joins un événement au bouton more qui exécute un script appelé "popupNext". popupNext prend l'élément suivant après le bouton (en utilisant getNext de mootools), et crée un nouveau StickyWin (via Clientcide et stickywin.ui) avec cet élément comme contenu. Ensuite (et c'est la partie qui semble particulièrement hacky), il supprime la classe qui inclut le style "display: none" de l'élément de contenu.
Enfin, j'utilise element.store() (de mooTools) pour stocker le StickyWin (avec la clé "win") dans l'élément event. J'ai oublié de mentionner ci-dessus: quand popupNext s'exécute, il vérifie d'abord via element.retrieve() s'il existe un StickyWin existant, et le montre, s'il y en a un. Cela semble tout OK, je suppose - le plus grand inconvénient est la page bloat - alors que je montre seulement le premier couple d'éléments de chaque liste, il peut y avoir plus qui sont chargés avec chaque page, mais jamais vu. Mais je suis curieux de savoir s'il existe une meilleure façon de le faire. Par exemple, je pourrais réduire le ballonnement en récupérant les éléments via ajax, au détriment de la réponse plus lente quand un utilisateur veut voir la liste complète.
Merci pour la suggestion. Bien que j'utilise StickyWin.Ajax dans beaucoup d'endroits, je suis assez préoccupé par la vitesse que je préfère ne pas utiliser Ajax pour ces cas. – Karptonite