Layui を使用してツリー構造のナビゲーションメニューを開発する方法-jsチュートリアル-php.cn

Layui を使用してツリー構造のナビゲーションメニューを開発する方法

王林

リリース： 2023-10-27 13:27:11

オリジナル

896 人が閲覧しました

Layui を使用してツリー構造のナビゲーションメニューを開発する方法

Layui を使用してツリー構造に基づいたナビゲーションメニューを開発する方法

ナビゲーションメニューは Web 開発の一般的なコンポーネントの 1 つであり、ナビゲーションメニューベースはツリー構造上で、より優れたユーザーエクスペリエンスと機能の完全性を提供できます。この記事では、Layui フレームワークを使用してツリー構造に基づいたナビゲーションメニューを開発する方法を紹介し、具体的なコード例を示します。

1. 準備
開発を開始する前に、Layui フレームワークがインストールされていること、および関連する Layui リソースファイルが必要な HTML ページに正しく導入されていることを確認する必要があります。

2. データの準備
まず、ツリー構造に従ったナビゲーションメニューのデータを準備する必要があります。各ナビゲーション項目とそのサブナビゲーション項目は、JSON 形式を使用して表現できます。

たとえば、次のナビゲーションメニューデータを用意しました:

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. HTML 構造
HTML ページでは、ナビゲーションメニューをホストするコンテナを追加する必要があります。順序なしリスト (ul) を使用してツリー構造を表すことができます。

たとえば、次の HTML 構造を追加します:

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

ログイン後にコピー

4. JavaScript コード
次に、JavaScript コードを使用してナビゲーションメニューをレンダリングします。

Layui の Tree モジュールを導入し、対応するパラメータを設定します。

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);  // 获取点击的节点数据
    }
  });
});

ログイン後にコピー

上記のコードで、ナビゲーションメニューのレンダリングが完了しました。次に、実際のニーズに応じて、ナビゲーションメニューで他の操作やスタイルのカスタマイズを実行できます。

たとえば、CSS スタイルを使用してナビゲーションメニューを美しくし、対応するイベント処理を追加できます。

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

ログイン後にコピー

上記は、Layui を使用してナビゲーションメニューベースの開発を行う簡単な方法です。ツリー構造上の例。 Layui が提供する Tree コンポーネントを使用すると、ツリー構造のナビゲーションメニューを簡単に実装でき、実際のニーズに応じてスタイルのカスタマイズやイベント処理を実行できます。この記事がお役に立てば幸いです!

以上がLayui を使用してツリー構造のナビゲーションメニューを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。