基于layui封装的navbar扩展组件,动态渲染左侧导航(layui扩展模块)

左侧导航栏在后台界面中使用比较多

本文使用navbar组件动态绑定导航栏数据

组件js下载

或参考:https://gitee.com/besteasyteam/beginner_admin

layui使用参考:官方文档


效果:

1513169446293345.png

前台代码:

这里超人测试时使用的thinkphp5框架,/static为框架提供,可不必理会,base按照自己的路径配置即可

{:url('navbarData')}为thinkphp5是使用方法,这里指定返回导航菜单的数据地址即可

这里需要修改layui.config中的base

按照自己修改navbar.set中的url即可

注意navbar.set中elem与页面元素的对应关系

//html标签
<div id="nav" lay-filter="demo"></div>//js代码<script src="/static/layui/layui.js"></script><script>
    layui.config({
        base: '/static/js/navbar/',//navbar组件js所在目录
        version: new Date().getTime()
    }).use('navbar', function() {
        var navbar = layui.navbar();
        navbar.set({
            elem: '#nav',
            url: "{:url('navbarData')}"//数据源地址
        });
        navbar.render();
        navbar.on('click(demo)', function(data) {
            console.log(data.elem);
            console.log(data.field.title);//标题
            console.log(data.field.icon);//图标
            console.log(data.field.href);//调转地址
            layer.msg(data.field.href);
        });
    });</script>

php返回数据示例:

public function navbarData ()
{
   //菜单数组数据
   $data = [
      [
         'title'    => '武斌博客' ,//标题
         'icon'     => 'fa-cubes' ,//图标,支持layui-icon 和 font-awesome
         "spread"   => true ,            //默认展开
         "href"     => "" ,               //跳转的地址,如果有子节点,该地址将无效
         "children" => [//二级菜单栏数据
            ['title' => "php" , 'icon' => "&#xe641;" , 'href' => "button.html"],
            ['title' => "laravel" , 'icon' => "&#x1002;" , 'href' => "button.html"],
            ['title' => "thinkphp" , 'icon' => "&#xe641;" , 'href' => "button.html"],
         ] ,
      ] ,
      [
         'title'    => '一级导航' ,
         'icon'     => 'fa-stop-circle' ,
         "spread"   => false ,
         "href"     => "http://www.baidu.com" ,
      ] ,
   ];

   //返回json数据
   return $data;
}

json数据示例:

[
    {
        "title": "武斌博客",
        "icon": "fa-cubes",
        "spread": true,
        "href": "",
        "children": [
            {
                "title": "php",
                "icon": "",
                "href": "button.html"
            },
            {
                "title": "laravel",
                "icon": "ဂ",
                "href": "button.html"
            },
            {
                "title": "thinkphp",
                "icon": "",
                "href": "button.html"
            }
        ]
    },
    {
        "title": "一级导航",
        "icon": "fa-stop-circle",
        "spread": true,
        "href": "http://www.baidu.com",
        "target" : "_blank"
    }
]


本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。

武斌博客 http://www.wubin.pro

Top