Comment utiliser Layui pour implémenter la fonction de composant d'étiquette pliable

Comment utiliser Layui pour implémenter la fonction de composant d'étiquette pliable

Dans le développement front-end, nous rencontrons souvent des situations où un grand nombre d'étiquettes doivent être affichées directement, cela ne prendra pas seulement. occupe beaucoup d'espace sur la page, mais donne également à la page un aspect encombré. Afin de résoudre ce problème, nous pouvons utiliser le composant de panneau pliable fourni par le framework Layui pour implémenter la fonction de composant d'étiquette pliable. Voyons ensuite comment utiliser Layui pour implémenter cette fonction.

Tout d'abord, nous devons présenter les fichiers de ressources liés à Layui, y compris les fichiers css et js. Il peut être introduit des manières suivantes :

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

Ensuite, définissez un conteneur dans la page pour placer le composant label. Par exemple :

<div id="tagContainer"></div>

Ensuite, écrivez du code JavaScript dans la balise <script> et utilisez le composant de panneau pliable de Layui pour créer un composant d'étiquette pliable. L'exemple de code est le suivant : </script>

layui.use(['element'], function(){
  var element = layui.element;
  
  // 定义标签数据
  var tags = [
    {name: '标签1', content: '标签1的内容'},
    {name: '标签2', content: '标签2的内容'},
    {name: '标签3', content: '标签3的内容'},
    // 这里可以继续添加更多标签
  ];
  
  // 生成标签组件
  var tagHtml = '';
  for(var i = 0; i < tags.length; i++){
    tagHtml += '<div class="layui-colla-item">';
    tagHtml += '<h2 class="layui-colla-title">' + tags[i].name + '</h2>';
    tagHtml += '<div class="layui-colla-content">' + tags[i].content + '</div>';
    tagHtml += '</div>';
  }
  $('#tagContainer').html(tagHtml);
  
  // 渲染组件
  element.init();
});

Dans le code ci-dessus, nous utilisons d'abord la méthode layui.use方法来加载Layui的element模块。然后，我们定义了一组标签数据，包括标签的名称和内容。接着，我们根据标签数据生成对应的HTML代码，并将其添加到标签容器中。最后，通过调用element.init() pour restituer le composant du panneau accordéon.

Enfin, nous devons également ajouter du style au composant d'étiquette généré afin qu'il s'affiche et se réduise correctement. Le code CSS suivant peut être ajouté à la page :

.layui-colla-item {
  margin-bottom: 10px;
}

.layui-colla-title {
  background-color: #f2f2f2;
  padding: 10px;
  cursor: pointer;
}

.layui-colla-content {
  padding: 10px;
  display: none;
}

Dans le code CSS ci-dessus, nous avons ajouté quelques styles de base au composant label, notamment la définition de la couleur d'arrière-plan du titre, la définition du remplissage du contenu et le masquage du contenu.

Grâce aux étapes ci-dessus, nous avons implémenté avec succès un composant d'étiquette pliable à l'aide de Layui. Les utilisateurs peuvent cliquer sur le titre de chaque onglet pour le développer et le réduire. Cela économise de l'espace sur la page et rend la page plus claire et plus facile à lire. J'espère que cet article pourra vous aider à comprendre et à utiliser le composant de panneau pliant fourni par Layui.

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!