关于html5:前端框架LayUI介绍及用法

62次阅读

共计 26430 个字符，预计需要花费 67 分钟才能阅读完成。

LayUI

LayUI 的装置及应用

LayUI 的介绍

​ layui（谐音：类 UI) 是一款采纳本身模块标准编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织模式，门槛极低，拿来即用。

​ 由国人开发，16 年出厂的框架，其次要提供了很多难看、不便的款式，并且根本拿来即用，和 Bootstrap 有些类似，但该框架有个极大的益处就是定义了很多前后端交互的款式接口，如分页表格，只需在前端配置好接口，后端则依照定义好的接口规定返回数据，即可实现页面的展现，极大缩小了后端人员的开发成本。

​ 官网：https://www.layui.com

​ 官网文档：https://www.layui.com/doc/

LayUI 的特点

（1）layui 属于轻量级框架，简略好看。实用于开发后端模式，它在服务端页面上有十分好的成果。

（2）layui 是提供给后端开发人员的 ui 框架，基于 DOM 驱动。

下载与应用

  1. 在 官网首页 下载到 layui 的最新版。目录构造如下：

     ├─css // css 目录
  │  │─modules // 模块 css 目录（个别如果模块绝对较大，咱们会独自提取，比方上面三个：）│  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css // 外围款式文件
  ├─font  // 字体图标目录
  ├─images // 图片资源目录（目前只有 layim 和编辑器用到的 GIF 表情）│─lay // 模块外围目录
  │  └─modules // 各模块组件
  │─layui.js // 根底外围库
  └─layui.all.js // 蕴含 layui.js 和所有模块的合并文件
  2. 取得 layui 后，将其残缺地部署（拷贝到我的项目中）到你的我的项目目录，你只须要引入下述两个文件：
./layui/css/layui.css
./layui/layui.js // 提醒：如果是采纳非模块化形式，此处可换成：./layui/layui.all.js
  1. 根本的入门页面
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title> 开始应用 layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
 
<!-- 你的 HTML 代码 -->
 
<script src="layui/layui.js"></script>
<script> // 模块和回调函数
    // 个别间接写在一个 js 文件中
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer
      ,form = layui.form;

      layer.msg('Hello World');
    }); </script> 
</body>
</html>

  1. 还须要申明须要应用的 模块 和 回调函数。参照官网文档，抉择本人想要的成果就行。

    比方：

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

          //…
    }); </script>

页面元素

布局

布局容器

固定宽度

将栅格放入一个带有 class=“layui-container” 的特定的容器中，以便在小屏幕以上的设施中固定宽度，让列可控。

<div class="layui-container">
  <div class="layui-row">
    ……
  </div>
</div>
残缺宽度

能够不固定容器宽度。将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中，那么宽度将不会固定，而是 100% 适应

<div class="layui-fluid">
  ……
</div>

栅格零碎

​ 为了丰盛网页布局，简化 HTML/CSS 代码的耦合，并晋升多终端的适配能力，layui 引进了一套具备响应式能力的栅格零碎。将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在挪动设施、平板、桌面中 / 大尺寸四种不同的屏幕下施展着各自的作用。

栅格布局规定

  1. 采纳 layui-row 来定义行，如：

    <div class="layui-row"></div>

  2. 采纳相似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：

    • 变量 md 代表的是不同屏幕下的标记
    • 变量 * 代表的是该列所占用的 12 等分数（如 6 /12），可选值为 1 – 12
    • 如果多个列的“等分数值”总和等于 12，则刚好满行排列。如果大于 12，多余的列将主动另起一行。
  3. 列能够同时呈现最多四种不同的组合，别离是：_xs_（超小屏幕，如手机）、_sm_（小屏幕，如平板）、_md_（桌面中等屏幕）、_lg_（桌面大型屏幕）。
  4. 可对列追加相似 layui-col-space5_、_layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
  5. 能够在列（column）元素中放入你本人的任意元素填充内容

示例：

<h3> 惯例布局（以中型屏幕桌面为例）：</h3>
<div class="layui-row">
    <div class="layui-col-md9" style="background-color: #00F7DE;">
      你的内容 9/12
    </div>
    <div class="layui-col-md3" style="background-color: rosybrown;">
      你的内容 3/12
    </div>
</div>
响应式规定

​ 栅格的响应式能力，得益于 CSS3 媒体查问（Media Queries）的强力反对，从而针对四类不同尺寸的屏幕，进行相应的适配解决。

超小屏幕 (手机 <768px)

小屏幕 (平板≥768px)

中等屏幕 (桌面≥992px)

大型屏幕(桌面≥1200px)

_.layui-container_的值

auto

750px

970px

1170px

标记

xs

sm

md

lg

列对应类 * 为 1 -12 的等分数值

layui-col-xs*

layui-col-sm*

layui-col-md*

layui-col-lg*

总列数

12

12

12

12

响应行为

始终按设定的比例程度排列

在以后屏幕下程度排列，如果屏幕大小低于临界值则重叠排列

在以后屏幕下程度排列，如果屏幕大小低于临界值则重叠排列

在以后屏幕下程度排列，如果屏幕大小低于临界值则重叠排列

<h3> 平板、桌面端的不同体现：</h3>
<div class="layui-row">
    <div class="layui-col-sm6 layui-col-md4" style="background-color: thistle">
        平板≥768px：6/12 | 桌面端≥992px：4/12
    </div>
</div>

<div class="layui-row">        
    <div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;">
        平板≥768px：4/12 | 桌面端≥992px：6/12
    </div>
</div>

<div class="layui-row">
    <div class="layui-col-sm12 layui-col-md8" style="background-color: coral">
        平板≥768px：12/12 | 桌面端≥992px：8/12
    </div>
</div>
列边距

​ 通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会呈现右边距，最右的列不会呈现左边距。列间距在保障排版好看的同时，还能够进一步保障分列的宽度精密水平。咱们联合网页罕用的边距，预设了 12 种不同尺寸的边距，别离是：

/* 反对列之间为 1px-30px 区间的所有单数距离，以及 1px、5px、15px、25px 的复数距离 */
layui-col-space1 
layui-col-space2 
layui-col-space4 
layui-col-space5 
layui-col-space6 
layui-col-space8 
layui-col-space10 
layui-col-space12 
layui-col-space14 
layui-col-space15 
layui-col-space16 
layui-col-space18 
layui-col-space20 
layui-col-space22 
layui-col-space24 
layui-col-space25 
layui-col-space26 
layui-col-space28 
layui-col-space30

示例：

<h3> 列间距 </h3>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md4" >
        <!-- 须要在 layui-col-md4 外面再加一层 div -->
        <div style="background-color: #009688;">
            1/3
        </div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: burlywood;">
            1/3
        </div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: silver;">
            1/3
        </div>
    </div>
</div>

注：

1. layui-col-space：设置后不起作用次要是因为 ** 设置的是 padding**, 也就是说是 ** 向内缩 **，所以设置背景色 padding 也是会添上色彩，看起来如同没有间距一样。能够在外面在加一个 div，来达到目标。2. 间距个别不高于 30px，如果超过 30，倡议应用列偏移。
列偏移

​ 对列追加 相似 layui-col-md-offset 的预设类，从而让列向右偏移。其中 号代表的是偏移占据的列数，可选中为 1 – 12。
​ 如：_layui-col-md-offset3_，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度

<h3> 列偏移 </h3>
<div class="layui-row">
    <div class="layui-col-md4" style="background-color: rosybrown;">
        4/12
    </div>
    <div class="layui-col-md4 layui-col-md-offset4" style="background-color: cornflowerblue;">
        偏移 4 列，从而在最右
    </div>
</div>

​ 注：列偏移可针对不同屏幕的规范进行设定，在以后设定的屏幕下无效，当低于桌面屏幕的规定的临界值，就会重叠排列。

列嵌套

​ 能够对栅格进行无穷档次的嵌套。在列元素（_layui-col-md*_）中插入行元素（_layui-row_），即可实现嵌套。

<h3> 列嵌套 </h3>
<div class="layui-row layui-col-space5">
    <div class="layui-col-md5" style="background-color: thistle;">
        <div class="layui-row">
            <div class="layui-col-md3" style="background-color: burlywood;" >
                外部列
            </div>
            <div class="layui-col-md5" style="background-color: indianred;">
                外部列
            </div>
            <div class="layui-col-md4" style="background-color: mediumaquamarine;">
                外部列
            </div>
        </div>
    </div>
</div>

根本元素

按钮

用法

​ 向任意 HTML 元素设定_class=“layui-btn”_，建设一个根底按钮。通过追加格局为 layui-btn-{type} 的 class 来定义其它按钮格调。

<!-- 根底按钮 -->
<button type="button" class="layui-btn"> 一个规范的按钮 </button>
<a href="http://www.layui.com" class="layui-btn"> 一个可跳转的按钮 </a>
<div class="layui-btn"> 一个按钮 </div>
主题

名称

组合

原始

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”

示例：

<!-- 不同主题的按钮 -->
<button class="layui-btn"> 默认按钮 </button>
<button class="layui-btn layui-btn-primary"> 原始按钮 </button> 
<button class="layui-btn layui-btn-normal"> 百搭按钮 </button>
<button class="layui-btn layui-btn-warm"> 寒色按钮 </button>
<button class="layui-btn layui-btn-danger"> 正告按钮 </button>
<button class="layui-btn layui-btn-disabled"> 禁用按钮 </button>
尺寸

尺寸

组合

大型

class=“layui-btn layui-btn-lg”

默认

class=“layui-btn”

小型

class=“layui-btn layui-btn-sm”

迷你

class=“layui-btn layui-btn-xs”

<!-- 不同尺寸的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg"> 大型 </button> 
<button class="layui-btn"> 默认 </button>
<button class="layui-btn layui-btn-sm layui-btn-danger"> 小型 </button>
<button class="layui-btn layui-btn-xs"> 迷你 </button>
圆角

layui-btn-radius

<button class="layui-btn layui-btn-radius"> 默认按钮 </button>
<button class="layui-btn layui-btn-primary layui-btn-radius"> 原始按钮 </button> 
<button class="layui-btn layui-btn-normal layui-btn-radius"> 百搭按钮 </button>
<button class="layui-btn layui-btn-warm layui-btn-radius"> 寒色按钮 </button>
<button class="layui-btn layui-btn-danger layui-btn-radius"> 正告按钮 </button>
<button class="layui-btn layui-btn-disabled layui-btn-radius"> 禁用按钮 </button>
图标
<button type="button" class="layui-btn">
    <i class="layui-icon">&#xe608;</i> 增加
</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
    <i class="layui-icon">&#x1002;</i> 刷新
</button>

导航

​ 导航个别指页面引导性频道汇合，多以菜单的模式出现，可利用于头部和侧边。面包屑构造简略，反对自定义分隔符。

​ 依赖加载模块：element

实现步骤：

  1. 引入的资源

    <link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

  2. 依赖加载模块

    <script type="text/javascript"> // 留神：导航 依赖 element 模块，否则无奈进行功能性操作
    layui.use('element', function(){var element = layui.element;}); </script>
  3. 显示指定类型的导航
程度导航
<ul class="layui-nav">
    <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>
垂直 / 侧边导航
<ul class="layui-nav layui-nav-tree" >
<!-- 侧边导航: <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 构造是齐全一样的，不同的是：

程度导航：layui-nav
垂直导航须要追加 class：layui-nav-tree
侧边导航须要追加 class：layui-nav-tree layui-nav-side
导航主题

​ 通过对导航追加 CSS 背景类，让导航出现不同的主题色

<!-- 如定义一个墨绿背景色的导航 -->
<ul class="layui-nav layui-bg-move" >
  …
</ul>

程度导航反对的其它背景主题有：_layui-bg-cyan_（藏青）、_layui-bg-molv_（墨绿）、_layui-bg-blue_（艳蓝）
垂直导航反对的其它背景主题有：_layui-bg-cyan_（藏青）

面包屑
<span class="layui-breadcrumb">
  <a href=""> 首页 </a>
  <a href=""> 国内新闻 </a>
  <a href=""> 亚太地区 </a>
  <a><cite> 注释 </cite></a>
</span>

你还能够通过设置属性 lay-separator=”” 来自定义分隔符。例如：

<span class="layui-breadcrumb" lay-separator="-">
  <a href=""> 首页 </a>
  <a href=""> 国内新闻 </a>
  <a href=""> 亚太地区 </a>
  <a><cite> 注释 </cite></a>
</span>

选项卡

​ 导航菜单可利用于头部和侧边，反对响应式，反对删除选项卡等性能。

​ 依赖加载模块：element

实现步骤

  1. 引入的资源

    <link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

  2. 依赖加载模块

    <script type="text/javascript"> // 留神：选项卡 依赖 element 模块，否则无奈进行功能性操作
    layui.use('element', function(){var element = layui.element;}); </script>

  3. 加载 HTML

    <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>
选项卡格调
默认格调：layui-tab
简洁格调须要追加 class：layui-tab-brief
卡片格调须要追加 class：layui-tab-card
带删除的选项卡

能够对父层容器设置属性 _lay-allowClose=“true”_来容许 Tab 选项卡被删除

<div class="layui-tab" lay-allowClose="true">
  <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>

表格

惯例用法
<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>
根底属性

属性名

属性值

备注

lay-even

无

用于开启 隔行 背景，可与其它属性一起应用

lay-skin=“属性值”

line（行边框格调）
row（列边框格调）
nob（无边框格调）

若应用默认格调不设置该属性即可

lay-size=“属性值”

sm（小尺寸）
lg（大尺寸）

若应用默认尺寸不设置该属性即可

你所须要的根底属性写在 table 标签上，例如：

<!-- 一个带有隔行背景，且行边框格调的大尺寸表格 -->
<table class="layui-table" lay-even lay-size="lg" lay-skin="row">
  <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>

表单

​ 依赖加载模块：form

  1. 在一个容器中设定 class=“layui-form” 来标识一个表单元素块

    <form class="layui-form" action="">
    
</form>

  2. 根本的行区块构造，它提供了响应式的反对。能够换成其余构造，但必须要在外层容器中定义_class=“layui-form”_，form 模块能力失常工作。

    <div class="layui-form-item">
      <label class="layui-form-label"> 标签区域 </label>
      <div class="layui-input-block">
        原始表单元素区域
      </div>
</div>
输入框
<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>
  • 属性_selected_可设定默认项
  • 属性_disabled_开启禁用，select 和 option 标签都反对
<select name="city" lay-verify="">
  <option value="010"> 北京 </option>
  <option value="021" disabled> 上海（禁用成果）</option>
  <option value="0571" selected> 杭州 </option>
</select>
  • 能够通过 optgroup 标签给 select 分组
<select name="quiz">
  <option value=""> 请抉择 </option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市"> 你工作的第一个城市？</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号"> 你的工号？</option>
    <option value="你最喜爱的老师"> 你最喜爱的老师？</option>
  </optgroup>
</select>
  • 通过设定属性 lay-search 来开启搜寻匹配性能
<select name="city" lay-verify="" lay-search>
  <option value="010">layer</option>
  <option value="021">form</option>
  <option value="0571" selected>layim</option>
</select>
复选框
<h2> 默认格调：</h2>
<input type="checkbox" name=""title=" 写作 " checked>
<input type="checkbox" name=""title=" 发愣 "> 
<input type="checkbox" name=""title=" 禁用 " disabled> 
 
<h2> 原始格调：</h2>
<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_可设置复选框的格调（原始格调：lay-skin=“primary”）
  • 设置 value=“1” 可自定义值，否则选中时返回的就是默认的 on
开关

将复选框 checkbox，通过设定 _lay-skin=“switch”_造成了开关格调

<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>
  • 属性_checked_可设定默认开
  • 属性_disabled_开启禁用
  • 属性_lay-text_可自定义开关两种状态的文本（两种文本用“|”隔开）
  • 设置 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="remark" required lay-verify="required" placeholder="请输出集体介绍" class="layui-textarea"></textarea>
  • _class=“layui-textarea”_：layui.css 提供的通用 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”_：定义外层行内
  • _class=“layui-input-inline”_：定义内层行内
疏忽丑化渲染

​ 能够对表单元素减少属性 lay-ignore 设置后，将不会对该标签进行丑化渲染，即保留零碎格调。

<input type="radio" name="sex" value="nan" title="男" lay-ignore>
表单方框格调

​ 通过追加 layui-form-pane 的 class，来设定表单的方框格调。

<form class="layui-form layui-form-pane" action="">
  <!-- 
        内部结构都一样，值得注意的是 复选框 / 开关 / 单选框 这些组合在该格调下须要额定增加 pane 属性（否则        会看起来比拟顺当），如：-->
  <div class="layui-form-item" pane>
    <label class="layui-form-label"> 单选框 </label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
</form>

组件示例

弹出层

模块加载名称：_layer_，独立版本：layer.layui.com

应用场景

因为 layer 能够独立应用，也能够通过 Layui 模块化应用。所以请依照你的理论需要来抉择。

场景

用前筹备

调用形式

  1. 作为独立组件应用

如果你只是独自想应用 layer，你能够去 layer 独立版本官网下载组件包。你须要在你的页面引入_jQuery_1.8 以上的任意版本，并引入_layer.js_。

通过 script 标签引入 layer.js 后，间接用即可。

  1. layui 模块化应用

如果你应用的是 layui，那么你间接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但须要引入_layui.css_和_layui.js_

通过 layui.use(‘layer’, callback) 加载模块

  1. 作为独立组件应用 layer

    <!-- 引入好 layer.js 后，间接用即可 -->
<script src="layer.js"></script>
<script> layer.msg('hello'); </script>

  2. 在 layui 中应用 layer

    layui.use('layer', function(){
  var layer = layui.layer;
  
  layer.msg('hello');
});
根底参数

  1. type – 根本层类型

    类型：Number，默认：0

可传入的值有：0（信息框，默认）1（页面层）2（iframe 层）3（加载层）4（tips 层）

  2. title – 题目

    类型：String/Array/Boolean，默认：'信息'

title 反对三种类型的值：若传入的是一般的字符串，如 title :'我是题目'，那么只会扭转题目文本；若须要自定义款式，能够 title: ['文本', 'font-size:18px;']，数组第二项能够写任意 css 款式；若你不想显示标题栏，能够 title: false；

  3. content – 内容

    类型：String/DOM/Array，默认：''

content 可传入的值是灵便多变的，不仅能够传入一般的 html 内容，还能够指定 DOM。
     /* 信息框 */
layer.open({
    type:0,
    title:"零碎音讯",
    // content 能够传入任意的文本或 html
    content:"Hello"
});

/* 页面层 */
layer.open({
    type:1,
    title:"零碎音讯",
    // content 能够传入任意的文本或 html
    content:"<div style='height:100px;width:200px'>Hello</div>"
});

/* iframe */
layer.open({
    type:2,
    title:"零碎音讯",
    // content 是一个 URL，如果你不想让 iframe 呈现滚动条，你还能够 content: ['url', 'no']
    content:"http://www.baidu.com"
    // content:["http://www.baidu.com",'no']
});

 /* tips 层 */
layer.open({
  type: 4,
  content: ['内容', '#id'] // 数组第二项即吸附元素选择器或者 DOM
});

  4. area – 宽高

    类型：String/Array，默认：'auto'

在默认状态下，layer 是宽高都自适应的。当定义宽度时，你能够 area: '500px'，高度依然是自适应的。当宽高都要定义时，你能够 area: ['500px', '300px']。

  5. icon – 图标

    注：信息框和加载层的公有参数。类型：Number，默认：-1（信息框）/0（加载层）信息框默认不显示图标。当你想显示图标时，默认层能够传入 0 -6。如果是加载层，能够传入 0 -2。
    // eg1
layer.alert('酷毙了', {icon: 1});
// eg2
layer.msg('不开心。。', {icon: 5});
// eg3
layer.load(1); // 格调 1 的加载

  6. 示例

    // eg1
layer.alert('很快乐见到你????', {icon: 6});

// eg2
layer.msg('你违心和我做敌人么？', {
    time: 0, // 不主动敞开
    btn: ['当然违心', '狠心回绝'], // 按钮
    yes: function(index){layer.close(index); // 敞开以后弹出框
        layer.msg('新敌人，你好！', {
            icon: 6, // 图标
            btn: ['开心','高兴']
        });
    }
});

// eg3
layer.msg('这是罕用的弹出层');

// eg4
layer.msg('So sad /(ㄒ o ㄒ)/~~', {icon: 5});

// eg5
layer.msg('玩命加载中...=~ω~=', function(){
    // 敞开后的操作
    layer.msg('(⊙o⊙)？');
});

日期与工夫抉择

​ 模块加载名称：_laydate_，独立版本：http://www.layui.com/laydate/

​ layDate 蕴含了大量的更新，其中次要以：_年选择器_、_年月选择器_、_日期选择器_、_工夫选择器_、_日期工夫选择器_ 五种类型的抉择形式。

疾速应用

​ 和 layer 一样，能够在 layui 中应用 layDate，也可间接应用 layDate 独立版，请依照理论需要来抉择。

场景

用前筹备

调用形式

  1. layui 模块化应用

下载 layui 后，引入_layui.css_和_layui.js_即可

通过 layui.use(‘laydate’, callback) 加载模块后，再调用办法

  1. 作为独立组件应用

去 layDate 独立版本官网下载组件包，引入 laydate.js 即可

间接调用办法应用

在 layui 模块中应用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 日期与工夫抉择 </title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <div class="layui-inline">
            <input type="text" class="layui-input" id="date1" />
        </div>
    </body>
    <script src="layui/layui.js"></script>
    <script type="text/javascript"> layui.use('laydate', function(){
          var laydate = layui.laydate;
          
          // 执行一个 laydate 实例
          laydate.render({elem: '#date1' // 指定元素});
        }); </script>
</html>
根底参数

  1. elem – 绑定元素

    类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值个别为选择器，或 DOM 对象 
    laydate.render({elem: '#test' // 或 elem: document.getElementById('test')、elem: lay('#test') 等
});

  2. type – 控件抉择类型

    类型：String，默认值：date

用于独自提供不同的选择器类型，可选值如下表：

    type 可选值

    名称

    用处

    year

    年选择器

    只提供年列表抉择

    month

    年月选择器

    只提供年、月抉择

    date

    日期选择器

    可抉择：年、月、日。type 默认值，个别可不填

    time

    工夫选择器

    只提供时、分、秒抉择

    datetime

    日期工夫选择器

    可抉择：年、月、日、时、分、秒

    // 年选择器
laydate.render({ 
  elem: '#test'
  ,type: 'year'
});
 
// 年月选择器
laydate.render({ 
  elem: '#test'
  ,type: 'month'
});
 
// 日期选择器
laydate.render({ 
  elem: '#test'
  //,type: 'date' // 默认，可不填
});
 
// 工夫选择器
laydate.render({ 
  elem: '#test'
  ,type: 'time'
});
 
// 日期工夫选择器
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
});

  3. format – 自定义格局

    类型：String，默认值：yyyy-MM-dd

通过日期工夫各自的格局符和长度，来设定一个你所须要的日期格局。layDate 反对的格局如下：

    格局符

    阐明

    yyyy

    年份，至多四位数。如果有余四位，则后面补零

    y

    年份，不限度位数，即不论年份多少位，后面均不补零

    MM

    月份，至多两位数。如果有余两位，则后面补零。

    M

    月份，容许一位数。

    dd

    日期，至多两位数。如果有余两位，则后面补零。

    d

    日期，容许一位数。

    HH

    小时，至多两位数。如果有余两位，则后面补零。

    H

    小时，容许一位数。

    mm

    分钟，至多两位数。如果有余两位，则后面补零。

    m

    分钟，容许一位数。

    ss

    秒数，至多两位数。如果有余两位，则后面补零。

    s

    秒数，容许一位数。

    通过上述不同的格局符组合成一段日期工夫字符串，可任意排版。

    // 自定义日期格局
laydate.render({ 
  elem: '#test'
  ,format: 'yyyy 年 MM 月 dd 日' // 可任意组合
});

  4. value – 初始值

    类型：String，默认值：new Date()

反对传入合乎 format 参数设定的日期格局字符，或者 new Date() 
    // 传入合乎 format 格局的字符给初始值
laydate.render({ 
  elem: '#test'
  ,value: '2018-08-18' // 必须遵循 format 参数设定的格局
});
 
// 传入 Date 对象给初始值
laydate.render({ 
  elem: '#test'
  ,value: new Date(1534766888000) // 参数即为：2018-08-20 20:08:08 的工夫戳
});

分页

​ 模块加载名称：_laypage_

疾速应用

​ laypage 的应用非常简单，指向一个用于寄存分页的容器，通过服务端失去一些初始值，即可实现分页渲染。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 分页 </title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <div id="test1"></div>
    </body>
    <script src="layui/layui.js"></script>
    <script type="text/javascript"> layui.use('laypage', function(){
          var laypage = layui.laypage;
          
          // 执行一个 laypage 实例
          laypage.render({
            elem: 'test1' // 留神，这里的 test1 是 ID，不必加 # 号
            ,count: 50 // 数据总数，从服务端失去
          });
        }); </script>
</html>
根底参数

通过外围办法：_laypage.render(options)_ 来设置根底参数。

参数选项

阐明

类型

默认值

elem

指向寄存分页的容器，值能够是容器 ID、DOM 对象。如：1. elem:‘id’_留神：这里不能加 # 号_2. elem: document.getElementById(‘id’)

String/Object

–

count

数据总数。个别通过服务端失去

Number

–

limit

每页显示的条数。laypage 将会借助 count 和 limit 计算出分页数。

Number

10

limits

每页条数的选择项。如果 layout 参数开启了 limit，则会呈现每页条数的 select 抉择框

Array

[10, 20, 30, 40, 50]

curr

起始页。个别用于刷新类型的跳页以及 HASH 跳页。如：
// 开启 location.hash 的记录
laypage.render({
elem:‘test1’,
count: 500 ,
// 获取起始页
curr: location.hash.replace(’#!fenye=’,‘’)
// 自定义 hash 值
,hash:‘fenye’
}); `

Number

1

groups

间断呈现的页码个数

Number

5

prev

自定义“上一页”的内容，反对传入一般文本和 HTML

String

上一页

next

自定义“下一页”的内容，同上

String

下一页

first

自定义“首页”的内容，同上

String

1

last

自定义“尾页”的内容，同上

String

总页数值

layout

自定义排版。可选值有：_count_（总条目输区域）、_prev_（上一页区域）、_page_（分页区域）、_next_（下一页区域）、_limit_（条目选项区域）、_refresh_（页面刷新区域。留神：layui 2.3.0 新增）、_skip_（快捷跳页区域）

Array

[‘prev’,‘page’,‘next’]

theme

自定义主题。反对传入：_色彩值_，或_任意一般字符_。如：1. theme:‘#c00’2. theme:‘xxx’// 将会生成 class=“layui-laypage-xxx”的 CSS 类，以便自定义主题

String

–

hash

开启 location.hash，并自定义 hash 值。如果开启，在触发分页时，会主动对 url 追加：_#!hash 值 ={curr}_ 利用这个，能够在页面载入时就定位到指定页

String/Boolean

false

jump – 切换分页的回调

当分页被切换时触发，函数返回两个参数：_obj_（以后分页的所有选项值）、first（是否首次，个别用于初始加载的判断）

laypage.render({
    elem: 'page'
    ,count: 100 // 数据总数，从服务端失去
    ,groups:10 // 间断呈现的页码个数
    ,layout:['prev', 'page', 'next','limit','count'] // 自定义排版
    ,limits:[5,10,20] // layout 属性设置了 limit 值，可会呈现条数下拉抉择框
    ,jump: function(obj, first){
        // obj 蕴含了以后分页的所有参数，比方：console.log(obj.curr); // 失去当前页，以便向服务端申请对应页的数据。console.log(obj.limit); // 失去每页显示的条数

        // 首次不执行
        if(!first){//do something}
    }
});

数据表格

​ 模块加载名称：_table_

疾速应用

​ 创立一个 table 实例最简略的形式是，在页面搁置一个元素

，而后通过 table.render() 办法指定该容器。

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>table 数据表格 </title>
      <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <table id="demo"></table>
    </body>
    
    <script src="layui/layui.js" type="text/javascript" ></script>
    <script type="text/javascript"> layui.use('table', function(){
          var table = layui.table;
          
          // 第一个实例
          table.render({
            elem: '#demo'
            ,url: 'user.json' // 数据接口
            ,cols: [[ // 表头
              {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
              ,{field: 'username', title: '用户名', width:80}
              ,{field: 'sex', title: '性别', width:80, sort: true}
              ,{field: 'city', title: '城市', width:80} 
              ,{field: 'sign', title: '签名', width: 177}
            ]]
          });
          
        }); </script>
</html>

数据接口 user.json

{
    "code": 0,
    "msg": "","count": 50,"data": [{"id": 10000,"username":"user-0","sex":" 女 ","city":" 城市 -0","sign":" 签名 -0"},
        {
            "id": 10001,
            "username": "user-1",
            "sex": "男",
            "city": "城市 -1",
            "sign": "签名 -1"
        },
        {
            "id": 10002,
            "username": "user-2",
            "sex": "女",
            "city": "城市 -2",
            "sign": "签名 -2"
        },
        {
            "id": 10003,
            "username": "user-3",
            "sex": "女",
            "city": "城市 -3",
            "sign": "签名 -3"
        },
        {
            "id": 10004,
            "username": "user-4",
            "sex": "男",
            "city": "城市 -4",
            "sign": "签名 -4"
        }

    ]
}
三种初始化渲染形式

机制

实用场景

办法渲染

用 JS 办法的配置实现渲染

（举荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。

主动渲染

HTML 配置，主动渲染

无需写过多 JS，可专一于 HTML 表头局部

转换动态表格

转化一段已有的表格元素

无需配置数据接口，在 JS 中指定表格元素，并简略地给表头加上自定义属性即可

办法渲染

  1. 将根底参数的设定放在了 JS 代码中，且原始的 table 标签只须要一个_选择器_

    <table id="demo"></table>

  2. 渲染表格

    layui.use('table', function(){
     var table = layui.table;

     // 执行渲染
     table.render({
        elem: '#demo' // 指定原始表格元素选择器（举荐 id 选择器）,url: 'user.json' // 数据接口
        ,height: 315 // 容器高度
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
        ]]
     });      
});

    注：table.render()办法返回一个对象：var tableIns = table.render(options)，可用于对以后表格进行“重载”等操作。

主动渲染

​ 在一段 table 容器中配置好相应的参数，由 table 模块外部主动对其实现渲染，而无需你写初始的渲染办法。

​ 1) 带有 class=“layui-table” 的

标签。
​ 2) 对标签设置属性 lay-data=”” 用于配置一些根底参数
​ 3) 在

标签中设置属性 lay-data=”” 用于配置表头信息

<table class="layui-table" lay-data="{url:'user.json'}">
  <thead>
    <tr>
      <th lay-data="{field:'id'}">ID</th>
      <th lay-data="{field:'username'}"> 用户名 </th>
      <th lay-data="{field:'sex', sort: true}"> 性别 </th>
    </tr>
  </thead>
</table>
转换动态表格

​ 页面曾经存在了一段有内容的表格，由原始的 table 标签组成，只须要赋予它一些动静元素。

<table lay-filter="demo">
    <thead>
        <tr>
            <th lay-data="{field:'username', width:100}"> 昵称 </th>
            <th lay-data="{field:'experience', width:80, sort:true}"> 积分 </th>
            <th lay-data="{field:'sign'}"> 签名 </th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td> 贤心 1 </td>
            <td>66</td>
            <td> 人生就像是一场修行 a </td>
        </tr>
    </tbody>
</table>

执行用于转换表格的 JS 办法

layui.use('table', function(){
    var table = layui.table;

    // 转换动态表格
    table.init('demo', {
        height: 315 // 设置高度
        // 反对所有根底参数
    }); 

});
根底参数应用的场景
// 场景一：下述办法中的键值即为根底参数项
table.render({
  height: 300
  ,url: 'user.json'
});
       
// 场景二：下述 lay-data 外面的内容即为根底参数项，切记：值要用单引号
<table lay-data="{height:300, url:'user.json'}" lay-filter="demo"> …… </table>
 
// 更多场景：下述 options 即为含有根底参数项的对象
> table.init('filter', options); // 转化动态表格
> var tableObj = table.render({});
  tableObj.reload(options); // 重载表格
开启分页
<!-- HTML 代码 -->
<table id="demo"></table> 
// JS 实现代码 
layui.use('table', function(){
    var table = layui.table;

    // 执行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素选择器（举荐 id 选择器）,url: 'user.json' // 数据接口
        ,height: 315 // 容器高度
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
        ]]
    });      
});
开启头部工具栏
<table id="demo" lay-filter="demo"></table>

<!-- 表格工具栏 -->
<script type="text/html" id="toolbarDemo"> <div class="layui-btn-container">
        <!-- lay-event 给元素绑定事件名 -->
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
            获取选中行数据
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
            获取选中数目
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">
            验证是否全选
        </button>
    </div> </script>

<!-- 表头工具栏 -->
<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit"> 编辑 </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> 删除 </a> </script> 
layui.use('table', function(){
    var table = layui.table;

    // 执行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素选择器（举荐 id 选择器）,url: 'user.json' // 数据接口
        ,height: 315 // 容器高度
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
            ,{title:'操作', toolbar: '#barDemo'} // 绑定表头工具栏
        ]]
        ,toolbar: '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板
    });     
    
    /**
      * 头工具栏事件
      *    语法：table.on('toolbar(demo)', function(obj){});
            注：demo 示意选择器元素上设置的 lay-filter 属性值
      */
    table.on('toolbar(demo)', function(obj){
        // obj.config.id 以后选择器的 id 属性值，即 demo
        // 获取以后表格被选中的记录对象，返回数组
        var checkStatus = table.checkStatus(obj.config.id);
        // obj.event 失去以后点击元素的事件名
        switch(obj.event){ 
            case 'getCheckData':
                // 获取被选中的记录的数组
                var data = checkStatus.data;
                // 将数组数据解析成字符串
                layer.alert(JSON.stringify(data));
                break;
            case 'getCheckLength':
                var data = checkStatus.data;
                layer.msg('选中了：'+ data.length + '个');
                break;
            case 'isAll':
                // checkStatus.isAll 判断记录是否被全选
                layer.msg(checkStatus.isAll ? '全选': '未全选');
                break;
                // 自定义头工具栏右侧图标 - 提醒
            case 'LAYTABLE_TIPS':
                layer.alert('这是工具栏右侧自定义的一个图标按钮');
                break;
        };
    });
    
    /**
      * 监听行工具事件
      */
    table.on('tool(demo)', function(obj){
        // 失去以后操作的 tr 的相干信息
        var data = obj.data;
        if(obj.event === 'del'){
            // 确认框
            layer.confirm('真的删除行么', function(index){
                // 删除指定 tr
                obj.del();
                // index 以后弹出层的下标，通过下标敞开弹出层
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            // 输入框
            layer.prompt({
                // 表单元素的类型 0= 文本框 1= 明码框 2= 文本域 
                formType: 0
                ,value: data.username 
            }, function(value, index){
                // 批改指定单元格的值
                // value 示意输出的值
                obj.update({username: value});
                // 敞开弹出层
                layer.close(index);
            });
        }
    });
  
});
开启单元格编辑
<table class="layui-table" lay-data="{url:'user.json', id:'demo'}" lay-filter="demo">
    <thead>
        <tr>
            <th lay-data="{type:'checkbox'}">ID</th>
            <th lay-data="{field:'id',  sort: true}">ID</th>
            <th lay-data="{field:'username', sort: true, edit:'text'}"> 用户名 </th>
            <th lay-data="{field:'sex', edit:'text'}"> 性别 </th>
            <th lay-data="{field:'city', edit:'text'}"> 城市 </th>
            <th lay-data="{field:'experience', sort: true, edit:'text'}"> 积分 </th>
        </tr>
    </thead>
</table> 
layui.use('table', function(){
    var table = layui.table;

    // 监听单元格编辑
    table.on('edit(demo)', function(obj){
        var value = obj.value // 失去批改后的值
        ,data = obj.data // 失去所在行所有键值
        ,field = obj.field; // 失去字段
        layer.msg('[ID:'+ data.id +']' + field + '字段更改为：'+ value);
    });

});
数据表格的重载
<div class="demoTable">
    搜寻 ID：<div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" id="searchBtn"> 搜寻 </button>
</div>

<table class="layui-hide" id="demo" lay-filter="demo"></table> 
layui.use('table', function(){
    var table = layui.table;
    var $ = layui.jquery; // 获取 jquery 对象

    // 执行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素选择器（举荐 id 选择器）,url: 'user.json' // 数据接口
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {type: 'checkbox', fixed: 'left'} // 设置复选框
            ,{field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
        ]]
    });     

    // 给指定元素绑定事件
    $(document).on('click', '#searchBtn', function(data) {
        // 获取搜寻框对象
        var demoReload = $('#demoReload');
        table.reload('demo', {
            where: { // 设定异步数据接口的额定参数，任意设
                id: demoReload.val()}
            ,page: {
                // 让条件查问从第一页开始查问，不写则从当前页开始查问，此页之前的数据将不纳入条件筛选
                curr: 1 // 从新从第 1 页开始
            }
        }); // 只重载数据
    });
});

正文完
html5
发表至： html5
2021-01-20
 0
关于html5:vue前端实现配置化表格eltable列的隐藏与展示具有记忆功能
关于html5:移动端兼容持续补充
关于html5:前端面试每日-31-第670天
关于javascript:前端内练基础什么是BFC