Introduction aux composants du framework JavaScript (xmlplus) (8) DividedBox

xmlplus est un framework JavaScript utilisé pour le développement rapide de projets front-end et back-end. Cet article présente principalement la boîte de séparation du composant de mise en page xmlplus, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Boîte de séparation (pidedBox) est un composant de classe de mise en page qui peut être divisé en deux. catégories, l’une est appelée boîte de séparation horizontale (HpidedBox) et l’autre est appelée boîte de séparation verticale (VpidedBox). Une boîte de séparation horizontale divise ses enfants en deux colonnes, tandis qu'une boîte de séparation verticale divise ses enfants en deux lignes. Il existe généralement une barre de séparation entre les colonnes et les lignes qui peut être glissée pour modifier la taille des composants enfants. Ce qui suit utilise uniquement des boîtes de séparation verticales comme exemple pour présenter comment ces composants sont conçus et mis en œuvre.

Cas d'utilisation des composants finis

Selon l'expérience de conception passée, nous pouvons d'abord écrire les cas d'utilisation des composants finis dans notre imagination, ce qui aidera nous dans la suite de la conception et de la mise en œuvre. Étant donné que la zone de séparation verticale est un composant de la classe de mise en page, elle doit également être un conteneur contenant les trois composants de sous-niveau mentionnés ci-dessus. Pour faciliter l'utilisation, nous ne devons pas y écrire la boîte de séparation. La boîte de séparation doit être implémentée en interne dans le composant. Après analyse, nous obtenons l'exemple d'application suivant :

Example1: {
 css: "#example p { width: 80%; height: 80%; background: #AAA; }",
 xml: `<VpidedBox id="example">
    <p id=&#39;top&#39;/>
    <p id=&#39;bottom&#39;/>
   </VpidedBox>`
}

Cet exemple consiste en un composant de boîte de séparation verticale enveloppant deux éléments p. Ici, la largeur et la hauteur des deux éléments p sont définies à 80 % de celles du parent et leur couleur d'arrière-plan est définie sur gris. Ceci est uniquement pour faciliter les tests. De plus, nous devons également prendre en compte la proportion initiale d’allocation d’un sous-trame. Nous pouvons définir le ratio par défaut sur 50:50. Il est préférable de spécifier le ratio de manière statique lorsque le composant est instancié, tout en fournissant une interface dynamique pour le réglage du ratio. Nous avons donc le cas d’utilisation amélioré suivant.

Example2: {
 css: "#example p { width: 80%; height: 80%; background: #AAA; }",
 xml: `<VpidedBox id="example" percent=&#39;30&#39;>
    <p id=&#39;top&#39;/>
    <p id=&#39;bottom&#39;/>
   </VpidedBox>`,
 fun: function (sys, items, opts) {
  sys.top.on("click", e => sys.example.percent = 50);
 }
}

Ce cas d'utilisation fixe la répartition initiale des sous-cases à 30:70 lorsque la case de séparation verticale est initialisée. Lorsque l'utilisateur clique sur la première sous-case, la répartition des proportions est restaurée. à 50h50. Notez cependant que ces ratios se réfèrent au rapport de l’espace restant après exclusion de l’espace occupé par la barre de séparation.

Conception et mise en œuvre

Tournons maintenant notre attention vers les éléments internes du composant. Déterminons d'abord grossièrement la composition de base du composant. Intuitivement, l'affichage du cadre de séparation vertical contient trois éléments : la partie supérieure du sous-cadre, la barre de séparation et la partie inférieure du sous-cadre. Nous pouvons donc temporairement obtenir la partie d'élément de vue suivante :

VpidedBox: {
 xml: `<p id=&#39;hbox&#39;>
   <p id=&#39;top&#39;/>
   <p id=&#39;handle&#39;/>
   <p id=&#39;bottom&#39;/>
   </p>`
}

Ensuite, assurez-vous que la partie enfant de l'instance du composant séparateur vertical est correctement mappée vers le haut de la sous-boîte supérieure et la sous-boîte inférieure. bas. La méthode consiste à ajouter d’abord tous les objets d’élément enfant en haut de la sous-boîte supérieure, puis à ajouter les éléments enfants inférieurs au bas de la sous-boîte inférieure dans l’élément de fonction.

VpidedBox: {
 xml: `<p id=&#39;hbox&#39;>
   <p id=&#39;top&#39;/>
   <p id=&#39;handle&#39;/>
   <p id=&#39;bottom&#39;/>
   </p>`,
 map: {appendTo: "top" },
 fun: function (sys, items, opts) {
  sys.bottom.elem().appendChild(this.last().elem());
 }
}

Considérons maintenant le style des éléments de la vue inférieure Pour l'élément p de niveau supérieur, nous définissons sa méthode de positionnement sur le positionnement relatif. Les trois éléments enfants sont définis sur un positionnement absolu. Définissez également la hauteur du séparateur sur 5 pixels.

VpidedBox: {
 css: `#hbox { position:relative; width:100%; height:100%; box-sizing: border-box; }
   #top { top: 0; height: 30%; } #bottom { bottom: 0; height: calc(70% - 5px); }
   #top,#bottom { left: 0; right: 0; position: absolute; }
   #handle { height: 5px; width: 100%; position:absolute; left:0; top: 30%; z-index:11; cursor:row-resize; }`,
 xml: `<p id=&#39;hbox&#39;>
   <p id=&#39;top&#39;/>
   <p id=&#39;handle&#39;/>
   <p id=&#39;bottom&#39;/>
   </p>`,
 map: {appendTo: "top" },
 fun: function (sys, items, opts) {
  sys.bottom.elem().appendChild(this.last().elem());
 }
}

Voyons enfin comment répondre à l'événement glisser de la barre de séparation pour modifier le taux d'allocation des sous-boîtes. Nous devons définir une fonction qui modifie la proportion de la sous-boîte et écoute l'événement glisser de la barre de séparation. Vous trouverez ci-dessous une de nos implémentations.

VpidedBox: {
 // 视图项同上
 map: { format: {"int": "percent"}, appendTo: "top" }, 
 fun: function (sys, items, opts) {
  var percent = 50;
  sys.handle.on("dragstart", function (e) {
   sys.hbox.on("dragover", dragover);
  });
  sys.hbox.on("dragend", function (e) {
   e.stopPropagation();
   sys.hbox.off("dragover", dragover);
  });
  function dragover(e) {
   e.preventDefault();
   setPercent((e.pageY - sys.hbox.offset().top) / sys.hbox.height() * 100);
  }
  function setPercent(value) {
   sys.handle.css("top", value + "%");
   sys.top.css("height", value + "%");
   sys.bottom.css("height", "calc(" + (100 - value) + "% - 5px)");
  }
  setPercent(opts.percent || percent);
  sys.bottom.elem().appendChild(this.last().elem());
  return Object.defineProperty({}, "percent", {get: () => {return percent}, set: setPercent});
 }
}

Il existe un paramètre pour le format de pourcentage dans l'élément de mappage du code ci-dessus, qui garantit que le pourcentage est un entier. De plus, la fonction de calcul calc de CSS3 est utilisée pour définir la proportion de la sous-boîte dans l'élément de fonction. La fonction modifiée peut toujours fonctionner lorsque le formulaire du navigateur change de taille. Si vous souhaitez être compatible avec davantage de navigateurs, vous devez faire plus de travail. Notez également que afin de garantir de bonnes performances du composant, l'événement dragover ne sera écouté que lorsque l'utilisateur commencera à glisser.

Autres améliorations

Faisons maintenant un petit test et écrivons un exemple d'application d'une boîte de séparation verticale contenant deux champs de texte en tant qu'enfants. Faites glisser la barre de séparation et voyez ce qui se passe.

Example3: {
 css: `#example textarea { width: 80%; height: 80%; }`,
 xml: `<VpidedBox id="example">
    <textarea id=&#39;top&#39;/>
    <textarea id=&#39;bottom&#39;/>
   </VpidedBox>`
}

Dans cet exemple, il arrive parfois que la barre de séparation présente un dysfonctionnement et que les proportions des sous-boîtes ne changent plus avec la position de la barre de séparation. Le problème est que le champ de texte détourne l'événement glisser, empêchant notre composant de recevoir aucun événement de réponse. Nous devons faire quelques correctifs.

VpidedBox: {
 css: "#hbox { position:relative; width:100%; height:100%; box-sizing: border-box; }\
   #top { top: 0; height: 30%; } #bottom { bottom: 0; height: calc(70% - 5px); }\
   #top,#bottom { left: 0; right: 0; position: absolute; }\
   #handle { height: 5px; width: 100%; position:absolute; left:0; top: 30%; z-index:11; cursor:row-resize; }\
   #mask { width: 100%; height: 100%; position: absolute; display: none; z-index: 10; }",
 xml: "<p id=&#39;hbox&#39;>\
   <p id=&#39;top&#39;/>\
   <p id=&#39;handle&#39; draggable=&#39;true&#39;/>\
   <p id=&#39;bottom&#39;/>\
   <p id=&#39;mask&#39;/>\
   </p>",
 map: { format: {"int": "percent"}, appendTo: "top" }, 
 fun: function (sys, items, opts) {
  var percent = 50;
  sys.handle.on("dragstart", function (e) {
   sys.mask.show();
   sys.hbox.on("dragover", dragover);
  });
  sys.hbox.on("dragend", function (e) {
   sys.mask.hide();
   e.stopPropagation();
   sys.hbox.off("dragover", dragover);
  });
  function dragover(e) {
   e.preventDefault();
   setPercent((e.pageY - sys.hbox.offset().top) / sys.hbox.height() * 100);
  }
  function setPercent(value) {
   sys.handle.css("top", value + "%");
   sys.top.css("height", value + "%");
   sys.bottom.css("height", "calc(" + (100 - value) + "% - 5px)");
  }
  setPercent(opts.percent || percent);
  sys.bottom.elem().appendChild(this.last().elem());
  return Object.defineProperty({}, "percent", {get: () => {return percent}, set: setPercent});
 }
}

Afin de résoudre le problème, nous avons référencé un masque d'objet d'élément p supplémentaire dans le composant. Cet élément n'est pas affiché par défaut. Lorsque le glisser commence, il recouvre la sous-zone et la barre de séparation, et lorsque le glisser se termine, il se cache à nouveau. Cela évite que le champ de texte détourne les événements de glisser.

Utilisé en combinaison avec des cadres de séparation horizontaux

Nous avons l'expérience en matière de conception des cadres de séparation verticaux ci-dessus, il n'est donc pas difficile de créer une séparation horizontale cadre. Ici, il ne sera pas répertorié. Nous donnons ici principalement un exemple d'utilisation globale des boîtes de séparation horizontales et des boîtes de séparation verticales. Bien entendu, au début de la conception, nous n’avions pas pensé à l’utiliser de cette manière.

Example4: {
 css: `#example p { width: 100%; height: 100%; }`,
 xml: `<HpidedBox id=&#39;example&#39;>
    <VpidedBox percent=&#39;30&#39;>
     <p/><p/>
    </VpidedBox>
    <VpidedBox percent=&#39;30&#39;>
     <p/><p/>
    </VpidedBox>
   </HpidedBox>`
}

Cet exemple est principalement utilisé pour montrer les performances lorsque les boîtes de séparation sont imbriquées. Cet exemple contient une zone de séparation horizontale, qui contient à son tour deux zones de séparation verticales. Cette disposition est très courante dans de nombreux éditeurs, et nous l'avons implémentée ici de manière simple et efficace.

Cette série d'articles est basée sur le framework xmlplus. Si vous ne savez pas grand-chose sur XMLplus, vous pouvez visiter www.xmlplus.cn. Une documentation détaillée de démarrage est disponible ici.

【Recommandations associées】

1 Tutoriel vidéo en ligne js gratuit

2. Manuel de référence en chinois JavaScript.

3. php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!