Cara menggunakan Layui untuk membangunkan menu navigasi berasaskan struktur pokok

Cara menggunakan Layui untuk membangunkan menu navigasi berasaskan struktur pokok

Menu navigasi ialah salah satu komponen biasa dalam pembangunan web, dan menu navigasi berasaskan struktur pokok boleh memberikan pengalaman pengguna yang lebih baik dan integriti berfungsi. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Layui untuk membangunkan menu navigasi berdasarkan struktur pokok dan menyediakan contoh kod khusus.

1. Persediaan
Sebelum memulakan pembangunan, anda perlu mengesahkan bahawa rangka kerja Layui telah dipasang dan fail sumber Layui yang berkaitan telah diperkenalkan dengan betul dalam halaman HTML yang diperlukan.

2. Penyediaan data
Pertama, anda perlu menyediakan data menu navigasi yang mematuhi struktur pokok. Setiap item navigasi dan item sub-navigasinya boleh diwakili menggunakan format JSON.

Sebagai contoh, kami telah menyediakan data menu navigasi berikut:

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. Struktur HTML
Dalam halaman HTML, kita perlu menambah bekas untuk mengehoskan menu navigasi. Senarai tidak tertib (ul) boleh digunakan untuk mewakili struktur pokok.

Sebagai contoh, kami menambah struktur HTML berikut:

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

4 kod JavaScript
Seterusnya, kami menggunakan kod JavaScript untuk memaparkan menu navigasi.

1. Perkenalkan modul Layui’s Tree dan tetapkan parameter yang sepadan:

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. Dengan kod di atas, kami telah menyelesaikan pemaparan menu navigasi. Seterusnya, anda boleh melakukan operasi lain dan penyesuaian gaya pada menu navigasi mengikut keperluan sebenar.

Sebagai contoh, anda boleh menggunakan gaya CSS untuk mencantikkan menu navigasi dan menambah pengendalian acara yang sepadan:

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

Di atas adalah contoh mudah menggunakan Layui untuk membangunkan menu navigasi berdasarkan struktur pokok. Melalui komponen Pokok yang disediakan oleh Layui, kami boleh melaksanakan menu navigasi berstruktur pokok dengan mudah, dan boleh melakukan penyesuaian gaya dan pemprosesan acara mengikut keperluan sebenar. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara menggunakan Layui untuk membangunkan menu navigasi berasaskan struktur pokok. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!