Fermer

août 3, 2018

Comment utiliser un composant d'interface utilisateur jQuery Splitter


Apprenez à créer l'interface utilisateur de votre propre IDE avec seulement trois composants d'interface utilisateur Kendo: Splitter, TreeView et TabStrip.

Dans le premier article sur le composant Splitter nous avons découvert Répartiteur d'interface utilisateur Kendo . Ici, nous allons nous appuyer sur ce que nous avons appris en utilisant plusieurs composants ensemble.

Notre objectif est de créer un IDE avec une interface utilisateur Kendo. Les guerriers du Kendo UI travaillent sur des missions de codage très secrètes et ont développé leur propre langage de programmation pour garder leur travail caché. Par conséquent, ils ont besoin de leur propre éditeur capable de compiler ce langage propriétaire. Pour cette affectation, nous allons nous concentrer sur la construction de l'interface utilisateur de l'EDI qui utilisera les composants Splitter TreeView et TabStrip .

Mise en route [19659005] Le conteneur pour l'EDI sera un séparateur avec deux volets horizontaux. Le volet de gauche contiendra un composant TreeView pour afficher les fichiers et les répertoires du projet. Le volet de droite sera divisé en un volet supérieur et inférieur. Le volet supérieur contiendra un TabStrip pour naviguer entre les fichiers. Le volet inférieur servira de console. Avant de commencer, nous aurons besoin d'un squelette du code. Cet exemple utilisera le thème Bootstrap. Commençons par copier ce qui suit pour pratiquer dans le Kendo UI Dojo :




  
     



Le composant Splitter

Ensuite, incluons le code du composant Splitter . Notre application utilisera en fait deux composants Splitter . Un composant Splitter sera utilisé pour créer les volets gauche et droit, l’autre composant Splitter situé dans le volet droit pour le diviser en deux volets horizontaux.

Ajoutons le balisage et JavaScript suivants dans le document :

Voici à quoi devrait ressembler l'application jusqu'à présent:

 Exemple de séparateur d'interface utilisateur Kendo

Le composant TreeView

Pour créer le composant TreeView un autre élément doit être placé dans le volet de gauche. Normalement, dans un environnement de développement intégré, les fichiers et les dossiers varient d’un projet à l’autre. Nous allons donc utiliser le champ dataSource pour construire la vue au lieu de les coder en dur dans le code HTML. Pour cet exercice, nous allons initialiser le composant TreeView avec quelques nœuds. En pratique, vous souhaiterez peut-être utiliser des méthodes sur le composant TreeView pour insérer dynamiquement des éléments.

Voici le balisage mis à jour:

Ce code est ajouté au bas de votre JavaScript pour initialiser le Composant TreeView :

 $ ('# treeview'). KendoTreeView ({
  dataSource: [
    { text: 'Project', items: [
      { text: 'src', items: [
        { text: 'index.html' },
        { text: 'styles.css' },
        { text: 'scripts.al' }
      ]}
    ]}
  ]
});

Voici à quoi ressemble notre application mise à jour:

 Exemple de séparateur d'interface utilisateur Kendo

Le composant TabStrip

Idéalement, lorsque vous cliquez sur un élément du composant TreeView nous voulons qu'un onglet apparaisse dans le volet supérieur droit. Cela implique l'utilisation de l'API du composant TreeView pour obtenir l'élément sélectionné et l'utilisation de l'API du composant TabStrip pour ajouter l'onglet. Les détails sur la façon de procéder dépassent le cadre de cet article. Cependant, vous pouvez trouver des instructions sur comment le faire depuis précédent posts sur le composant TreeView et TabStrip component.

Ici, nous allons initialiser un TabStrip avec tous les onglets ouverts. Pour commencer, nous ajouterons un élément

dans l'élément du volet supérieur

:

  
  

Ensuite, nous allons initialiser le TabStrip avec trois onglets représentant les fichiers que nous avons dans notre TreeView :

 $ ('# tabstrip'). KendoTabStrip ({
  dataTextField: 'label',
  dataSource: [
    { label: 'index.html' },
    { label: 'styles.html' },
    { label: 'scripts.al' }
  ]
});

Voici à quoi ressemble le projet final avec le composant `TabStrip` ajouté:

 Exemple de séparateur d'interface utilisateur Kendo

Conclusion

Dans cet article, nous avons utilisé les composants Splitter TreeView et TabStrip pour construire un IDE. Vous ne devez en aucun cas vous arrêter ici; continuer à expérimenter avec d'autres composants! Vous pouvez envelopper le composant Splitter dans un composant Window et ajouter un composant Toolbar . Il y a aussi beaucoup plus à faire avec la fonctionnalité, comme l'ajout dynamique de volets au composant Splitter pour afficher des vues supplémentaires comme la documentation. Ou ajoutez des icônes proches aux onglets pour pouvoir les supprimer. Dans les prochains articles, nous travaillerons sur différents composants utilisés pour l'édition. Restez pointus car il y aura d'autres tests comme ceux-ci tout au long de votre entraînement!

Essayez le Splitter pour vous-même

Vous voulez commencer à tirer parti du composant Splitter dans l'interface utilisateur Kendo , ou l'un des autres composants d'interface utilisateur Kendo prêts à l'emploi, tels que jQuery Grid ou Scheduler ? Vous pouvez commencer un essai gratuit du Kendo UI dès aujourd'hui et commencer à développer vos applications plus rapidement.

Démarrage de ma version d'essai de l'interface utilisateur Kendo

Versions angulaire et vue

Vous recherchez un composant d'interface utilisateur prenant en charge des infrastructures spécifiques? Découvrez le composant Splitter dans l'interface utilisateur Kendo pour Angular ou le composant Splitter dans l'interface utilisateur Kendo pour Vue .

Resources


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


[ad_2]
Source link