Comment utiliser un composant de l'interface utilisateur de la fenêtre jQuery dans votre application Web

Nous continuons notre formation sur les composants de mise en page en apprenant comment utiliser le composant Fenêtre, ce qui attire l'attention sur le contenu sans interrompre le fonctionnement normal de l'application.

Dans la dernière leçon vous vous êtes réchauffé en utilisant les infobulles . Cette leçon, nous allons augmenter le niveau de notre formation en apprenant comment utiliser le composant fenêtre.

Une fenêtre Kendo UI est une fenêtre modale avec une barre de titre. Les modaux sont des éléments positionnés sur le contenu d'un document. Les fenêtres sont utilisées lorsque vous souhaitez attirer l'attention sur certains contenus sans interrompre ou entraver le fonctionnement normal de l'application. Par exemple, une fenêtre de navigateur vous permet de visiter des pages Web sur votre ordinateur tout en vous permettant d'interagir avec d'autres applications de votre système d'exploitation. Une fenêtre de discussion sur une page Web vous permet d'envoyer des messages tout en vous permettant d'interagir avec le contenu de la page. Ci-dessous, je vais vous montrer comment utiliser le composant de fenêtre Kendo UI pour créer une fenêtre de discussion

Créer une fenêtre d'interface utilisateur Kendo basique

Le minimum nécessaire pour créer une fenêtre est un élément conteneur. Vous initialisez l'élément avec kendoWindow () . La fenêtre par défaut aura une barre de titre avec un bouton de fermeture et une section pour le contenu. Le contenu sera celui que vous placerez dans l'élément conteneur HTML. Alternativement, il peut être spécifié par l'option contenu qui chargera des données d'une URL. La fenêtre sera également redimensionnable et déplaçable. Voici un exemple à mettre en pratique dans le dojo :

  
    
    
       
  
    
 Hello World 
  

Chargement du contenu dynamique dans une fenêtre

À l'heure actuelle, c'est assez clair. Lors de la mise en œuvre d'une fenêtre, vous aurez envie de le remplir avec plus de contenu. Plus précisément, vous pouvez inclure un titre qui indique le but de la fenêtre et des boutons pour donner à l'utilisateur un choix d'actions. La barre de titre peut également être configurée avec des actions supplémentaires pour manipuler la fenêtre. En plus d'une action de fermeture, il y a une action de minimisation qui masque le contenu de la fenêtre, une action de maximisation qui agrandit la fenêtre pour l'adapter au plein écran et une action de rafraîchissement qui rafraîchit le contenu de la fenêtre lorsqu'une URL a été spécifiée.

Cet exemple est une fenêtre qui récupère des données de l'API Github et affiche le nom de l'utilisateur.

 $ ('# window'). KendoWindow ({
  contenu: {
    url: 'https://api.github.com/users/albertaw',
    template: '# = data.name #',
    dataType: 'json',
    iframe: false
  },
  actions: ['refresh']
}); 

Création d'une fenêtre de discussion

Une fenêtre de discussion est un bon exemple d'utilisation de l'option de contenu. Les messages peuvent être récupérés à partir d'une API et un modèle peut être utilisé pour formater l'affichage. Pour notre exemple, nous allons seulement créer le shell d'une fenêtre de discussion. Mais comme un exercice, vous pouvez expérimenter avec le chargement des données dans la fenêtre. Nous positionnerons notre fenêtre dans le coin inférieur droit de la page. Pour ce faire, je vais créer un élément parent et utiliser un positionnement fixe pour le placer là où je veux sur la page. Ensuite, je vais dire au composant de s'ajouter à l'élément parent avec l'option appendTo . Je vais également supprimer la possibilité de redimensionner et de déplacer la fenêtre. Voici le code mis à jour:

 #parent {
  position: fixe;
  en bas: 0;
  droite: 1em;
  largeur: 20em;
  hauteur: 25em;
}

#contenu {
  hauteur: 16em;
} 

  
 Hello World 
  

    
     Envoyer 
  

 $ (document) .ready (function () {
  $ ('# window'). kendoWindow ({
    titre: "Chat",
    actions: ['maximize', 'close'],
    largeur: "100%",
    appendTo: "#parent",
    draggable: false,
    redimensionnable: false
  });
}); 

Conclusion

À première vue, le composant fenêtre apparaît comme un dialogue, mais fonctionnellement ils sont différents. Les deux sont des fenêtres modales qui apparaissent en haut du contenu de l'application. Toutefois, vous utilisez une boîte de dialogue lorsque vous souhaitez interrompre le fonctionnement normal de l'application. Les boîtes de dialogue y parviennent en désactivant l'interaction avec le contenu d'arrière-plan. Ils ne peuvent pas non plus être déplacés. Vous pouvez utiliser une boîte de dialogue pour une fenêtre d'alerte ou une fenêtre de confirmation.

Le composant de fenêtre peut être rendu immobile, non résiliable, et recevoir une superposition pour qu'il ait le comportement et l'apparence d'un dialogue. Ces options sont utiles lorsque vous souhaitez utiliser le composant window pour créer d'autres composants personnalisés. La clé à retenir est qu'une boîte de dialogue bloque le contenu de l'application et non une fenêtre. La prochaine fois, nous augmenterons encore plus notre entraînement avec le composant splitter.

Essayez la fenêtre par vous-même!

Vous voulez commencer à profiter de la fenêtre Kendo UI ou de l'une des autres 70+ composants d'interface utilisateur Kendo prêts à l'emploi, comme Grid ou Scheduler? Vous pouvez commencer un essai gratuit de Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.

Commencer mon essai d'interface utilisateur de Kendo

Versions angulaire, Réagir et Vue

Vous recherchez un composant d'interface utilisateur pour prendre en charge des frameworks spécifiques? Découvrez la Fenêtre pour l'angle Fenêtre pour la réaction ou Fenêtre pour la vue .

Ressources