Layui常用功能整理

大忽悠爱学习

发布于 2021-11-15 15:18:03

4.5K0

发布于 2021-11-15 15:18:03

文章被收录于专栏：c++与qt学习c++与qt学习

Layui常用功能整理

官网链接

Layui官网

这里只对功能做简单记录，具体使用见官方文档

布局容器

固定宽度（两侧有留白效果）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" type="text/css" href="js/layui.css">
	</head>
	<body>
		 <!-- 固定宽度(两侧有留白效果)  -->
		<div class="layui-container" style="background-color: #00F7DE; ">
			大忽悠
		</div>
	</body>
</html>

完整宽度(占据屏幕宽度100%)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" type="text/css" href="js/layui.css">
	</head>
	<body>
		<div class="layui-fluid" style="background-color: #00F7DE; height: 60px;">
			大忽悠
		</div>
	</body>
</html>

栅格系统

栅格系统

1.定义行 .layui-row

2 . 定义列  .layui-col-md*

md表示不同屏幕的标识(xs,sm,md,lg)

*表示列的数量

3.每一行被均分为12列，列的总数不能超过12列，否则会自动换行

4.响应式规则

栅格会自动根据屏幕的分辨率选择对应的样式效果

使用案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	</head>
	<body>
<div class="layui-container">  
  <div class="layui-row">
    <div class="layui-col-md9" style="background-color: #00F7DE;">
      你的内容 9/12
    </div>
    <div class="layui-col-md3" style="background-color: red;">
      你的内容 3/12
    </div>
	<div class="layui-col-md3" style="background-color: red;">
	  你的内容 3/12
	</div>
  </div>
</div>
	</body>
</html>

超过一行的内容会分配到下一行

响应式规则

设置在不同屏幕上的表现形式
class="layui-col-xs6 layui-col-sm6 layui-col-md4"

<div class="layui-container">     
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
      移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
      移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
  </div>
</div>

列边距—设置范围 1 ~ 30 px

layui-col-space*
*代表的是px值，默认范围是1-30

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	</head>
	<body>
<div class="layui-container">  
<h1>列边距</h1>
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md9">
      <div style="background-color: red;">你的内容 9/12</div>
    </div>
    <div class="layui-col-md3">
       <div style="background-color: red;">你的内容 3/12</div>
    </div>
  </div>
</div>
	</body>
</html>

列偏移—范围超过30px，建议使用列偏移

将列向右移动指定列数
layui-col-md-offset* 
*代表向右移动指定列数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	</head>
	<body>
<div class="layui-container">  
<h1>列边距</h1>
  <div class="layui-row">
    <div class="layui-col-md3">
      <div style="background-color: red;">你的内容 3/12</div>
    </div>
	<!-- 向右移动4列 -->
    <div class="layui-col-md3  layui-col-md-offset4">
       <div style="background-color: red;">你的内容 3/12</div>
    </div>
  </div>
</div>
	</body>
</html>

列嵌套—列之间可以无限嵌套列

<div class="layui-container">  
<!-- 列边距为5px -->
     <div class="layui-row layui-col-space5">
       <div class="layui-col-md5" style="background-color: black;">
		   <!-- 列嵌套 ，对当前只占有5列的列再分12份-->
         <div class="layui-row grid-demo">
           <div class="layui-col-md3" style="background-color: #00F7DE;">
             内部列
           </div>
           <div class="layui-col-md6" style="background-color: #1E9FFF;">
             内部列
           </div>
         </div>
       </div>
</div>

按钮

这部分内容比较简单，具体设置可以参考官方文档，这里只会列举较难理解的几种操作

以官方文档为主

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

基本用法

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

流体按钮(最大化铺满当前容器或者页面)

<div class="layui-container">  
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应固定宽度的容器）</button>
</div>
<div class="layui-fluid">  
<button type="button" class="layui-btn layui-btn-fluid layui-btn-normal">流体按钮（最大化适应完整宽度的容器）</button>
</div>
<button type="button" class="layui-btn layui-btn-fluid layui-btn-warm">流体按钮（最大化适应完整当前页面）</button><button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

图标按钮

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon layui-icon-heart" style="font-size: 30px; color: #FFB800;"></i> 关注 
</button>

图标目前设置有两种方式

图标大全

<i class="layui-icon layui-icon-face-smile"></i>  
或者
<i class="layui-icon">&#xe60c;</i>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	</head>
	<body> 

<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>
 
 <!-- 引入 layui.js -->
 <script src="//unpkg.com/layui@2.6.8/dist/layui.js">
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
});
</script>
	</body>
</html>

垂直和侧边导航

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

垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side

垂直导航演示:

<ul class="layui-nav layui-nav-tree" 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>

显然没有占满整个屏幕，过于丑陋，因此一般会再追加一个属性,设置为侧边导航

侧边导航演示:

<ul class="layui-nav layui-nav-tree layui-nav-side" 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>

图片和徽章支持

<ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item">
    <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退了</a></dd>
    </dl>
  </li>
</ul>

img中的这个属性可以设置当前图片为导航里面的圆形图片样式，如上

class="layui-nav-img"

具体徽章的相关设置参考官方文档: 徽章设置

layui 2.6.6 新增导航可选属性/类

面包屑导航

<span class="layui-breadcrumb">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
<hr/>
      <!-- 设置属性 lay-separator="-" 来自定义分隔符-->
 <span class="layui-breadcrumb" lay-separator="|">
   <a href="">娱乐</a>
   <a href="">八卦</a>
   <a href="">体育</a>
   <a href="">搞笑</a>
   <a href="">视频</a>
   <a href="">游戏</a>
   <a href="">综艺</a>
 </span>

选项卡

依赖加载组件：element

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li>网站设置</li>
    <li>用户管理</li>
    <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 class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>

有几个li，就有几个div,每个li和div按照顺序一一对应

layui-this :设置当前被选中的选项卡

layui-show ：设置一开始默认显示哪一个选项卡，一般是一开始默认选中的那个选项卡

选项卡风格设置

通过在外层div的class属性中追加不同的属性得到不同的风格

简介风格

通过追加class：layui-tab-brief 来设定简洁风格。值得注意的是，如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作。详见文档左侧【内置组件 - 基本元素操作 element】

<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li>网站设置</li>
    <li>用户管理</li>
    <li class="layui-this">权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item">内容1</div>
    <div class="layui-tab-item layui-show">内容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>

卡片风格

<div class="layui-tab layui-card">
...内容同上
</div>

响应式—所有Tab风格都支持响应式，不需要手动设置

当容器的宽度不足以显示全部的选项时，即会自动出现展开图标，如下以卡片风格为例（注意：所有Tab风格都支持响应式）：

带删除的选项卡

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

<div class="layui-tab" lay-allowClose="true">
...内容同上
</div>

静态表格—内容写死

  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>

具体参考官方文档

<table lay-even lay-skin="line" lay-size="lg">
…
</table>

表单

依赖加载模块：form

表单

常用属性

required --->浏览器固定的必填字段

lay-verify --->需要验证的类型(required表示必填项)

class="layui-input"--->提供通用css的样式

class="layui-input-block" --->占据全部宽度

class="layui-input-inline" --->占据部分宽度

文本框

placeholder--->当文本框为空时，默认显示的文本信息

autocomplete--->表单元素是否自动填充(当浏览器缓存中存在相同name属性值时，会进行填充操作)

使用演示:

	<!-- class="layui-form": 标识一个表单元素块 -->
<form class="layui-form" action="">
  <!-- 基本的行区块结构，它提供了响应式的支持。
  但如果你不大喜欢，你可以换成你的结构，
  但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。 -->
  
  <!-- class="layui-form-item":标识是当前表单的一部分 -->
   <div class="layui-form-item">
      <label class="layui-form-label">输入框</label>
      <div class="layui-input-inline">
        <input type="text" name="title" required  
		lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
	<!-- 按钮 -->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

下拉框

上述option的第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项（存在value值）作为默认选中项。你可以在option的空值项中自定义文本，如：请选择分类。

	<!-- class="layui-form": 标识一个表单元素块 -->
<form class="layui-form" action="">

 <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-inline">
      <select name="city" lay-verify="required">
		  <!--  -->
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>

	<!-- 按钮 -->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

设置选中和禁用效果

selected 来设定默认选中项

<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>

属性selected可设定默认项 属性disabled开启禁用，select和option标签都支持

复选框

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title） 属性checked可设定默认选中 属性lay-skin可设置复选框的风格 设置value="1"可自定义值，否则选中时返回的就是默认的on，即返回的请求参数的值

<!-- 默认风格： -->
<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>

开关

其实就是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 checked属性设置默认选中项

文本域

class=“layui-textarea”：layui.css提供的通用CSS类

<textarea name="" required lay-verify="required" 
<!-- class="layui-textarea":让文本域具有layui设计好的样式 -->
placeholder="请输入" class="layui-textarea"></textarea>

组装行内表单

class=“layui-inline”：定义外层行内 class=“layui-input-inline”：定义内层行内

<div class="layui-form-item">
			
			<!-- class="layui-inline" ：当前div变为行内元素，
			多个相邻的行内元素会排列在同一行里  -->
		  <div class="layui-inline">
			  
		    <label class="layui-form-label">范围</label>
			<!-- 定义当前div是内层行内 -->
		    <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变成了一个行内元素 -->
		  <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>

忽略美化渲染

你可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格，比如：

	<select lay-ignore>
		  <option>大忽悠</option>
		  <option>小朋友</option>
		</select>

表单方框风格

通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变。我们的Fly社区用的就是这个风格。

	<form class="layui-form layui-form-pane" action="">
	  <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>

默认效果:

弹出层

两种使用方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	</head>
	<body> 
	
	<!-- 引入 layui.js -->
	<script src="//unpkg.com/layui@2.6.8/dist/layui.js">
     <script>
     layui.use(['layer'], function(){
       var la = layui.layer;      
       la.msg('大忽悠');
     });
	</body>
</html>

基础参数msg

我们提到的基础参数主要指调用方法时用到的配置项，如：layer.open({content: ‘’})layer.msg(’’, {time: 3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。注意，从2.3开始，无需通过layer.config来加载拓展模块

<!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="./css/layui.css">
</head>
<body>
 
<!-- 你的 HTML 代码 -->
 
<script src="./js/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World',{
	  time : 3000   //设置消失的时间
  });
});
</script> 
</body>
</html>

基本的弹出层类型

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

弹出层的标题

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

title支持三种类型的值，若你传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false

弹出层的内容

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

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同

信息框—0–默认值

layer.open({
  type: 0,
  //设置标题的同时，设置标题字体的颜色
   title: ["大忽悠","color:red"]
  //不显示标题
  // title: false
  ,content: '小朋友'
});

页面层–1

  layer.open({
  type: 1, 
  title: "大忽悠",
  content: "<div style='height:200px;width:400px'>小朋友</div>" //这里content是一个普通的String
});

iframe层–2

layer.open({
  type: 2, 
  content: 'https://blog.csdn.net/m0_53157173' ,
  //这里content是一个URL，如果你不想让iframe出现滚动条，
  //你还可以content: ['http://sentsin.com', 'no']
  area: ['500px', '300px']
});

tips层—4

layer.open({
  type: 4,
  content: ['点击我', '#id'] ,//数组第二项即吸附元素选择器或者DOM
  time: 3000//设置自动消失的时间为3秒
});

配合ajax使用

//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});

设置弹出层的宽和高

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

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]

弹出层图标设置

信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。如：

layer.alert('酷毙了', {icon: 1});

layer.msg('不开心。。', {icon: 5});

layer.load(1); //风格1的加载 还可以选风格0

弹出层按钮的设置

信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: ‘我知道了’，当你要定义两个按钮时，你可以btn: [‘yes’, ‘no’]。当然，你也可以定义更多按钮，比如：btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …]，按钮1的回调函数是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推

layer.confirm('纳尼？', {
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

写法2：

layer.open({
  content: 'test'
  ,btn: ['按钮一', '按钮二', '按钮三']
  ,yes: function(index, layero){
    //按钮【按钮一】的回调
  }
  ,btn2: function(index, layero){
    //按钮【按钮二】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,cancel: function(){ 
    //右上角关闭回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

设置弹出层出现的坐标位置–默认居中显示

所有弹出层的函数调用都会返回一个index，当前DOM层的索引，我们可以利用该索引，在恰当的时机，手动关闭他

//当你想关闭当前页的某个层时
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的，每一种弹层调用方式，都会返回一个index
layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可
 
//如果你想关闭最新弹出的层，直接获取layer.index即可
layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
 
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭 
 
//关闭后的回调（layui 2.6.5、layer 3.4.0 新增）
layer.close(index, function(){
  //do something
});

输入层—支持在弹出层中输入内容，并可以获取到

prompt的参数也是向前补齐的。options不仅可支持传入基础参数，还可以传入prompt专用的属性。当然，也可以不传。yes携带value 表单值index 索引elem 表单元素

//prompt层新定制的成员如下
{
  formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
  value: '', //初始时的值，默认空字符
  maxlength: 140, //可输入文本的最大长度，默认500
}
 
//例子1
layer.prompt(function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});
 
//例子2
layer.prompt({
  formType: 2,
  value: '初始值',
  title: '请输入值',
  area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});

tab层—类似于弹出一个选项卡的效果

layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '内容1'
  }, {
    title: 'TAB2', 
    content: '内容2'
  }, {
    title: 'TAB3', 
    content: '内容3'
  }]
});

相册层

相册层，也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式

如果是json传入

$.getJSON('/jquery/layer/test/photos.json', function(json){
  layer.photos({
    photos: json
    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
  });
}); 
//而返回的json需严格按照如下格式：
{
  "title": "", //相册标题
  "id": 123, //相册id
  "start": 0, //初始显示的图片序号，默认0
  "data": [   //相册包含的图片，数组格式
    {
      "alt": "图片名",
      "pid": 666, //图片id
      "src": "", //原图地址
      "thumb": "" //缩略图地址
    }
  ]
}

如果是直接从页面中获取图片，那么需要指向图片的父容器，并且你的img可以设定一些规定的属性（但不是必须的）

//HTML示例
<div id="layer-photos-demo" class="layer-photos-demo">
  <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
  <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
</div>
 
<script>
//调用示例
layer.photos({
  photos: '#layer-photos-demo'
  ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
}); 
</script>

photos还有个tab回调，切换图片时触发。

layer.photos({
  photos: json/选择器,
  tab: function(pic, layero){
    console.log(pic) //当前图片的一些信息
  }
});

日前和时间选择

<!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="./css/layui.css">
</head>
<body>
	
<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  <input type="text" class="layui-input" id="test1">
</div>
 
<script src="./js/layui.js"></script>
<script>
layui.use(['laydate'], function(){
  var laydate = layui.laydate;

    //执行一个laydate实例
     laydate.render({
       elem: '#test1' //指定元素
     });
});
</script> 
</body>
</html>

核心方法和基础参数设置

通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数.

elem - 绑定元素

必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

laydate.render({ 
  elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});

type - 控件选择类型

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

//年选择器
laydate.render({ 
  elem: '#test'
  ,type: 'year'
});

format - 自定义格式

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

具体参考官方文档

分页

laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染

<!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="./css/layui.css">
</head>
<body>
	
<div id="test1"></div>

<script src="./js/layui.js"></script>
<script> 

layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  //执行一个laypage实例
  laypage.render({
    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
    ,count: 50 //数据总数，从服务端得到，默认每一页显示10条记录
  });
});

</script> 
 
</body>
</html>

基础参数选项

通过核心方法：laypage.render(options) 来设置基础参数

参数过多，这里建议看官方文档

  //执行一个laypage实例
  laypage.render({
    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
    ,count: 50 ,//数据总数，从服务端得到
	limit: 5,//每一页显示5条记录
	//limits要生效，需要设置layout属性
	limits:[5,10],//出现下拉框，可以设置上面limit的值
	//自定义排版: 可以设置当前分页会显示那些内容，例如上面limits的下拉框选项
	//默认只显示这三个选项: ['prev', 'page', 'next']
	layout:['prev', 'page', 'next','limit','count','refresh','skip'],
	groups: 3 //连续显示的页码数
  });
});

切换分页的回调

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

laypage.render({
  elem: 'test1'
  ,count: 70 //数据总数，从服务端得到
  ,jump: function(obj, first){
    //obj包含了当前分页的所有参数，比如：
    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    console.log(obj.limit); //得到每页显示的条数
    
    //首次不执行
    if(!first){
      //do something
    }
  }
});

数据表格— 只列举常用的部分功能

快速入门

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

 <table id="demo" lay-filter="test"></table>
          
<script src="js/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: 'js/user.json' //数据接口
    ,page: true //开启分页
    ,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}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
  
});
</script>

</body>
</html>

存放数据json文件:

效果：

方法渲染—用JS方法的配置完成渲染

var table = layui.table;
 
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
  //,…… //更多参数参考右侧目录：基本参数选项
});

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

自动渲染

带有 class=“layui-table” 的 < table > 标签。
对标签设置属性 lay-data="" 用于配置一些基础参数
在标签中设置属性lay-data=""用于配置表头信息

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth', sort: true}">财富</th>
    </tr>
  </thead>
</table>

按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-08-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除

官方文档

容器

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

官方文档

容器