3.Layui3个基本元素

他望见山脉起伏，弯下去的弧线轻抚一轮月亮。夜色浸染一片悠悠山野。——《云边有个小卖部》

1.按钮

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。

通过追加格式为layui-btn-{type}的class来定义其它按钮风格。

内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

比如:

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="https://www.layui.site" class="layui-btn">一个可跳转的按钮</a>

(1) 按钮组
将按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配

<div class="layui-btn-group">
  <button type="button" class="layui-btn">增加</button>
  <button type="button" class="layui-btn">编辑</button>
  <button type="button" class="layui-btn">删除</button></div>

长这样

(2) 按钮容器：
用于把一堆按钮中间分开,不要挤在一起

<div class="layui-btn-container">
  <button type="button" class="layui-btn">按钮一</button> 
  <button type="button" class="layui-btn">按钮二</button> 
  <button type="button" class="layui-btn">按钮三</button></div>

长这样

2.导航

多以菜单的形式呈现，可应用于头部和侧边。

面包屑结构简单，支持自定义分隔符。同时加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用

<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element; 
  //…
});
</script>  

比如:

水平导航

<ul class="layui-nav layui-bg-blue" lay-filter="">    <!-- ui 定义了一个无序列表，li表示每一项内容-->
        <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="javascript:;">解决方案</a>

            <dl class="layui-nav-child">               <!-- dl表示二级菜单 -->
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>

        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>

水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side

<!--垂直导航  -->
   <ul class="layui-nav layui-nav-tree" lay-filter="test">
   <!-- 侧边导航用: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
       <li class="layui-nav-item layui-nav-itemed">
           <a href="javascript:;">默认展开</a>
           <dl class="layui-nav-child">
               <dd><a href="javascript:;">选项1</a></dd>
               <dd><a href="javascript:;">选项2</a></dd>
               <dd><a href="">跳转</a></dd>
           </dl>
       </li>
       <li class="layui-nav-item">
           <a href="javascript:;">解决方案</a>
           <dl class="layui-nav-child">
               <dd><a href="">移动模块</a></dd>
               <dd><a href="">后台模版</a></dd>
               <dd><a href="">电商平台</a></dd>
           </dl>
       </li>
       <li class="layui-nav-item"><a href="">产品</a></li>
       <li class="layui-nav-item"><a href="">大数据</a></li>
   </ul>

3.菜单

和垂直导航差不多

它实则是一个 ul li 的层级嵌套，当需要出现「菜单组」和「子级菜单」时，只需要添加相对应的 class 类名即可


事件触发：

<div class="layui-panel">
  <ul class="layui-menu" id="docDemoMenu1">
    <li lay-options="{id: 100}">
      <div class="layui-menu-body-title">menu item 1</div>
    </li>
  </ul>
</div>