Fermer

août 29, 2018

Comment utiliser un composant jQuery MultiSelect UI dans votre application Web


Apprenez à utiliser un composant MultiSelect pour permettre aux utilisateurs de choisir des balises pour un article de blog ou des garnitures sur une pizza, ainsi que les différences entre HTML et interface utilisateur de Kendo.

Composant DropDownList . La liste déroulante nous a permis de sélectionner un seul élément dans une liste d'éléments. Le prochain composant que nous passerons en revue est le MultiSelect – comme son nom l’indique, ce composant vous permet de sélectionner plusieurs éléments dans une liste d’éléments.

Vous pouvez utiliser un MultiSelect pour laisser les utilisateurs choisissent des tags pour un article de blog ou choisissent des garnitures sur une pizza. Il est possible de créer une liste déroulante avec plusieurs sélections en utilisant du HTML simple. Mais avec Kendo UI vous avez plus de contrôle sur le comportement et l'apparence de l'élément. Dans cet épisode, vous apprendrez les différences entre le menu déroulant HTML à sélection multiple et le composant MultiSelect de l'interface utilisateur Kendo .

Sélection multiple HTML

Création d'un composant MultiSelect avec HTML est identique à la création d'un menu de sélection avec l'ajout de l'attribut multiple . Cela change le menu de sélection d'une liste déroulante à un élément avec tous les éléments visibles pour vous de choisir. Vous pouvez également limiter le nombre d'éléments visibles avec l'attribut size . Pour effectuer des sélections multiples, sous Windows, maintenez la touche «Ctrl» enfoncée tout en cliquant sur les options. Sur Mac, vous maintenez la touche «commande». Voici à quoi ressemble notre élément avant qu'il ne soit initialisé en tant que composant d'interface utilisateur Kendo:

Exemple de sélection multiple

`` `html

]

<meta charset = "utf-8" >

] Sans titre

<select id = "multiselect" multiple>

<option valeur = "0" > CSS [19659002]

<option value = "1" > JavaScript

<option value = "2" > Réagir

<option value = "3" > angulaire

19659002]

`` `

Composant MultiSelect de l'interface utilisateur Kendo

Pour transformer l'élément en un composant d'interface utilisateur Kendo, il suffit d'ajouter le code suivant après le marquage:

`` `html

[19659002]

`` `

Exemple de sélection multiple

La différence est maintenant qu'il existe un champ de texte permettant de saisir des éléments et que les options ne sont affichées que lorsque vous vous êtes concentré sur le champ de texte. Les éléments sélectionnés sont visibles comme une balise dans le champ de texte ainsi que dans la liste déroulante. De plus, vous n'avez pas besoin de maintenir de touches spéciales pour sélectionner ou supprimer des options. Vous cliquez simplement sur l'article. Pour supprimer une sélection, vous pouvez cliquer sur le bouton "x" dans la balise ou cliquer sur l'élément de la liste déroulante.

Fonctions supplémentaires du MultiSelect

Il n'est pas nécessaire de répertorier toutes nos options dans le balisage . Nous pouvons les configurer dans l’API du composant. Il s'agit du code refactorisé avec les options supprimées de l'élément select et défini dans le champ dataSource :

`` `html

[19659002] <select id = "multiselect" multiple>

`` `

Une autre fonctionnalité du MultiSelect est le filtrage. Vos options peuvent être filtrées en fonction de la valeur entrée dans le champ de texte. Vous pouvez rechercher des options qui commencent par la valeur, se terminer par la valeur ou contenir la valeur. Par défaut, lorsque vous tapez dans le champ de texte, vous verrez des options qui commencent par la valeur. Voici un exemple d'implémentation du filtrage pour obtenir des suggestions contenant la valeur spécifiée:

`` `js

$ ( '#multiselect' ). kendoMultiSelect ({

filtre: 'contains'

})

`` `

Résumé

Le composant MultiSelect est similaire à une liste déroulante qui vous permet de choisir plusieurs éléments dans un groupe d'éléments associés. La conception du MultiSelect est une amélioration considérable par rapport à la version HTML par défaut. Les options étant masquées, vous ne risquez pas de submerger l'utilisateur avec trop d'informations. De plus, il prend moins de place sur votre page. Ceci est particulièrement utile lorsque vous avez une longue liste d'options. Dans ce cas, vous n'avez pas à définir les options à l'intérieur de l'API. Les informations peuvent être extraites d'une URL ou d'un autre fichier contenant JSON. Ceci est possible avec le composant MultiSelect .

Dans le prochain épisode, vous apprendrez à connaître le ComboBox . Le ComboBox est également une liste déroulante, mais vous pouvez entrer manuellement les options qui n'ont pas encore été définies.

Essayez le MultiSelect pour vous-même

Vous souhaitez commencer à tirer parti du Kendo UI jQuery MultiSelect ou l'un des 70 autres composants de l'interface utilisateur Kendo prête à l'emploi, comme Grille ou Scheduler ? Vous pouvez commencer une version d'évaluation gratuite du Kendo UI dès aujourd'hui et commencer à développer vos applications plus rapidement.

Lancer mon test de l'interface utilisateur Kendo

Versions angulaire, réactive et vue

Consultez le MultiSelect pour Angular, MultiSelect pour React ou le MultiSelect pour Vue .

Ressources

Les commentaires sont désactivés en mode prévisualisation.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link