L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment utiliser un composant d'interface utilisateur jQuery Splitter
Apprenez à créer des sections redimensionnables et réductibles dans l'interface utilisateur de votre application Web à l'aide du composant Splitter de l'interface utilisateur Kendo.
Dans le dernier épisode vous avez appris à manipuler le composant ]. Ce prochain composant améliorera encore vos compétences de Kendo UI afin que vous puissiez conquérir des applications plus complexes. Le séparateur est un composant qui divise une vue en sections redimensionnables et réductibles. Vous avez peut-être vu des séparateurs utilisés dans la fenêtre de votre navigateur ou dans un éditeur de code. Lorsque vous inspectez la page d'un navigateur, un volet affiche le code HTML et CSS de la page. Un éditeur de code tel que CodePen utilise des séparateurs pour diviser la vue avec des volets pour les fichiers de code et un volet pour prévisualiser le contenu. Dans cet épisode, vous apprendrez à utiliser un séparateur pour recréer une mise en page comme celle de l'éditeur de CodePen.
Création d'un séparateur d'interface utilisateur Kendo de base
Un séparateur est créé en ajoutant un élément HTML de conteneur à des éléments enfants représentant chaque volet. Vous initialisez le séparateur avec `$ (element) .kendoSplitter ()`. Par défaut, les volets seront affichés horizontalement avec chaque volet positionné côte à côte. La largeur des vitres sera divisée également pour correspondre à la largeur du conteneur. Les séparateurs vous permettront de redimensionner la largeur des volets, mais cela ne vous permettra pas de les réduire. La réduction d'un volet peut être déclenchée en double-cliquant sur le diviseur. Voici un exemple de séparateur à deux volets dans lequel vous devez commencer dans le dojo .
`` `html
[19659002]
"div id = " splitter ">
]
Volet 1
Volet 2
`` `
Ensuite, vous verrez comment créer un séparateur plus complexe. Pour ce faire, nous allons créer des séparateurs dans un séparateur.
Création de l'éditeur de code
Le composant que nous allons créer simulera un éditeur de code en ligne. Il y aura un volet supérieur où le code peut être entré et un volet inférieur où l'aperçu du code sera affiché. Le volet supérieur sera divisé en trois volets - un pour notre HTML, CSS et JavaScript. Voici à quoi il ressemblera:
Tout d'abord, nous allons créer un séparateur comportant deux volets verticaux l'un sur l'autre. Nous allons rendre les deux volets pliables. Et définissez la hauteur du volet inférieur à 35% de la hauteur totale du séparateur. Voici le nouveau balisage:
`` `html
<div id = "splitter" >
]
Volet 1
Volet 2
`` `
Dans le code d'initialisation, vous devrez définir l'orientation et configurer les propriétés de chaque volet.
`` `js
$ ( '# splitter' ). KendoSplitter ({
orientation: 'vertical'
volets: [
{ pliable: true },
{pliable: true taille: [19659023] '35% '}
]
});
`` `
Chaque objet du tableau `panes` est répertorié dans l'ordre dans lequel les volets apparaissent dans le balisage. Le code ne reconnaît que les descendants directs de l'élément pour les volets. Donc, bien que notre volet supérieur ait des éléments enfants, ils ne seront pas affichés comme des volets séparés. Pour ce faire, nous devons initialiser l'élément du volet supérieur en tant que composant de séparateur d'interface utilisateur Kendo. Chaque volet sera également pliable et, comme ils seront affichés horizontalement, il n'est pas nécessaire de spécifier l'orientation. Voici le code mis à jour pour le deuxième séparateur:
`` `js
$ ( '# top-pane' ) .kendoSplitter ({
volets: [
[19659022] {pliable: true },
{pliable: true },
{pliable: true
]
)
`` `
Si vous voulez créer un séparateur à partir du volet inférieur, vous pouvez ajouter des éléments à l'intérieur du code HTML et appeler `$ ('# bottom-pane'). KendoSplitter ()`. Vous pouvez créer la mise en page de plusieurs manières.
Conclusion
Le composant séparateur vous permet de créer de nombreuses configurations différentes. Cependant, il n'est pas destiné à être utilisé pour positionner ou contrôler le flux de contenu sur votre page. C'est la responsabilité d'un système de grille. Le séparateur a pour but de créer plusieurs fenêtres dans une fenêtre. L'objectif est de communiquer que chaque fenêtre ou volet possède un contenu indépendant. Cela devient plus évident étant donné que le composant splitter peut charger du contenu dans des panneaux à l'aide d'une URL. L'URL peut être une page Web ou un point de terminaison d'API renvoyant des données. Comme il y a tellement de façons créatives d'utiliser un séparateur, notre formation ne s'arrêtera pas ici. Dans la prochaine leçon, nous testerons vos capacités à utiliser plusieurs composants ensemble dans une application. Mais cela ne devrait pas être un problème pour vous, car un guerrier UI Kendo est toujours prêt pour la bataille.
Essayez le Splitter pour vous-même
Vous voulez commencer à tirer parti du Splitter Kendo ou l'un des autres composants d'interface utilisateur Kendo prêts à l'emploi, tels que Grid ou Scheduler? Vous pouvez commencer un essai gratuit de l'interface utilisateur Kendo aujourd'hui et commencer à développer vos applications plus rapidement.
Démarrez ma version d'essai du Kendo
Versions angulaire, réactive et vue
Vous recherchez un composant d'interface utilisateur prenant en charge des infrastructures spécifiques? Découvrez le séparateur pour Angular ou le répartiteur pour Vue .