LayUI 前端框架基础知识

• 开始使用
  • 需要加入文件即可
    • layui
      • css
        • layui.css
      • layui.js
• 布局
  • 栅格
    • 放在layui-containeer下面
    • layui-row 定义行，定义的行在小屏幕上会堆叠，在桌面上会并列，通过css3的媒体查询实现
      • layui-col-md* 定义列
        • md不同屏幕的大小，见下方
        • *代表该列占用的12等分比如（6/12) 可选值为1-12
        • 如果多个列的千分数值总和等于12，则刚好满行排列，如果>12，多余的列将自动另起一行
        • 列可以出现最多四种不同的组合，分别是xs，手机、sm 平板、md桌面中等、lg 桌面大型
        • 可追加类，layui-col-space5、layui-col-md-offset3 来定义列的间距和偏移
      • layui-col-md-offset* 定义列偏移，只会在桌面屏幕下有效，当低于桌面屏幕的临界值时，就会堆叠
        • *代表列向右偏移占据的列数，可选为1-12
    • layui-col-space* 定义列间距
      • *代表了间距大小
        • 1 3 5 8 19 12 15 18 20 22 28 30
    • 栅格嵌套
      • 在layui-col-md*中插入一个行元素（layui-row)即可完成嵌套
  • 后台布局
• 基本组件
  • 按钮
    • 主题
      • 原始 class="layui-btn layui-btn-primary" 黑白
      • 默认 class="layui-btn" 墨绿
      • 百搭 class="layui-btn layui-btn-normal" 蓝色
      • 暖色 class="layui-btn layui-btn-warm" 橙色
      • 警告 class="layui-btn layui-btn-danger" 红色
      • 禁用 class="layui-btn layui-btn-disabled" 灰色
    • 尺寸
      • 大型 class="layui-btn layui-btn-lg" 43
      • 默认 class="layui-btn" 37
      • 小型 class="layui-btn layui-btn-sm" 30
      • 迷你 class="layui-btn layui-btn-xs" 22
    • 类可以一起用
    • 自适应
      • <button class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
    • 圆角
      • layui-btn-radius
    • 大型百搭圆角按钮 class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
    • 按钮组
      <div class="layui-btn-group">
      <button class="layui-btn">增加</button>
      <button class="layui-btn">编辑</button>
      <button class="layui-btn">删除</button>
      </div>
      • class="layui-btn-group"
    • 按钮组
      • 用于在按钮太多时，排布按钮
      • class="layui-btn-container"
  • 表单
    • class="layui-form"标识一个表单元素块
    • class="layui-form-item"标识一个表单内元素项
    • 输入框
      <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      • required: 必填字段
      • lay-verify: 注册form模块需要验证的类型 
      • class="layui-input":layui.css 的通用css类
    • 下拉框
      <select name="city" lay-verify="">
      <option value="">请选择一个城市</option>
      <option value="010">北京</option>
      <option value="021">上海</option>
      <option value="0571">杭州</option>
      </select> 
      • option为空用于占坑，可自定义文本
      • option 加上 selected 设定默认选中
      • option 加上 disabled 设定禁用
      • option可放在标签,optgroup下分组,用属性label 标识分组名
      • select 加上 lay-search 开启搜索匹配功能
    • 复选框
      默认风格：
      <input type="checkbox" name="" title="写作" checked>
      <input type="checkbox" name="" title="发呆"> 
      <input type="checkbox" name="" title="禁用" disabled> 
      
      原始风格：
      <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
      <input type="checkbox" name="" title="发呆" lay-skin="primary"> 
      <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
      • 属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
      • 属性checked可设定默认选中
      • 属性lay-skin可设置复选框的风格 primary
      • 设置value="1"可自定义值，否则选中时返回的就是默认的on
    • 开关
      <input type="checkbox" name="xxx" lay-skin="switch">
      <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
      <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
      <input type="checkbox" name="aaa" lay-skin="switch" disabled>
      • checkbox变种，lay-skin="switch"即可
      • lay-text="开|关”可以切换开关显示文本
      • disabled开启禁用
      • 设置value="1"可自定义值，否则选中时返回的就是默认的on
    • 单选框
      <input type="radio" name="sex" value="nan" title="男">
      <input type="radio" name="sex" value="nv" title="女" checked>
      <input type="radio" name="sex" value="" title="中性" disabled>
      • 属性title可自定义文本
      • 属性disabled开启禁用
      • 设置value="xxx"可自定义值，否则选中时返回的就是默认的on
    • 文本域
      <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
      • class="layui-textarea":通用css类
    • 组装行内表单
      <div class="layui-form-item">
      
      <div class="layui-inline">
      <label class="layui-form-label">范围</label>
      <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
      </div>
      
      <div class="layui-inline">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-inline" style="width: 100px;">
      <input type="password" name="" autocomplete="off" class="layui-input">
      </div>
      </div>
      
      </div>
      • class="layui-inline"：定义外层行内
      • class="layui-input-inline"：定义内层行内
      • 行内使标签显示在一行
    • lay-ignore忽略美化
  • 导航
    • 需要加载element模块，来完成交互操作
      • layui.use('element',function(){var element=layui.element;});//js代码
    • 水平导航
      <ul class="layui-nav" lay-filter="">
      <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"> <!-- 二级菜单 -->
      <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>
      • 由无序列表实现
      • class = layui-nav 表明列表 ul
      • class= layui-nav-item 表明列表项 li
      • class= layui-nav-child 表明列表项下的二级菜单 dl
      • 二级菜单的菜单项 dd
    • 导航其它元素
      • layui-badge 徽章如等级
      • layui-badge-dot 红点如消息
      • <img src="图片地址" class="layui-nav-img"> 图片导航
    • 主题
      • 水平主题
        • layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝） 
      • 垂直主题
        • ayui-bg-cyan（藏青）
    • 垂直、侧边导航
      <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>
      • 垂直有展开的交互
      • 侧边在垂直的基础上贴边
      • 水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：
      • 垂直导航需要追加class：layui-nav-tree
      • 侧边导航需要追加class：layui-nav-tree layui-nav-side
    • 面包屑导航

      

      
      <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a href="">国际新闻</a>
      <a href="">亚太地区</a>
      <a><cite>正文</cite></a>
      </span>
      • layui-breadcrumb
      • 默认分隔为/，用lay-separator="-"，改成-
  • 选项卡
    <div class="layui-tab">
    <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
    </div>
    </div>
    • 需要加载element模块，否则无法操作
      • layui.use('element',function(){var element=layui.element;});//js代码
    • Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能
    • layui-tab 表明选项卡 div
    • layui-tab-title 表明一个选项 ul
    • layui-this 表示当前页面
    • layui-tab-content (div) 中的各个layui-tab-item (div) 对应ul中各选项卡的内容
    • 如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器
    • 主题
      • layui-tab-brief 简洁
      • layui-tab-card 卡片
      • layui-allowClose="true" 来允许Tab选项卡被删
    • ID定位
      • 给选项卡设置lay-id="xxx"
  • 进度条
    <div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="10%"></div>
    </div>
    • 也需要element模块
    • layui-progress 表明进度条父级
      • lay-showPercent="true"显示文本
      • layui-progress-big 表示大进度条
    • layui-progress-bar 表明进度条
      • lay-percent="10%" 进度条初始百分比
      • layui-bg-xxx 表示颜色
  • 面板
    • 卡片面板
      <div class="layui-card">
      <div class="layui-card-header">卡片面板</div>
      <div class="layui-card-body">
      卡片式面板面板通常用于非白色背景色的主体内<br>
      从而映衬出边框投影
      </div>
      </div>
      • layui-card
        • layui-card-header 卡片标题
        • layui-card-body 卡片内容
    • 折叠面板
      <div class="layui-collapse">
      <div class="layui-colla-item">
      <h2 class="layui-colla-title">杜甫</h2>
      <div class="layui-colla-content layui-show">内容区域</div>
      </div>
      <div class="layui-colla-item">
      <h2 class="layui-colla-title">李清照</h2>
      <div class="layui-colla-content layui-show">内容区域</div>
      </div>
      <div class="layui-colla-item">
      <h2 class="layui-colla-title">鲁迅</h2>
      <div class="layui-colla-content layui-show">内容区域</div>
      </div>
      </div>
      • 依赖于element模块
      • layui-collapse 面板父元素
        • layui-colla-item 面板项
          • layui-colla-title 面板标题
          • layui-colla-content 面板内容
          • layui-show 默认显示
    • 手风琴，只能开一个
      <div class="layui-collapse" lay-accordion>
      <div class="layui-colla-item">
      <h2 class="layui-colla-title">杜甫</h2>
      <div class="layui-colla-content layui-show">内容区域</div>
      </div>
      <div class="layui-colla-item">
      <h2 class="layui-colla-title">李清照</h2>
      <div class="layui-colla-content layui-show">内容区域</div>
      </div>
      <div class="layui-colla-item">
      <h2 class="layui-colla-title">鲁迅</h2>
      <div class="layui-colla-content layui-show">内容区域</div>
      </div>
      </div>
      • 在折叠面板的基础上加 lay-accordion
  • 表格
    • 常规用法
      <table class="layui-table">
      <colgroup>
      <col width="150">
      <col width="200">
      <col>
      </colgroup>
      <thead>
      <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
      </tr> 
      </thead>
      <tbody>
      <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
      </tr>
      <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
      </tr>
      </tbody>
      </table>
      • layui-table lay-skin="line/row/now" lay-size="sm/lg/不写" lay-even 在table
        • thead
          • tr th
        • tbody
          • tr td
  • 徽章
    • 小圆点
      • layui-badge-dot 在span,不能加文字
    • 椭圆体
      • layui-badge 在span，可加文字
    • 可用layui-bg-xxx 定义颜色
    • 边框体
      • layui-badge-rim, 可加文字
    • 可与其它元素搭配
  • 时间线
    • 基于ul
    • layui-timeline ul
      • layui-timeline-item li 各个日期内容
        • layui-timeline-axis layui-icon 图标 i 时间轴
        • layui-timeline-content layui-text 内容 div
          • layui-timeline-title 标题 h3
          • <p></p>
  • 辅助元素
    • 引用文字
      • layui-elem-quote 在引用块<blockquote></blockquote>
      • layui-elem-quote layui-quote-nm 在墨绿引用块
    • 字段集区块
      • layui-elem-field 在文字集 <fieldset></> layui-field-title 横线风格
        • <legend></>文字标题
        • layui-field-box 文字集
    • 分割线
      • 默认分割线<hr>
      • 赤色分割线<hr class="layui-bg-red">
      • 橙色分割线<hr class="layui-bg-orange">
      • 墨绿分割线<hr class="layui-bg-green">
      • 青色分割线<hr class="layui-bg-cyan">
      • 蓝色分割线<hr class="layui-bg-blue">
      • 黑色分割线<hr class="layui-bg-black">
      • 灰色分割线<hr class="layui-bg-gray">
• 内置模块
  • 常用元素操作 layui.element
    • tab
      <div class="layui-tab" lay-filter="demo">
      <ul class="layui-tab-title">
      <li class="layui-this">网站设置</li>
      <li>商品管理</li>
      <li>订单管理</li>
      </ul>
      <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">内容1</div>
      <div class="layui-tab-item">内容2</div>
      <div class="layui-tab-item">内容3</div>
      </div>
      </div>
    • layui.use('element', function(){//调用element模块
      • var element = layui.element;
        • element.on('tab(demo)', function(data){
          • console.log(data);