Einführung in die Komponenten des JavaScript-Frameworks (xmlplus) (8) DividedBox

xmlplus ist ein JavaScript-Framework, das für die schnelle Entwicklung von Front-End- und Back-End-Projekten verwendet wird. In diesem Artikel wird hauptsächlich die Trennbox der xmlplus-Layoutkomponente vorgestellt, die einen bestimmten Referenzwert hat.

Trennbox (pidedBox) ist eine Layout-Klassenkomponente, die in zwei Teile geteilt werden kann Kategorien, eine heißt horizontale Trennbox (HpidedBox) und die andere heißt vertikale Trennbox (VpidedBox). Eine horizontale Trennbox teilt ihre untergeordneten Elemente in zwei Spalten auf, während eine vertikale Trennbox ihre untergeordneten Elemente in zwei Zeilen unterteilt. Im Allgemeinen gibt es zwischen Spalten und Zeilen eine Trennleiste, die gezogen werden kann, um die Größe untergeordneter Komponenten zu ändern. Im Folgenden wird lediglich beispielhaft anhand vertikaler Trennkästen erläutert, wie solche Komponenten konzipiert und umgesetzt werden.

Anwendungsfälle fertiger Komponenten

Nach bisherigen Designerfahrungen können wir die Anwendungsfälle fertiger Komponenten zunächst in unserer Vorstellung aufschreiben, was hilfreich sein wird uns bei der anschließenden weiteren Konzeption und Umsetzung. Da das vertikale Trennfeld eine Komponente der Layoutklasse ist, muss es sich auch um einen Container handeln, der die drei oben erwähnten Unterebenenkomponenten enthält. Aus Gründen der Benutzerfreundlichkeit sollten wir das Trennfeld nicht hineinschreiben. Das Trennfeld sollte intern von der Komponente implementiert werden. Nach der Analyse erhalten wir das folgende Anwendungsbeispiel:

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>`
}

Dieses Beispiel besteht aus einer vertikalen Trennboxkomponente, die zwei p-Elemente umhüllt. Hier werden die Breite und Höhe der beiden p-Elemente auf 80 % des übergeordneten Elements und ihre Hintergrundfarbe auf Grau eingestellt. Dies dient lediglich der Vereinfachung des Testens. Darüber hinaus müssen wir auch die anfängliche Proportionsverteilung eines Unterrahmens berücksichtigen. Wir können das Standardverhältnis auf 50:50 festlegen. Am besten geben Sie das Verhältnis statisch an, wenn die Komponente instanziiert wird, und stellen gleichzeitig eine dynamische Schnittstelle für die Verhältniseinstellung bereit. Wir haben also den folgenden verbesserten Anwendungsfall.

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);
 }
}

In diesem Anwendungsfall wird die anfängliche Verhältnisverteilung der Unterfelder auf 30:70 festgelegt, wenn das vertikale Trennfeld initialisiert wird. Wenn der Benutzer auf das erste Unterfeld klickt, wird die Verhältnisverteilung wiederhergestellt bis 50:50. Beachten Sie jedoch, dass sich diese Verhältnisse auf das Verhältnis des verbleibenden Platzes nach Ausschluss des durch die Trennleiste eingenommenen Platzes beziehen.

Design und Implementierung

Lassen Sie uns nun unsere Aufmerksamkeit auf die Interna der Komponente richten. Bestimmen wir zunächst grob die Grundzusammensetzung der Komponente. Intuitiv besteht die vertikale Trennrahmenanzeige aus drei Komponententeilen: dem oberen Unterrahmenteil, der Trennleiste und dem unteren Unterrahmenteil. So können wir vorübergehend den folgenden Teil des Ansichtselements erhalten:

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

Stellen Sie als Nächstes sicher, dass der untergeordnete Teil der Instanz der vertikalen Trennkomponente korrekt der oberen Unterbox und der unteren Unterbox zugeordnet ist unten. Die Methode besteht darin, zunächst alle untergeordneten Elementobjekte zum oberen Teil des Unterkastens hinzuzufügen und dann die unteren untergeordneten Elemente zum unteren Teil des Unterkastens im Funktionselement hinzuzufügen.

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());
 }
}

Betrachten wir nun den Stil der unteren Ansichtselemente. Für das p-Element der obersten Ebene stellen wir seine Positionierungsmethode auf relative Positionierung ein. Die drei untergeordneten Elemente sind auf absolute Positionierung eingestellt. Stellen Sie außerdem die Trennhöhe auf 5 Pixel ein.

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());
 }
}

Schließlich sehen wir uns an, wie man auf das Drag-Ereignis der Trennleiste reagiert, um das Zuordnungsverhältnis der Unterboxen zu ändern. Wir müssen eine Funktion definieren, die die Proportionen der Unterbox ändert und auf das Drag-Ereignis der Trennleiste wartet. Nachfolgend finden Sie eine unserer Implementierungen.

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});
 }
}

Im Zuordnungselement des obigen Codes gibt es eine Einstellung für das Prozentformat, die sicherstellt, dass Prozent eine ganze Zahl ist. Darüber hinaus wird die Calc-Berechnungsfunktion von CSS3 verwendet, um den Anteil des Unterfelds im Funktionselement festzulegen. Die geänderte Funktion kann weiterhin funktionieren, wenn sich die Größe des Browserformulars ändert. Wenn Sie mit mehr Browsern kompatibel sein möchten, müssen Sie mehr Arbeit leisten. Beachten Sie außerdem, dass das Dragover-Ereignis nur dann abgehört wird, wenn der Benutzer mit dem Ziehen beginnt, um eine gute Leistung der Komponente sicherzustellen.

Weitere Verbesserungen

Machen wir nun einen kleinen Test und schreiben ein Anwendungsbeispiel einer vertikalen Trennbox, die zwei Textfelder als Kinder enthält. Ziehen Sie die Trennleiste und sehen Sie, was passiert.

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

In diesem Beispiel kommt es manchmal zu Fehlfunktionen der Trennleiste und die Proportionen der Unterboxen ändern sich nicht mehr mit der Position der Trennleiste. Das Problem besteht darin, dass das Textfeld das Drag-Ereignis kapert, was dazu führt, dass unsere Komponente keine Antwortereignisse empfängt. Wir müssen einige Patches machen.

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});
 }
}

Um das Problem zu lösen, haben wir in der Komponente auf eine zusätzliche p-Element-Objektmaske verwiesen. Dieses Element wird standardmäßig nicht angezeigt. Wenn das Ziehen beginnt, werden das Unterfeld und die Trennleiste abgedeckt, und wenn das Ziehen endet, wird es wieder ausgeblendet. Dadurch wird verhindert, dass das Textfeld Drag-Ereignisse kapert.

Wird in Kombination mit horizontalen Trennrahmen verwendet

Wir verfügen über die Designerfahrung der oben genannten vertikalen Trennrahmen, sodass es nicht schwierig ist, eine horizontale Trennwand zu erstellen Rahmen. Hier wird es nicht aufgeführt. Hier geben wir hauptsächlich ein Beispiel für die umfassende Verwendung horizontaler Trennkästen und vertikaler Trennkästen. Natürlich haben wir zu Beginn des Entwurfs nicht daran gedacht, es auf diese Weise zu verwenden.

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>`
}

Dieses Beispiel wird hauptsächlich verwendet, um die Leistung zu zeigen, wenn die Teilerboxen verschachtelt sind. Dieses Beispiel enthält eine horizontale Trennbox, die wiederum zwei vertikale Trennboxen enthält. Dieses Layout ist in vielen Editoren sehr verbreitet und wir haben es hier einfach und effizient umgesetzt.

Diese Artikelserie basiert auf dem xmlplus-Framework. Wenn Sie nicht viel über xmlplus wissen, können Sie www.xmlplus.cn besuchen. Eine ausführliche Dokumentation zu den ersten Schritten finden Sie hier.

【Verwandte Empfehlungen】

1. Kostenloses js-Online-Video-Tutorial

2. JavaScript Chinese Reference Manual

3. php.cn Dugu Jiujian (3) – JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonEinführung in die Komponenten des JavaScript-Frameworks (xmlplus) (8) DividedBox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!