Comment utiliser Layui pour implémenter la fonctionnalité de composant d'onglet déplaçable

Comment utiliser Layui pour implémenter la fonction de composant d'onglet déplaçable

Layui est un cadre d'interface utilisateur frontal léger qui fournit des composants riches et des API pratiques, rendant le développement frontal plus simple et plus efficace. Parmi eux, le composant onglet est l'une des fonctions couramment utilisées dans Layui. Dans le développement réel, nous rencontrons souvent le besoin de glisser-déposer des onglets pour les trier ou de les faire glisser pour les transposer. Cet article présentera comment utiliser Layui pour implémenter la fonction de composant d'onglet déplaçable sous forme d'exemples.

Tout d'abord, nous devons présenter les fichiers de ressources associés à Layui, notamment layui.js et layui.css, ainsi que la bibliothèque jQuery. Ces fichiers de ressources peuvent être obtenus sur le site officiel de Layui ou d'autres sources.

Ensuite, nous créons un conteneur contenant des onglets en fonction des besoins réels, et ajoutons la fonction de tri par glisser-déposer au conteneur. Voici un exemple de code :

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

Dans le code ci-dessus, nous utilisons le composant tab de Layui et attribuons un filtre lay-filter unique au conteneur pour les opérations ultérieures. Dans le même temps, nous avons ajouté un nom de classe layui-this à chaque onglet, indiquant l'onglet actuellement sélectionné. Dans le développement réel, nous pouvons générer dynamiquement des onglets et ajouter le contenu correspondant.

Ensuite, nous devons ajouter la fonction de tri par glisser-déposer. Layui ne fournit pas directement de composants de tri par glisser-déposer. Nous pouvons utiliser d'autres plug-ins pour réaliser cette fonction. Ici, nous utilisons le plug-in jquery-ui pour obtenir l'effet de tri par glisser-déposer. Tout d'abord, nous devons introduire le fichier de ressources de jquery-ui. Dans le module Layui, il peut être chargé dynamiquement via la méthode 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>

Dans le code ci-dessus, nous utilisons la méthode sortable() de jQuery pour changer. le titre de l'onglet Glissez-déposez pour trier. Des effets de tri spécifiques sont obtenus en définissant certains paramètres et fonctions de rappel. Dans la fonction de rappel de mise à jour, nous obtenons l'ordre des onglets après un tri par glisser-déposer, et mettons à jour le contenu et la position des onglets en fonction de l'ordre. Enfin, nous appelons la fonction Cancel de la méthode sortable() pour annuler l'effet de tri d'origine afin de conserver le style et les fonctionnalités de Layui.

Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction de composant d'onglet déplaçable à l'aide de Layui. Dans les projets réels, nous pouvons personnaliser les effets et les styles en fonction de nos propres besoins, et les combiner avec d'autres composants et API fournis par Layui pour obtenir des fonctions plus riches et plus flexibles.

Pour résumer, cet article explique comment utiliser Layui pour implémenter la fonction de composant d'onglet déplaçable. En introduisant les fichiers de ressources associés à Layui et en les combinant avec le plug-in jquery-ui, nous pouvons facilement implémenter des fonctions de tri et de transposition par glisser-déposer. Cela offre plus de possibilités et de commodité pour notre développement front-end. J'espère que cet article sera utile à tout le monde, merci d'avoir lu.

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!