Layui学习总结

编程语言 2023-04-08 12:44:43 阅读次数: 0

Layui学习总计快速入门

- Layui的下载和安装

下载地址：点我下载layui文件
在这里插入图片描述

快速上手：获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

没错，不用去管其它任何文件。因为他们（比如各模块）都是在最终使用的时候才会自动加载。这是一个基本的入门页面：

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

layui 的模块的使用

<script>
layui.use(['mod1', 'mod2'], function(args){
      
      
  var mod = layui.mod1;
</script>
});

- Layui提供的页面元素

layui提供了15中页面元素，其中包括了：布局、颜色、图标、动画、按钮、表单、导航、
菜单、选项卡、进度条、面板、表格、徽章、时间线、辅助等模块

栅格系统与后台布局

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

栅格布局规则：
1.采用 layui-row 来定义行，如：<div class="layui-row"></div>
2.采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。
3.列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
4.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
5. 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

实例：

<div class="layui-container">  
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9">
      你的内容 9/12
    </div>
    <div class="layui-col-md3">
      你的内容 3/12
    </div>
  </div>

栅格布局还包括了，间距、偏移、嵌套等多种使用方法
具体规则可查看：http://www.uimaker.com/layui/doc/element/layout.html

按钮 - 页面元素

用法：

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

按钮组块还提供了多种主题供用户选择
在这里插入图片描述

名称 组合
原始 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”

layui的按钮组件还可以配合图标进行使用
在这里插入图片描述

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

按钮组件对大小尺寸、样式、圆角、按钮组等都提供了方法：点此处查看按钮组件

表单

在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。
依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

实例

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <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">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <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>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </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>
 
<script>
//Demo
layui.use('form', function(){
      
      
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
      
      
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

表单对单选、复选、输入框都提供了统一的样式，遵循layui模块规范可以直接引用

  • 输入框
    <input type="text" name="title" required lay-verify="required" 	placeholder="请输入标题" autocomplete="off" class="layui-input">
  • 下拉选择框
    <select name="city" lay-verify="">
      <option value="">请选择一个城市</option>
      <option value="010">北京</option>
      <option value="021">上海</option>
      <option value="0571">杭州</option>
    </select>

在这里插入图片描述 selected 来设定默认选中项

<select name="city" lay-verify="">
  <option value="010">北京</option>
  <option value="021" disabled>上海（禁用效果）</option>
  <option value="0571" selected>杭州</option>
</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

  • 单选框
    <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 任意字符 设定元素名称，一般用于checkbox、radio框
lay-skin switch（开关风格） primary（原始风格） 定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式
lay-ignore 任意字符或不设值 是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格
lay-filter 任意字符 事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。
lay-verify required（必填项）phone（手机号）email（邮箱）url（网址）number（数字）date（日期）identity（身份证） 自定义值 同时支持多条规则的验证，格式：lay-verify="验证A
如：lay-verify="required phone number"另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify=“pass”，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证
lay-verType tips（吸附层）alert（对话框）msg（默认） 用于定义异常提示层模式。
lay-reqText 任意字符 用于自定义必填项（即设定了 lay-verify=“required” 的表单）的提示文本注意：该功能为 layui 2.5.0 新增
lay-submit 无需填写值 绑定触发提交的元素，如button
  • 监听事件

语法：

form.on(‘event(过滤器值)’, callback);

form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下：

event 描述
select 触发select下拉选择事件
checkbox 触发checkbox复选框勾选事件
switch 触发radio单选框事件
radio 触发select下拉选择事件
submit 触发表单提交事件

-默认情况下，事件所触发的是全部的form模块元素，但如果你只想触发某一个元素，使用事件过滤器即可。
如：

    form.on('select(test)', function(data){
      console.log(data);
    });

- Layui提供的内置模块

弹出层

layer 至今仍作为 layui 的代表作，它的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer 已然成为网页弹出层的首选交互方案，几乎随处可见。

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

在这里插入图片描述

layer可以作为单独的组件使用

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

在 layui 中使用 layer

<script>
layui.use('layer', function(){
      
      
  var layer = layui.layer;
  
  layer.msg('hello');
});     
</script>

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

type - 基本层类型

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

title - 标题

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

content - 内容

类型：String/DOM/Array，默认：’’
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/layui.css" type="text/css" />
	</head>
	<body>
		<div style="display: none;" id="div1">
			<form class="layui-form" action="">
			 <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">
			    <label class="layui-form-label">密码框</label>
			    <div class="layui-input-inline">
			      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
			    </div>
			    <div class="layui-form-mid layui-word-aux">辅助文字</div>
			  </div>
			</form>
		</div>
		<button class="layui-btn" onclick="xxbtn()">消息按钮</button>
		<button class="layui-btn" onclick="ymcbtn()">页面层</button>
		<button class="layui-btn" onclick="ckc()">iframe层</button>
		<button class="layui-btn" onclick="jzbtn()">加载层</button>
		<button class="layui-btn" onclick="tsbtn()">tips层</button>
		<div id="ts" style="width: 100px;height: 30px;color: #000000;border: 1px saddlebrown solid;"></div>
		<script src="../js/jquery-3.6.0.js"></script>
		<script src="../layer/layer.js"></script>
		<script src="../js/layui.js"></script>
		<script>
		//消息提示
			layer.msg("我是弹窗");
			
			function xxbtn(){
      
      
				layer.open({
      
      
					type:0,
					title:"消息框",
					content:"内容区域"
				})
			}
			
			
			function ymcbtn(){
      
      
				layer.open({
      
      
					type:1,
					title:"加载页面",
					content:$("#div1")
				})
			}
			
			function ckc(){
      
      
				layer.open({
      
      
					type:2,
					title:"iframe",
					content:"http://www.uimaker.com/layui/doc/modules/layer.html"
				})
			}
			
			function jzbtn(){
      
      
				layer.open({
      
      
					type:3,
					title:"加载层",
				})
				}
				
			function tsbtn(){
      
      
				alert("!11");
				layer.open({
      
      
					type:4,
					content:['我是提示层','#ts']
				})
			}
			
			
		</script>
	</body>
</html>
  • skin - 样式类名 类型：String，默认：’’
  • area - 宽高 类型：String/Array，默认：‘auto’ 在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]
  • offset - 坐标 类型：String/Array，默认：垂直水平居中
  • icon - 图标。信息框和加载层的私有参数 类型：Number，默认：-1（信息框）/0（加载层）
<script>
//eg1
layer.alert('酷毙了', {
      
      icon: 1});
//eg2
layer.msg('不开心。。', {
      
      icon: 5});
//eg3
layer.load(1); //风格1的加载
</script>
  • btn - 按钮 类型：String/Array，默认：‘确认’
  • btnAlign - 按钮排列 类型：String，默认：r
  • closeBtn - 关闭按钮 类型：String/Boolean，默认：1
  • shade - 遮罩 类型：Boolean，默认：false
  • time - 自动关闭所需毫秒 类型：Number，默认：0
  • id - 用于控制弹层唯一标识 类型：String，默认：空字符
  • anim - 弹出动画 类型：Number，默认：0
  • isOutAnim - 关闭动画 （layer 3.0.3新增） 类型：Boolean，默认：true
  • maxmin - 最大最小化。 类型：Boolean，默认：false
  • fixed - 固定 类型：Boolean，默认：true
  • resize - 是否允许拉伸 类型：Boolean，默认：true

完整操作手册：http://www.uimaker.com/layui/doc/modules/layer.html

表格

快速使用

创建一个table实例最简单的方式是，在页面放置一个元素

，然后通过
table.render() 方法指定该容器，如下所示 

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>table模块快速使用</title>
      <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    </head>
    <body>
     
    <table id="demo" lay-filter="test"></table>
     
    <script src="/layui/layui.js"></script>
    <script>
    layui.use('table', function(){
      
      
      var table = layui.table;
      
      //第一个实例
      table.render({
      
      
        elem: '#demo'
        ,height: 312
        ,url: '../json/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>

基础参数一览表

    场景一：下述方法中的键值即为基础参数项
    table.render({
      height: 300
      ,url: '/api/data'
    });
           
    场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
    <table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>
     
    更多场景：下述 options 即为含有基础参数项的对象
    > table.init('filter', options); //转化静态表格
    > var tableObj = table.render({});
      tableObj.reload(options); //重载表格

下面是目前 table 模块所支持的全部参数一览表，我们对重点参数进行了的详细说明，你可以点击下述表格最右侧的“示例”去查看

在这里插入图片描述
图片转载：http://www.uimaker.com/layui/doc/modules/table.html

树形组件

快速使用
通过 tree.render() 方法指定一个元素，便可快速创建一个 tree 实例。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>树组件</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
  <div id="test1"></div>
  <script src="../src/layui.js"></script>
  <script>
  layui.use('tree', function(){
      
      
    var tree = layui.tree;
   
    //渲染
    var inst1 = tree.render({
      
      
      elem: '#test1'  //绑定元素
      ,data: [{
      
      
        title: '江西' //一级菜单
        ,children: [{
      
      
          title: '南昌' //二级菜单
          ,children: [{
      
      
            title: '高新区' //三级菜单
            //…… //以此类推，可无限层级
          }]
        }]
      },{
      
      
        title: '陕西' //一级菜单
        ,children: [{
      
      
          title: '西安' //二级菜单
        }]
      }]
    });
  });
  </script>
</body>
</html>

基础参数：
在这里插入图片描述
其他组件详情可以查看layui教程：layui教程链接
*文章借鉴layui文档 *

猜你喜欢

转载自blog.csdn.net/qq_45809464/article/details/123169934
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022