Cara menggunakan Layui untuk melaksanakan fungsi komponen tab boleh seret

Cara menggunakan Layui untuk melaksanakan fungsi komponen tab boleh seret

Layui ialah rangka kerja UI bahagian hadapan yang ringan yang menyediakan komponen Kaya dan API yang mudah menjadikan pembangunan bahagian hadapan lebih mudah dan lebih cekap. Antaranya, komponen tab merupakan salah satu fungsi yang biasa digunakan dalam Layui. Dalam pembangunan sebenar, kita sering menghadapi keperluan untuk menyeret dan melepaskan tab untuk mengisih atau menyeret untuk mengubahnya. Artikel ini akan memperkenalkan cara menggunakan Layui untuk melaksanakan fungsi komponen tab boleh seret dalam bentuk contoh.

Pertama sekali, kami perlu memperkenalkan fail sumber berkaitan Layui, termasuk layui.js dan layui.css, serta perpustakaan jQuery. Fail sumber ini boleh didapati dari laman web rasmi Layui atau sumber lain.

Seterusnya, kami mencipta bekas yang mengandungi tab mengikut keperluan sebenar, dan menambah fungsi pengisihan seret dan lepas pada bekas. Berikut ialah kod sampel:

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

Dalam kod di atas, kami menggunakan komponen tab Layui dan menetapkan penapis letak penapis unik kepada bekas untuk operasi seterusnya. Pada masa yang sama, kami menambah nama kelas layui-ini pada setiap tab, menunjukkan tab yang sedang dipilih. Dalam pembangunan sebenar, kami boleh menjana tab secara dinamik dan menambah kandungan yang sepadan.

Seterusnya, kita perlu menambah fungsi pengisihan seret dan lepas. Layui tidak secara langsung menyediakan komponen pengisihan seret dan lepas Kita boleh menggunakan pemalam lain untuk mencapai fungsi ini. Di sini, kami menggunakan pemalam jquery-ui untuk mencapai kesan pengisihan seret dan lepas. Pertama, kita perlu memperkenalkan fail sumber jquery-ui Dalam modul Layui, ia boleh dimuatkan secara dinamik melalui kaedah layui.use():

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

Dalam kod di atas, kami menggunakan jQuery's. kaedah sortable( ) untuk seret dan lepaskan tajuk tab isihan. Kesan pengisihan khusus dicapai dengan menetapkan beberapa parameter dan fungsi panggil balik. Dalam fungsi panggil balik kemas kini, kami memperoleh susunan tab selepas seret dan lepas pengisihan, dan mengemas kini kandungan dan kedudukan tab mengikut susunan. Akhir sekali, kami memanggil fungsi batal kaedah sortable() untuk membatalkan kesan pengisihan asal untuk mengekalkan gaya dan kefungsian Layui.

Melalui langkah di atas, kami telah berjaya melaksanakan fungsi komponen tab boleh seret menggunakan Layui. Dalam projek sebenar, kami boleh menyesuaikan kesan dan gaya mengikut keperluan kami sendiri, dan menggabungkannya dengan komponen dan API lain yang disediakan oleh Layui untuk mencapai fungsi yang lebih kaya dan lebih fleksibel.

Untuk meringkaskan, artikel ini memperkenalkan cara menggunakan Layui untuk melaksanakan fungsi komponen tab boleh seret. Dengan memperkenalkan fail sumber berkaitan Layui dan menggabungkannya dengan pemalam jquery-ui, kami boleh melaksanakan fungsi pengisihan seret dan lepas dan transposisi dengan mudah. Ini memberikan lebih banyak kemungkinan dan kemudahan untuk pembangunan bahagian hadapan kami. Semoga artikel ini bermanfaat kepada semua, terima kasih kerana membaca.

Atas ialah kandungan terperinci Cara menggunakan Layui untuk melaksanakan fungsi komponen tab boleh seret. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!