Table des matières:
Vidéo: COMMENT COPIER du TEXTE en JAVASCRIPT 2024
Il se peut que vous souhaitiez que l'utilisateur choisisse une liste d'éléments. AJAX permet aux programmeurs HTML5 et CSS3 cette option. Le widget sélectionnable est un excellent moyen de créer cette fonctionnalité à partir d'une liste ordinaire. L'utilisateur peut faire glisser ou Ctrl + clic sur les éléments pour les sélectionner. Les classes CSS spéciales sont automatiquement appliquées pour indiquer que l'élément est en cours de sélection ou sélectionné.
Procédez comme suit pour créer un élément sélectionnable:
-
Commencez avec une liste non ordonnée.
Créez une liste standard non ordonnée dans votre code HTML. Donnez un identifiant à l'ul pour qu'il puisse être identifié comme un nœud jQuery:
sélectionnable
- alpha
- beta
- gamma
- delta
-
Ajoutez des classes CSS pour la sélection et les états sélectionnés.
Si vous souhaitez que les éléments sélectionnables changent d'aspect lorsque les éléments sont sélectionnés ou sélectionnés, ajoutez des classes CSS comme indiqué. Certaines classes spéciales (ui-selection et ui-selected) sont prédéfinies et seront ajoutées aux éléments aux moments appropriés:
h1 {text-align: center;} #selectable. ui-selection {background-color: gray;} #selectable. ui-selected {background-color: noir; color: white;} -
Dans la fonction init () , spécifiez la liste en tant que nœud sélectionnable.
Utilisez la syntaxe jQuery standard: selectable ().
$ ("# sélectionnable"). sélectionnable ();
La classe est attachée à tous les éléments lorsqu'ils ont été sélectionnés. Assurez-vous d'ajouter une sorte de CSS à cette classe, ou vous ne serez pas en mesure de dire que les éléments ont été sélectionnés.
Si vous voulez faire quelque chose avec tous les éléments qui ont été sélectionnés, créez simplement un groupe d'éléments jQuery avec la classe sélectionnée par l'ui:
var selectedItems = $ (". Ui-selected");
