Schneller Tipp: Benutzer sortierbare Listen mit Flexbox und JQuery

Dieser Artikel zeigt, wie ein grundlegendes JQuery -Plugin zum Sortieren von Elementen mithilfe von Flexbox- und benutzerdefinierten Datenattributen erstellt wird. Das Plugin numericFlexboxSorting bietet eine einfache Aufstiegs-/Abstiegsortierung basierend auf data-price oder data-length Attributen.

Schlüsselpunkte:

• Funktionalität: Das Plugin -Sorts -Listenelemente (.boxes li standardmäßig) basiert auf ausgewählten Kriterien (Preis oder Länge, aufsteigend oder absteigend). Diese Sortierung wird erreicht, indem die Eigenschaft Flexbox order manipuliert wird.
• Barrierefreiheit Bedenken: entscheidend verändert diese Methode die visuelle Reihenfolge, ohne die DOM -Reihenfolge zu ändern und ein Problem mit der Zugänglichkeit zu erstellen. Die Bildschirmleser und die Tastaturnavigation werden die visuell neu angeordnete Liste nicht widerspiegeln. Robuster, zugängliche Sortierbibliotheken werden für die Produktionsnutzung empfohlen.
• Anpassung: Die Zielelemente für die Sortierung können über die Option elToSort geändert werden.
• Einschränkungen: Das Plugin ist rudimentär und behandelt nur numerische Datenattribute. Es fehlen Fehlerbehandlungen und erweiterte Funktionen in dedizierten Sortierbibliotheken wie Isotope oder Mixitup.

Wie das Plugin funktioniert:

1. Initialisierung: Das Plugin wird initialisiert, indem $(".b-select").numericFlexboxSorting(); (oder mit Optionen zum Sortieren der Elemente angegeben wird).
2. Ereignisbehandlung: a change Ereignishörer auf dem Auswahlelement löst den Sortiervorgang aus.
3. Sortierlogik: Die Funktion sortColumns extrahiert Datenattributwerte, sortiert sie (aufsteigend oder absteigend) und wendet dann die order Eigenschaft anhand der sortierten Werte auf jedes Element an.
.

Überlegungen zur Zugänglichkeit: order Die Verwendung von

für die direkte Sortierung wirkt sich auf die Zugänglichkeit aus. Die visuelle Reihenfolge übereinstimmt nicht mit der Quellreihenfolge, wobei die Fähigkeit der assistiven Technologie, die Struktur der Liste genau darzustellen, genau darstellt.

Alternativen:

Bibliotheken wie Isotope und Mixitup bieten anspruchsvollere und zugängliche Sortier- und Filterfunktionen.

Weitere Entwicklung:

Zu den potenziellen Verbesserungen gehören das Hinzufügen von zufälliger Sortierung, die Unterstützung verschiedener Steuertypen (Schaltflächen usw.) und Verbesserung der Fehlerbehandlung.

Browser -Unterstützung: Das Plugin basiert auf Flexbox, das einen breiten Browser -Support genießt.

Diese überarbeitete Ausgabe behält die ursprüngliche Bedeutung bei, während Sätze umformulieren und Synonyme verwendet werden, um Pseudooriginalität zu erreichen. Das Bild bleibt in seinem ursprünglichen Format und seiner Position.

Das obige ist der detaillierte Inhalt vonSchneller Tipp: Benutzer sortierbare Listen mit Flexbox und JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!