Comment utiliser Layui pour implémenter la fonctionnalité d'onglet réactif-js tutoriel-php.cn

Comment utiliser Layui pour implémenter la fonctionnalité d'onglet réactif

王林

Libérer： 2023-10-27 12:37:43

original

1490 Les gens l'ont consulté

Comment utiliser Layui pour implémenter la fonctionnalité donglet réactif

Comment utiliser Layui pour implémenter la fonction d'onglet réactif

Dans le développement front-end, les onglets sont une méthode d'interaction courante qui peut organiser efficacement le contenu de la page et améliorer l'expérience utilisateur. Lors de l'implémentation de la fonction onglet, Layui est une bibliothèque d'outils très pratique. Cet article expliquera comment utiliser Layui pour implémenter des fonctions d'onglets réactifs et fournira des exemples de code spécifiques.

1. Introduction à Layui

Layui est un framework d'interface utilisateur front-end développé par Xianxin (Xianxin est un célèbre développeur front-end national. Il est léger, facile à utiliser et efficace). Layui fournit une multitude de composants et d'interfaces pour créer rapidement des pages frontales belles et riches en fonctionnalités.

2. La structure HTML des onglets

Dans Layui, la structure HTML des onglets suit certaines spécifications. Voici la structure standard d'un onglet :

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

Copier après la connexion

Dans le code ci-dessus, .layui-tab est le conteneur de l'onglet entier, qui contient .layui-tab-title</ code > et <code>.layui-tab-content deux parties. .layui-tab-title est un conteneur pour les titres d'onglets. Chaque titre d'onglet correspond à un élément <li>, où .layui-this</code. > code> représente l'onglet actuellement sélectionné. <code>.layui-tab-content est un conteneur pour le contenu de l'onglet. Chaque contenu d'un onglet correspond à un élément <div>, où .layui-show</code. > code> représente le contenu de l'onglet actuellement affiché. <code>.layui-tab是整个选项卡的容器，里面包含了.layui-tab-title和.layui-tab-content两个部分。.layui-tab-title是选项卡标题的容器，每个选项卡标题对应一个<li>元素，其中.layui-this表示当前选中的选项卡。.layui-tab-content是选项卡内容的容器，每个选项卡内容对应一个<div>元素，其中.layui-show表示当前显示的选项卡内容。

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

<li>引入Layui库

首先，在<head>标签中引入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>

Copier après la connexion

<li>初始化选项卡

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

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

Copier après la connexion

<li>响应式布局

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

3. Utilisez Layui pour obtenir l'effet d'onglet

<li>Présentez la bibliothèque Layui

Tout d'abord, introduisez le fichier CSS et JS de Layui :

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

Copier après la connexion

<li>Initialiser l'onglet

Une fois la page chargée, appeler le du module <code>element de Layui init() initialise l'onglet :

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

Copier après la connexion

<li>Mise en page réactiveAfin d'obtenir un effet d'onglet réactif, vous pouvez utiliser le module Responsive de Layui. Enveloppez un élément

<div> à l'extérieur du conteneur d'onglets et définissez class="layui-tab layui-tab-card" pour implémenter une disposition d'onglets de style carte. Ensuite, appelez la méthode resize() du module Responsive pour restituer l'onglet lorsque la taille de la fenêtre change : 🎜rrreee🎜Quatre exemple de code complet🎜🎜Ce qui suit. est un exemple de code complet montrant comment utiliser Layui pour implémenter la fonctionnalité d'onglet réactif. Veuillez introduire les fichiers CSS et JS de la bibliothèque Layui avant utilisation. 🎜rrreee🎜Avec l'exemple de code ci-dessus, nous pouvons facilement utiliser Layui pour implémenter la fonctionnalité d'onglet réactif. En développement réel, vous pouvez modifier le style et le contenu de l'onglet en fonction de vos propres besoins, et ajouter d'autres fonctions. J'espère que cet article vous aidera ! 🎜

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!