正心全栈编程-文档站

Appearance

导航 ​

  • 导航一般应用于头部和侧边，是整个网页画龙点晴般的存在
  • 依赖加载模块：element

水平导航 ​

一般用于页面头部菜单。样式规则如下：

  • 给一个无序列表 ul 添加 class="layui-nav" 设置导航容器
  • 给 li 添加 class="layui-nav-ithm" 表示的是导航的菜单项
    • 给 li 添加 class="layui-this" 表示当前被选中的菜单项
  • 给 li 里面容器添加 class="layui-nav-child" 表示的是二级菜单
    • 追加 className 为 layui-nav-child-c 和 layui-nav-child-r 可设置子菜单居中和向右对齐
html
<body>
  <!-- 水平导航 layui-nav -->
  <ul class="layui-nav">
    <!-- layui-nav-item 表示的是导航的子项-->
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <!--  layui-this 表示当前被选中的项-->
    <li class="layui-nav-item layui-this"><a href="">核心编程</a></li>
    <li class="layui-nav-item"><a href="">爬虫开发</a></li>
    <li class="layui-nav-item"><a href="">数据分析</a></li>

    <li class="layui-nav-item">
      <a href="JavaScript:;">网站开发</a>
      <!--  layui-nav-child 表示的是二级菜单-->
      <dl class="layui-nav-child">
        <dd><a href="">前端基础</a></dd>
        <dd><a href="">flask 框架</a></dd>
        <dd><a href="">flask 项目</a></dd>
      </dl>
    </li>
  </ul>
  <!--导航模块需要引入 js -->
  <script src="/static/layui.js"></script>
</body>

注意

导航之中也可以加入徽章，也有其他的主题颜色，需要的可以参照官网教程进行修改。

垂直导航 ​

  • 给无序列表 ul 添加 class="layui-nav layui-nav-tree" 定义垂直导航容器。
  • 给 li 添加 class="layui-nav-item layui-nav-itemed" 表示此子项目是默认展开的
html
<body>
  <!-- 垂直导航 layui-nav layui-nav-tree  -->
  <ul class="layui-nav layui-nav-tree">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">核心编程</a></li>
    <li class="layui-nav-item"><a href="">爬虫开发</a></li>
    <li class="layui-nav-item"><a href="">数据分析</a></li>
    <!--  layui-nav-item layui-nav-itemed 默认展开-->
    <li class="layui-nav-item layui-nav-itemed">
      <a href="JavaScript:;">网站开发</a>
      <dl class="layui-nav-child">
        <dd><a href="">前端基础</a></dd>
        <dd><a href="">flask 框架</a></dd>
        <dd><a href="">flask 项目</a></dd>
      </dl>
    </li>
  </ul>
  <script src="/static/layui.js"></script>
</body>

侧边导航 ​

  • 给无序列表 ul 添加 class="layui-nav layui-nav-tree layui-nav-side" 可设置侧边垂直导航
  • 设定 layui-this 来指向当前页面分类。
html
<body>
  <!-- 垂直导航 layui-nav layui-nav-tree  -->
  <ul class="layui-nav layui-nav-tree layui-nav-side">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">核心编程</a></li>
    <li class="layui-nav-item"><a href="">爬虫开发</a></li>
    <li class="layui-nav-item"><a href="">数据分析</a></li>
    <!--  layui-nav-item layui-nav-itemed 默认展开-->
    <li class="layui-nav-item layui-nav-itemed">
      <a href="JavaScript:;">网站开发</a>
      <dl class="layui-nav-child">
        <dd><a href="">前端基础</a></dd>
        <dd><a href="">flask 框架</a></dd>
        <dd><a href="">flask 项目</a></dd>
      </dl>
    </li>
  </ul>
  <script src="/static/layui.js"></script>
</body>

总结

水平、垂直、侧边三个导航的 HTML 结构是完全一样的，不同的是

  • 水平导航：class="layui-nav"
  • 垂直导航需要追加：class="layui-nav-tree"
  • 侧边导航需要追加：class="layui-nav-tree layui-nav-side"

API 事件 ​

渲染 ​

element.render('nav', filter);

  • 参数 'nav' 是渲染导航的固定值
  • 参数 filter : 对应导航容器 lay-filter 的属性值

nav 组件会在元素加载完毕后，自动对导航完成一次渲染，因此该方法主要用于对动态插入的导航元素的初始化渲染。

html
<body>
  <div id="test"></div>
  <script src="/static/layui.js"></script>
  <script>
    layui.use(function () {
      var element = layui.element;
      var $ = layui.$;
      // 动态插入导航元素
      $("#test").html(`
          <ul class="layui-nav layui-nav-tree layui-nav-side">
            <li class="layui-nav-item"><a href="">最新活动</a></li>
            <li class="layui-nav-item layui-this"><a href="">核心编程</a></li>
          </ul>
        `);
      // 渲染导航组件
      element.render("nav", "demo-filter-nav");
    });
  </script>
</body>
<span style="width=250px;">属性</span>

属性 ​

属性描述
lay-shrink导航容器属性。展开子菜单时，是否收缩兄弟节点已展开的子菜单。可选值：lay-shrink="" 不收缩兄弟菜单子菜单，默认;lay-shrink="all" 收缩全部兄弟菜单子菜单
lay-bar 导航容器属性。用于禁用滑块跟随功能。如： <div class="layui-nav" lay-bar="disabled">…</div>
lay-unselect导航菜单项属性。 设置后，点击对应菜单项时，不会出现选中效果。

事件 ​

element.on('nav(filter)', callback)

  • 参数 nav(filter) 是一个特定结构。
    • nav 为导航事件固定值；
    • filter 为导航容器属性 lay-filter 对应的值。
  • 参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数。

当点击导航父级菜单和二级菜单时触发。示例：

html
<body>
  <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="filter-nav">
    <li class="layui-nav-item"><a href="javascript:;">最新活动</a></li>
    <li class="layui-nav-item layui-this">
      <a href="javascript:;">核心编程</a>
    </li>
    <li class="layui-nav-item"><a href="javascript:;">爬虫开发</a></li>
    <li class="layui-nav-item"><a href="javascript:;">数据分析</a></li>
    <li class="layui-nav-item layui-nav-itemed">
      <a href="JavaScript:;">网站开发</a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;">前端基础</a></dd>
        <dd><a href="javascript:;">flask 框架</a></dd>
        <dd><a href="javascript:;">flask 项目</a></dd>
      </dl>
    </li>
  </ul>
  <script src="/static/layui.js"></script>
  <script>
    layui.use(function () {
      var element = layui.element;
      var layer = layui.layer;

      // 导航点击事件
      element.on("nav(filter-nav)", function (elem) {
        console.log(elem); // 得到当前点击的元素 jQuery 对象
        layer.msg(elem.text());
      });
    });
  </script>
</body>