Vidéo: Quels langages apprendre pour créer un site web ? 2025
Certains types de tri sont faciles à faire pour les ordinateurs, et vous voulez que votre code CSS3 crée cette situation. Par exemple, un ordinateur peut placer les éléments dans l'ordre alphabétique beaucoup plus rapidement qu'un humain, surtout quand la liste est longue.
Cependant, les tris ne sont pas toujours logiques. Vous pouvez demander à l'utilisateur de trier une liste d'éléments en fonction de préférences personnelles ou d'autres critères que l'ordinateur ne peut même pas comprendre. Dans ces cas, vous avez besoin d'un moyen de permettre les tris manuels - et cet exemple vous donne exactement ce dont vous avez besoin.
L'exemple suivant permet à un utilisateur de trier des éléments en fonction de critères non spécifiés. (Vous pouvez trouver le code complet pour cet exemple dans le dossier Chapter 06Interactions du code téléchargeable sous SortContent.HTML.)
$ (function () {$ ("# SortMe"). Sortable ();}) function ShowResults () {// Crée la chaîne de sortie. var Output = "L'ordre de tri est: n"; // Localise chacun des éléments requis et // les ajoute à la chaîne. $ ("# SortMe p"). each (function (index, element) {Output + = élément. innerHTML. substr (74);}); // Affiche le résultat. alert (Output);}
L'appel sortable () est tout ce dont vous avez besoin pour rendre la liste visiblement triable. L'utilisateur peut placer les éléments, quels qu'ils soient, dans l'ordre souhaité. Cependant, pour que cet appel fonctionne, vous devez créer un conteneur (un dans ce cas) et une liste d'éléments, en particulier des balises
. L'identifiant SortMe va avec.
L'accès aux articles dans l'ordre est également une exigence. Sinon, il ne sert à rien de laisser l'utilisateur trier les éléments. Dans ce cas, il est en fait plus facile d'utiliser d'autres fonctionnalités jQuery pour obtenir la liste des éléments dans l'ordre dans lequel ils apparaissent et les traiter de cette façon.
ShowResults () montre une technique pour effectuer cette tâche. Vous commencez par créer le sélecteur approprié, qui commence par SortMe et se termine par chaque balise
qu'il contient. La fonction anonyme reçoit à la fois un index et un argument d'élément. En vérifiant la propriété innerHTML de l'élément, vous pouvez obtenir le nom de cette balise
. Le résultat est affiché dans une boîte de dialogue.
Cet exemple utilise également un style CSS spécial de l'interface utilisateur jQuery. Ce style crée une flèche à double extrémité qui aide l'utilisateur à comprendre que chaque élément peut monter ou descendre dans la liste. Vous le créez en utilisant un comme ceci:
Vous pouvez trouver une liste de ces icônes sur le framework CSS jQuery UI. Il est important de créer des icônes correspondant à la manière dont votre liste apparaît à l'écran.
