Astuce rapide: listes de sortables de l'utilisateur avec Flexbox et JQuery

Cet article montre comment créer un plugin jQuery de base pour le tri des éléments à l'aide d'attributs FlexBox et de données personnalisés. Le plugin, numericFlexboxSorting, offre un tri / descendant simple basé sur les attributs data-price ou data-length.

Points clés:

• Fonctionnalité: Les éléments de liste des plugins (.boxes li par défaut) en fonction des critères sélectionnés (prix ou longueur, ascendant ou descendant). Ce tri est réalisé en manipulant la propriété Flexbox order.
• Préoccupations d'accessibilité: Surtout, cette méthode modifie l'ordre visuel sans modifier l'ordre DOM, créant un problème d'accessibilité. Les lecteurs d'écran et la navigation au clavier ne refléteront pas la liste visuellement réorganisée. Des bibliothèques de tri plus robustes et accessibles sont recommandées pour une utilisation en production.
• Personnalisation: Les éléments cibles pour le tri peuvent être modifiés via l'option elToSort.
• Limitations: Le plugin est rudimentaire et gère uniquement les attributs de données numériques. Il manque de gestion des erreurs et de fonctionnalités avancées trouvées dans les bibliothèques de tri dédiées comme l'isotope ou le mixitup.

Comment fonctionne le plugin:

1. Initialisation: Le plugin est initialisé en appelant $(".b-select").numericFlexboxSorting(); (ou avec des options pour spécifier les éléments à trier).
2. Gestion des événements: A change L'écouteur d'événements sur l'élément sélectionné déclenche le processus de tri.
3. Logique de tri: La fonction sortColumns extrait les valeurs d'attribut de données, les trie (ascendant ou décroissant), puis applique la propriété order à chaque élément en fonction des valeurs triées.

Considérations d'accessibilité: L'utilisation de order pour le tri a un impact direct sur l'accessibilité. L'ordre visuel ne correspond pas à l'ordre source, brisant la capacité de la technologie d'assistance à représenter avec précision la structure de la liste.

Alternatives: Les bibliothèques comme l'isotope et le mixitup offrent des capacités de tri et de filtrage plus sophistiquées et accessibles.

Développement supplémentaire: Les améliorations potentielles incluent l'ajout de tri aléatoire, la prise en charge de différents types de contrôle (boutons, etc.) et l'amélioration de la gestion des erreurs.

Prise en charge du navigateur: Le plugin s'appuie sur Flexbox, qui bénéficie d'un large support de navigateur.

Cette sortie révisée maintient la signification d'origine lors de la reformulation des phrases et de l'utilisation de synonymes pour atteindre la pseudo-originalité. L'image reste dans son format et sa position d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!