首页 > 网络编程 > JavaScript > javascript技巧 > layui使用

layui框架教程

2022-09-29 11:06:46 作者：Steam残酷

layui是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，常适合网页界面的快速开发，这篇文章主要介绍了layui框架教程,需要的朋友可以参考下

LayUI

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，常适合网页界面的快速开发。layui 区别于那些基于MVVM 底层的前端框架，它更多是面向后端开发者，无需涉足前端各种工具，只需面对浏览器本身，让一切所需要的元素与交互。

LayUI的特点

1：layui属于轻量级框架，简单美观，适用于后端开发模式，它在服务端页面上有非常好的效果

2：layuu是提供给后端开发人员的ui框架，基于DOM驱动

LayUI

基本使用

1.下载layui

官网：https://layuion.com/

2.安装、引入依赖

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<script src="layui/layui.js" type="application/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<script>
		layui.use(['layer', 'form'], function(){
		  var layer = layui.layer
		  ,form = layui.form;
		  
		  layer.msg('Hello World');
		});
		</script> 
	</body>
</html>

需要声明使用的模块和回调函数，参照官方文档，选择自己想要的效果即可。

比如：

<script>
		layui.use(['element'], function(){
			var element = layui.element;
            //...
		});
	</script>

页面元素

布局

1.固定宽度--两边有空白常用

<div class="layui-container" style="background-color:navajowhite ;height: 300px;">
			固定宽度
		</div>

2.完整宽度--占据宽度的100%

<div class="layui-fluid" style="background-color:navajowhite ;height: 300px;">
			完整宽度
		</div>

栅格系统

采用layui-row来定义行

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

采用layui-col-md*这样的预设类来定义一组列（column）且放在行（row）内，其中
- 变量md代表的是不同屏幕下的标记
- 边浪*代表的是该列所占用的12等分（如6/12）可选值为1-12
- 如果多个列的“等分数值”总和数等于12，刚好满行排布。如果大于12，若雨的列将自动另起一行
列可以同时出现最多四中不同的组合，分别是xs（超小屏幕，如手机），sm（小屏幕，平板），md（桌面中等屏幕），lg（桌面大型屏幕）
可对列追加类似的layui-col-space5，layui-col-md-offerset3这样的预设类来定义列的间距和偏移
可以在类（column）元素中放入你自己的任意元素来填充内容

<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md5" style="background-color: deepskyblue;">
					内容的5/12
				</div>
				<div class="layui-col-md7" style="background-color: bisque;">
					内容的7/12
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md4" style="background-color: powderblue;">
					内容的4/12
				</div>
				<div class="layui-col-md4" style="background-color: mediumaquamarine;">
					内容的4/12
				</div>
			</div>
		</div>

响应式规则

css媒体查询（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
相应行为	始终an设定的比例水平排列	在当前屏幕下水平排列，如果屏幕的大小低于临界值则堆叠排列	在当前屏幕下水平排列，如果屏幕的代销低于临界值则堆叠排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列

<div class="layui-row">
    <div class="layui-col-md5 layui-col-sm6">
        响应式规则
    </div>
</div>

列边距：

通过“列边距”的预设类，来设定之间的间距。且一行中最左的列不会出现左边距，最右边的列不会出现右边距。列边距在保证排版美观的同时，还可以进一步保持分列的宽度精细程度。我们结合网页常用的边距，预设了12中不同的尺寸的边距。

/* 支持列之间为1px-30px的区间的所有双数间距，以及1px，5px，15px，25px的单数间隔 */
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
.....

<div class="layui-row layui-col-space10">
		<div class="layui-col-md4" style="background-color: ghostwhite;"><div style="background-color: white;">4</div></div>
		<div class="layui-col-md4" style="background-color: powderblue;">4</div>
		<div class="layui-col-md4" style="background-color: mediumaquamarine;">4</div>
	</div>

注：

1.layui-col-space，设置后起不到作用因为设置的是padding也就是说向内缩，所以设置背景色padding也是会填上颜色，看起来好像没有间距一样，可以再里面在加一个div，来达到目的。

2.间距一般不高于30px，如果超过30，建议使用列偏移

列偏移

对列最佳类似layui-col-md-offset* 的预设类，从而让列向右偏移。其中*代表的是偏移占据的列数，可选中为1-12

如：layui-col-md-offset3，即和代表在“中型桌面屏幕下，让该列向右偏移3个列表宽度

<div class="layui-row ">
		<div class="layui-col-md4" style="background-color: ghostwhite;"><div style="background-color: white;">4</div></div>
		<div class="layui-col-md4 layui-col-md-offset2" style="background-color: powderblue;">4</div>
	</div>

注：

列偏移可针对不同屏幕的标准进行设定，在当前设定屏幕下最有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。

列嵌套

可以对栅格进行无穷层次的嵌套。在列元素(layui-col-md*)中插入行元素（layui-row），即可完成嵌套。

<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md6">
					<div style="background-color: darkturquoise;">
						<div class="layui-row">
							<div class="layui-col-md5" style="background-color: seashell;">内部5</div>
							<div class="layui-col-md5" style="background-color: mistyrose;">内部5</div>
							<div class="layui-col-md2" style="background-color: aqua;">内部5</div>
						</div>
					</div>
				</div>
			</div>
		</div>

基本元素

按钮

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其他按钮风格。

主题

名称	组合
原始	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-primary layui-border-green"
百搭	class="layui-btn layui-btn-primary layui-border-blue"
暖色	class="layui-btn layui-btn-primary layui-border-orange"
警告	class="layui-btn layui-btn-primary layui-border-red"
深色	class="layui-btn layui-btn-primary layui-border-black"

尺寸：

尺寸	组合
大型	class="layui-btn layui-btn-lg"
默认	class="layui-btn"
小型	class="layui-btn layui-btn-sm"
迷你	class="layui-btn layui-btn-xs"

尺寸	组合
大型百搭	class="layui-btn layui-btn-lg layui-btn-normal"
正常暖色	class="layui-btn layui-btn-warm"
小型警告	class="layui-btn layui-btn-sm layui-btn-danger"
迷你禁用	class="layui-btn layui-btn-xs layui-btn-disabled"

流体自适应

<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

圆角

主题	组合
原始	class="layui-btn layui-btn-radius layui-btn-primary"
默认	class="layui-btn layui-btn-radius"
百搭	class="layui-btn layui-btn-radius layui-btn-normal"
暖色	class="layui-btn layui-btn-radius layui-btn-warm"
警告	class="layui-btn layui-btn-radius layui-btn-danger"
禁用	class="layui-btn layui-btn-radius layui-btn-disabled"

尺寸	组合
大型百搭	class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
小型警告	class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"
迷你禁用	class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"

图标

<button type="button" class="layui-btn">  <i class="layui-icon layui-icon-down layui-font-12"></i> 按钮</button> <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">  <i class="layui-icon layui-icon-left"></i></button>

默认按钮样式大小圆角流动自适应

**i 图标样式 **

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

背景颜色

样式往后加：layui-bg-orange

徽章

直接对应往后加

面包屑

<span class="layui-breadcrumb">  
    <a href="">首页</a>  
    <a href="">国际新闻</a> 
    <a href="">亚太地区</a>  
    <a><cite>正文</cite></a>
</span>

选中
通过设置属性 lay-separator="-" 来自定义分隔符

选项卡

引入资源:

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

class="layui-tab"

<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

简洁风格追加样式：

layui-tab-brief

卡片风格追加样式：

layui-tab-card

带删除

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

表格

<table class="layui-table" lay-even>
	  <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-even	无	用于开启隔行背景，可与其它属性一起使用
lay-skin="属性值"	line （行边框风格） row （列边框风格） nob （无边框风格）	若使用默认风格不设置该属性即可
lay-size="属性值"	sm （小尺寸） lg （大尺寸）	若使用默认尺寸不设置该属性即可

表单

常用属性

equired 浏览器固定的必填字段
lay-verify="required" 需要验证的类型（required 表示为必填字段）
class=“layui-input” 提供的通用样式

文本框：

placeholder 当文本框为空时默认显示的文本信息
autocomplete 表单元素是否自动填充，当浏览器中缓存有相同name值是会自动填充

引入依赖

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

form 模块

1.给定form容器

class=“layui-form”

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

2.基本的行区块结构，它提供了相应是的支持，可以换成其他结构，但必学要在外层容器中定义class=“layui-form”，form模块才能正常工作

<form class="layui-form">
			<div class="layui-form-item">
			    <label class="layui-form-label">标签区域</label>
			    <div class="layui-input-block">
			        <input type="text" name="tite" class="layui-input"/>
			    </div>
			</div>
		</form>

class="layui-input-block" 一整行
class="layui-input-inline" 行内

输入框

<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="required">
  <option value="">请选择一个城市</option>
  <option value="010">北京</option>
  <option value="021">上海</option>
  <option value="0571">杭州</option>
</select>

通过selected=“selected”设置默认选项
disabled属性设置禁用
通过option设置分组
设置lay-search属性开启搜索功能

<select name="quiz">
	 <option value="">请选择</option>
	<optgroup label="城市记忆">
	 <option value="你工作的第一个城市">你工作的第一个城市？</option>
	</optgroup>
	<optgroup label="学生时代">
	 <option value="你的工号">你的工号？</option>
	<option value="你最喜欢的老师">你最喜欢的老师？</option>
	 </optgroup>
</select>

复选框

默认风格：
<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可设置复选框的风格
设置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="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

组装行内表单

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"：定义内层行内

忽略美化渲染

<select lay-ignore>
  <option>…</option>
</select>

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>

弹出层

引入依赖：

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

模块化：

layer

layer 作为 Layui 的代表性组件，比 Layui 要出现的早，作为 Layui 最早的源动力，layer 的使用之广泛甚至一度超过了 Layui 本身。 layer 拥有众多的自定义功能，也是许多开发者的网页弹出层的首选交互方案，在各类场景都能发挥重要作用。

场景	用前准备
1. 作为独立组件使用	如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8 以上的任意版本，并引入layer.js。
2. 作为 layui 组件使用	如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js

到此这篇关于layui框架教程的文章就介绍到这了,更多相关layui使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

layui框架教程

LayUI

LayUI的特点

LayUI

基本使用

页面元素

布局

栅格系统

响应式规则

列边距：

列偏移

列嵌套

基本元素

按钮

主题

中间是空心：

尺寸：

流体自适应

圆角

图标

导航

垂直样式+侧边

背景颜色

徽章

面包屑

选项卡

风格

带删除

表格

风格

表单

输入框

下拉框

复选框

开关

单选框

文本域

组装行内表单

忽略美化渲染

方框效果

弹出层

您可能感兴趣的文章: