Rumah > Artikel > hujung hadapan web > Cara menggunakan Layui untuk melaksanakan fungsi tab responsif

Cara menggunakan Layui untuk melaksanakan fungsi tab responsif

王林asal: 2023-10-27 12:37:431482semak imbas

Dalam pembangunan bahagian hadapan, tab ialah kaedah interaksi biasa yang boleh menyusun kandungan halaman dengan berkesan dan meningkatkan pengalaman pengguna. Apabila melaksanakan fungsi tab, Layui ialah perpustakaan alat yang sangat praktikal. Artikel ini akan memperkenalkan cara menggunakan Layui untuk melaksanakan fungsi tab responsif dan menyediakan contoh kod khusus.

1. Pengenalan kepada Layui

Layui ialah rangka kerja UI bahagian hadapan yang dibangunkan oleh Xianxin (Xianxin ialah pembangun bahagian hadapan domestik yang terkenal Ia ringan, mudah digunakan dan cekap). Layui menyediakan pelbagai komponen dan antara muka untuk membina halaman muka hadapan yang cantik dan kaya dengan ciri dengan cepat.

2. Struktur HTML tab

Di Layui, struktur HTML tab mengikut spesifikasi tertentu. Berikut ialah struktur standard tab:

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</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>
</div>

Dalam kod di atas, .layui-tab ialah bekas keseluruhan tab, yang mengandungi .layui-tab-title kod > dan <code>.layui-tab-content dua bahagian. .layui-tab-title ialah bekas untuk tajuk tab Setiap tajuk tab sepadan dengan elemen <li>, di mana .layui-this kod> mewakili tab yang sedang dipilih. <code>.layui-tab-content ialah bekas untuk kandungan tab Setiap kandungan tab sepadan dengan elemen <div>, di mana <code>.layui-show kod> mewakili kandungan tab yang sedang dipaparkan. <code>.layui-tab是整个选项卡的容器，里面包含了.layui-tab-title和.layui-tab-content两个部分。.layui-tab-title是选项卡标题的容器，每个选项卡标题对应一个<li>元素，其中.layui-this表示当前选中的选项卡。.layui-tab-content是选项卡内容的容器，每个选项卡内容对应一个<div>元素，其中<code>.layui-show表示当前显示的选项卡内容。

三、利用Layui实现选项卡效果

<li>引入Layui库

首先，在标签中引入Layui的CSS和JS文件：

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>

<li>初始化选项卡

在页面加载完成后，调用Layui的element模块的init()方法初始化选项卡：

layui.use('element', function(){
  var element = layui.element;
  
  // 初始化选项卡
  element.init();
});

<li>响应式布局

为了实现响应式的选项卡效果，可以使用Layui的Responsive模块。在选项卡的容器外包裹一个<div>元素，并设置<code>class="layui-tab layui-tab-card"实现卡片式的选项卡布局。然后，在窗口大小改变时调用Responsive模块的resize()3 Gunakan Layui untuk mencapai kesan tab

<li>Perkenalkan perpustakaan LayuiMula-mula, perkenalkan fail CSS dan JS Layui:

layui.use('element', function(){
  var element = layui.element;
  
  // 响应式选项卡布局
  $(window).on('resize', function(){
    element.tabResize();
  });
});

<li>Tab Mulakan Selepas halaman dimuatkan, panggil kaedah <code>elemen modul init() Layui memulakan tab:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>利用Layui实现响应式的选项卡功能</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
</head>
<body>
  <div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
      <li class="layui-this">选项卡1</li>
      <li>选项卡2</li>
      <li>选项卡3</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>
  </div>

  <script>
    layui.use('element', function(){
      var element = layui.element;
      
      // 初始化选项卡
      element.init();

      // 响应式选项卡布局
      $(window).on('resize', function(){
        element.tabResize();
      });
    });
  </script>
</body>
</html>

<li>Reka letak responsifUntuk mencapai kesan tab responsif, anda boleh menggunakan modul Responsif Layui. Balut elemen <div> di luar bekas tab dan tetapkan <code>class="layui-tab layui-tab-card" untuk melaksanakan reka letak tab gaya kad. Kemudian, panggil kaedah resize() modul Responsive untuk memaparkan semula tab apabila saiz tetingkap berubah: 🎜rrreee🎜Empat contoh kod🎜🎜Yang berikut ialah kod Contoh lengkap menunjukkan cara menggunakan Layui untuk melaksanakan fungsi tab responsif. Sila perkenalkan fail CSS dan JS pustaka Layui sebelum menggunakannya. 🎜rrreee🎜Dengan contoh kod di atas, kami boleh menggunakan Layui dengan mudah untuk melaksanakan fungsi tab responsif. Dalam pembangunan sebenar, anda boleh mengubah suai gaya dan kandungan tab mengikut keperluan anda sendiri, dan menambah beberapa fungsi lain. Harap artikel ini membantu anda! 🎜

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

Cara menggunakan Layui untuk melaksanakan fungsi tab responsif

Artikel berkaitan