Comment utiliser Layui pour développer un menu de navigation arborescent

Comment utiliser Layui pour développer un menu de navigation basé sur une arborescence

Le menu de navigation est l'un des composants courants dans le développement Web, et le menu de navigation basé sur une arborescence peut offrir une meilleure expérience utilisateur et une meilleure intégrité fonctionnelle. Cet article présentera comment utiliser le framework Layui pour développer un menu de navigation basé sur une structure arborescente et fournira des exemples de code spécifiques.

1. Préparation
Avant de commencer le développement, vous devez confirmer que le framework Layui a été installé et que les fichiers de ressources Layui pertinents ont été correctement introduits dans la page HTML requise.

2. Préparation des données
Tout d'abord, vous devez préparer un menu de navigation conforme à l'arborescence. Chaque élément de navigation et ses éléments de sous-navigation peuvent être représentés au format JSON.

Par exemple, nous avons préparé les données du menu de navigation suivantes :

var menuData = [
  {
    "id": 1,
    "name": "菜单1",
    "children": [
      {
        "id": 11,
        "name": "子菜单1.1"
      },
      {
        "id": 12,
        "name": "子菜单1.2",
        "children": [
          {
            "id": 121,
            "name": "子菜单1.2.1"
          },
          {
            "id": 122,
            "name": "子菜单1.2.2"
          }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "菜单2",
    "children": [
      {
        "id": 21,
        "name": "子菜单2.1"
      },
      {
        "id": 22,
        "name": "子菜单2.2"
      }
    ]
  },
  {
    "id": 3,
    "name": "菜单3"
  }
];

3. Structure HTML
Dans la page HTML, nous devons ajouter un conteneur pour héberger le menu de navigation. Une liste non ordonnée (ul) peut être utilisée pour représenter une structure arborescente.

Par exemple, nous ajoutons la structure HTML suivante :

<div id="navMenu"></div>

4. Code JavaScript
Ensuite, nous utilisons le code JavaScript pour afficher le menu de navigation.

1. Présentez le module Tree de Layui et définissez les paramètres correspondants :

layui.use(['tree', 'form'], function(){
  var tree = layui.tree;
  
  tree.render({
    elem: '#navMenu',  // 绑定容器
    data: menuData,    // 导航菜单数据
    showCheckbox: false,  // 是否显示复选框
    id: 'navMenuTree',  // 自定义ID，用于相关操作
    isJump: true,  // 是否允许点击节点时弹出新窗口跳转
    click: function(obj){  // 点击回调函数
      // do something
      console.log(obj.data);  // 获取点击的节点数据
    }
  });
});

2. Avec le code ci-dessus, nous avons terminé le rendu du menu de navigation. Ensuite, vous pouvez effectuer d'autres opérations et personnaliser le style dans le menu de navigation en fonction des besoins réels.

Par exemple, vous pouvez utiliser des styles CSS pour embellir le menu de navigation et ajouter la gestion des événements correspondante :

<style>
  .layui-tree li a {
    padding-left: 20px;
  }
  
  .layui-tree li a i {
    margin-right: 5px;
  }
  
  .layui-tree li a i.layui-icon-file {
    background-color: #1E9FFF;
    color: #fff;
  }
  
  .layui-tree li a i.layui-icon-folder {
    background-color: #FF5722;
    color: #fff;
  }
  
  .layui-tree li a i.layui-icon-file-text {
    color: #1E9FFF;
  }
</style>

Ce qui précède est un exemple simple d'utilisation de Layui pour développer un menu de navigation basé sur une arborescence. Grâce au composant Tree fourni par Layui, nous pouvons facilement implémenter un menu de navigation arborescent et effectuer une personnalisation du style et un traitement des événements en fonction des besoins réels. J'espère que cet article vous sera utile !

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!