Fermer

juillet 9, 2018

Comment utiliser un composant de l'interface utilisateur jQuery Tooltip dans votre application Web


Apprenez à utiliser un composant de l'interface utilisateur Toolip pour ajouter des étiquettes de texte qui s'affichent lorsqu'un utilisateur survole des clics sur un élément. Utilisez dans des formes aussi.

Bienvenue au Dojo! Bien que nous passions des composants de navigation comme la treeview vous devrez toujours garder vos compétences pointues parce que nous les utiliserons dans les futures leçons. Le thème d'aujourd'hui est des info-bulles.

Une info-bulle est une étiquette de texte qui apparaît lorsqu'un utilisateur survole, se concentre sur ou clique sur un élément. Les info-bulles sont utilisées lorsque vous souhaitez afficher des informations supplémentaires sur un élément comme ses fonctionnalités. Les info-bulles peuvent être appariées avec des étiquettes dans un formulaire pour décrire le type d'information qui entre dans le champ. Et ils peuvent accompagner les boutons d'icônes dans une barre d'outils pour expliquer le comportement de l'outil. À venir, vous verrez comment implémenter une info-bulle Kendo UI dans un formulaire et un groupe de boutons!

La première partie de la création d'une info-bulle est l'identification de la cible. La cible est l'élément qui déclenchera l'info-bulle. Cela peut être un élément span enveloppé dans du texte, une icône ou tout autre élément. La partie suivante spécifie le contenu de l'info-bulle. Vous pouvez le faire en ajoutant un attribut title à l'élément. Par défaut, l'infobulle apparaît au bas de l'élément lorsque vous passez la souris dessus. Ceci est l'implémentation complète pour vous pratiquer dans le Dojo Telerik :

 Exemple d'infobulle d'UI Kendo



  
     Exemple d'UI Kendo 
    
       
  
      

Supposons que vous ne vouliez pas spécifier le contenu de votre info-bulle dans sa cible. Ce serait le cas si le contenu était long ou si vous vouliez le charger depuis une URL. Regardons l'exemple de l'utilisation d'info-bulles sur une étiquette pour un champ de formulaire. Notre exemple contiendra une liste d'exigences pour créer un mot de passe. Au lieu de placer cette information dans l'attribut title du label, il sera défini dans la propriété content de l'API de l'info-bulle. La largeur de l'info-bulle est également définie pour s'adapter à chaque élément sur une ligne. Voici le résultat avec le code mis à jour:

 Démonstration Tooltip Kendo UI avec Form

Enfin, nous allons combiner le composant groupe de boutons avec le composant info-bulle. Le groupe de boutons contiendra les icônes en gras, italique et souligné. Lorsque nous survolons chaque icône, elle affiche son nom. Pour implémenter cela, nous aurons besoin de créer une liste non ordonnée dans notre HTML. Chaque élément

  • représente un élément du groupe de boutons et constitue la cible d'une info-bulle. Ensuite, nous allons initialiser le groupe de boutons avec kendoButtonGroup () . Le contenu de l'info-bulle sera placé dans le code HTML. Chaque élément
  • a donc besoin d'un attribut

    Maintenant, au lieu de donner à chaque bouton un id et d'appeler kendoTooltip () sur chaque article, nous allons utiliser l'option de filtre. Le filtre nous permet d'utiliser le conteneur de notre cible pour initialiser l'info-bulle. Ensuite, nous spécifions le nom de l'élément sur lequel nous voulons afficher les info-bulles dans le filtre. Pour notre exemple, ce sera l'élément

  • . C'est le code:

     Démonstration de l'infobulle de l'interface utilisateur de Kendo avec le groupe de boutons

    Conclusion

    Une infobulle, comme son nom l'indique, peut expliquer les actions des outils et fournir d'autres informations contextuelles sur un élément. Vous pouvez les utiliser seuls ou en conjonction avec d'autres composants de l'UI Kendo comme les boutons groupes de boutons et barres d'outils . En plus de configurer le titre d'une info-bulle, vous pouvez également configurer où elle est positionnée et quel déclencheur l'ouvrira. La position d'une info-bulle peut être en haut, en bas, à gauche, à droite ou au centre. Les déclencheurs comprennent mouseenter cliquez sur et sur .

    À venir dans cette série, le prochain composant que nous allons regarder est la fenêtre. Le composant window est une sorte de modal qui peut être déplacé, redimensionné et fermé. La fenêtre est un outil dont a besoin chaque guerrier UI Kendo si vous voulez créer des interfaces utilisateur plus complexes.

    Essayez l'info-bulle pour vous-même

    Vous voulez commencer à profiter de l'infobulle de Kendo? les composants de l'interface utilisateur de Kendo, comme Grid ou Scheduler? Vous pouvez commencer un essai gratuit de Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.

    Début de mon essai d'interface utilisateur de Kendo

    Versions de réaction et d'affichage

    Vous recherchez un composant d'interface utilisateur pour prendre en charge des frameworks spécifiques? Consultez l'infobulle pour React ou l'infobulle pour Vue .

    Ressources


  • Les commentaires sont désactivés en mode prévisualisation.
    [ad_2]
    Source link