So verwenden Sie Layui, um die Funktionalität ziehbarer Tab-Komponenten zu implementieren

So verwenden Sie Layui zum Implementieren der Funktion für ziehbare Tab-Komponenten

Layui ist ein leichtes Front-End-UI-Framework, das umfangreiche Komponenten und praktische APIs bereitstellt und die Front-End-Entwicklung einfacher und effizienter macht. Unter diesen ist die Tab-Komponente eine der am häufigsten verwendeten Funktionen in Layui. In der tatsächlichen Entwicklung müssen wir häufig Tabs per Drag-and-Drop sortieren oder per Drag-and-Drop verschieben, um sie zu transponieren. In diesem Artikel wird anhand von Beispielen vorgestellt, wie Sie mit Layui die Funktion der ziehbaren Tab-Komponente implementieren.

Zuerst müssen wir die zugehörigen Ressourcendateien von Layui vorstellen, einschließlichlayui.js undlayui.csssowie die jQuery-Bibliothek. Diese Ressourcendateien können von der offiziellen Website von Layui oder anderen Quellen bezogen werden.

Als nächstes erstellen wir einen Container mit Registerkarten entsprechend dem tatsächlichen Bedarf und fügen dem Container die Drag-and-Drop-Sortierfunktion hinzu. Das Folgende ist ein Beispielcode:

<div class="layui-tab layui-tab-card" lay-filter="tab-demo">
  <ul class="layui-tab-title">
    <li class="layui-this">选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</li>
    <li>选项卡4</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">选项卡1的内容</div>
    <div class="layui-tab-item">选项卡2的内容</div>
    <div class="layui-tab-item">选项卡3的内容</div>
    <div class="layui-tab-item">选项卡4的内容</div>
  </div>
</div>

Im obigen Code verwenden wir die Tab-Komponente von Layui und weisen dem Container einen eindeutigen Filter-Lay-Filter für nachfolgende Vorgänge zu. Gleichzeitig haben wir jeder Registerkarte den Klassennamen „layui-this“ hinzugefügt, der die aktuell ausgewählte Registerkarte angibt. In der tatsächlichen Entwicklung können wir Registerkarten dynamisch generieren und entsprechende Inhalte hinzufügen.

Als nächstes müssen wir die Drag-and-Drop-Sortierfunktion hinzufügen. Layui stellt keine Drag-and-Drop-Sortierkomponenten bereit. Wir können andere Plug-Ins verwenden, um diese Funktion zu erreichen. Hier verwenden wir das Plug-In jquery-ui, um den Drag-and-Drop-Sortiereffekt zu erzielen. Zuerst müssen wir die Ressourcendatei von jquery-ui einführen. Im Layui-Modul kann sie dynamisch über die Methodelayui.use() geladen werden:

<script>
layui.use(['jquery', 'element'], function(){
  var $ = layui.jquery, element = layui.element;

  // 拖拽排序
  $(".layui-tab-title").sortable({
    axis: "x",  // 限制只能在水平方向拖拽
    cursor: "move",  // 设置拖拽时的鼠标样式
    containment: "parent",  // 限制拖拽范围在父容器内
    update: function(event, ui) {
      // 获取拖拽排序后的选项卡顺序
      var order = $(this).sortable("toArray");

      // 更新选项卡内容的顺序
      var $content = $(".layui-tab-content .layui-tab-item");
      for (var i = 0; i < order.length; i++) {
        $content.eq(i).appendTo(".layui-tab-content").show();
      }

      // 更新选项卡的位置
      $(this).sortable("cancel");
    }
  });
});
</script>

Im obigen Code verwenden wir zum Ändern die sortable()-Methode von jQuery den Tab-Titel per Drag-and-Drop sortieren. Durch das Festlegen einiger Parameter und Rückruffunktionen werden bestimmte Sortiereffekte erzielt. In der Update-Callback-Funktion erhalten wir die Tab-Reihenfolge nach der Drag-and-Drop-Sortierung und aktualisieren den Inhalt und die Position der Tabs entsprechend der Reihenfolge. Schließlich rufen wir die Abbruchfunktion der Methode sortable() auf, um den ursprünglichen Sortiereffekt abzubrechen und den Stil und die Funktionalität von Layui beizubehalten.

Durch die oben genannten Schritte haben wir die Funktion der ziehbaren Tab-Komponente mit Layui erfolgreich implementiert. In tatsächlichen Projekten können wir Effekte und Stile an unsere eigenen Bedürfnisse anpassen und sie mit anderen von Layui bereitgestellten Komponenten und APIs kombinieren, um umfangreichere und flexiblere Funktionen zu erzielen.

Zusammenfassend stellt dieser Artikel vor, wie Sie Layui verwenden, um die Funktion der ziehbaren Tab-Komponente zu implementieren. Durch die Einführung der zugehörigen Ressourcendateien von Layui und deren Kombination mit dem Plug-In jquery-ui können wir problemlos Sortier- und Transpositionsfunktionen per Drag-and-Drop implementieren. Dies bietet mehr Möglichkeiten und Komfort für unsere Front-End-Entwicklung. Ich hoffe, dieser Artikel ist für alle hilfreich. Vielen Dank fürs Lesen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Layui, um die Funktionalität ziehbarer Tab-Komponenten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!