Layui

最新推荐文章于 2024-03-30 09:35:49 发布

Blog_ycy

最新推荐文章于 2024-03-30 09:35:49 发布

阅读量447

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/qq_40856961/article/details/111598296

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来就可以用。
虽然是前端框架事实上，layui更多是面向于后端开发者，所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。layui 定义为“经典模块化”，并非是刻意强调“模块”理念本身，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效。

layui的目录结构

├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

layui的表单验证属性
在这里插入图片描述

<div class="layui-form-item">
					<label for="L_email" class="layui-form-label">
						<span class="x-red">*</span>邮箱</label>
					<div class="layui-input-inline">
						<input type="text" id="L_email" name="email" required="" lay-verify="email" autocomplete="off" class="layui-input"></div>
					<div class="layui-form-mid layui-word-aux">
						<span class="x-red">*</span>将会成为您唯一的登入名</div>
				</div>

lay-verify属性的作用是对用户所输入内容的判断, 通过内置的规则去判断是否为邮箱手机号 sfz号等

layui的日期时间组件

利用layui完成一个简单的日期选择框

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div class="layui-inline"> <input type="text" class="layui-input" id="test1"></div>
 <!-- 写一个input标签设置好id -->
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个事件
  laydate.render({
    elem: '#test1' /绑定id
  });
});
</script>
</body>
</html>

layui 兼容绝大部分浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。

目前layui支持按年付费和永久授权

layui官网 http://www.layui.com

未完