Layui上篇-入门
Layui基础篇
- layui学习笔记
-
- 一、概述
-
- 1.1、下载
- 二、学习内容
-
- 2.1、图标
- 2.2、按钮
- 2.3、导航菜单
- 2.4、选项卡
- 2.5、进度条
- 2.6、面板+布局
- 2.7、徽章
- 2.8、轮播
- 2.9、时间和日期选择器
- 2.16、表单元素
layui学习笔记
一、概述
1.1、下载
-
访问layui官网，点击下载并解压zip包
-
进入解压后的layui目录，发现目录结构如下
layui
|- css：样式
|- font：字体
|- images：图片
|- lay：内置模块
|- layui.all.js：引入这个之后，layui.use()将不生效，引用里面有的模块将不再用模块化的写法引入，在js文件中可以直接用layui.table这样用。
|- layui.js：js所有的layui模块的引用都要用layui.use()来使用
二、学习内容
1、创建项目并且引入layui相关资源文件
2、引入layui样式和js
<html>
<head>
<meta charset="UTF-8">
<title>图标title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
head>
<body>
<script src="resources/layui/layui.js">script>
body>
html>
2.1、图标
-
方式一：使用字符实体
<div class="layui-icon">div>  -
方式二：使用样式
<div class="layui-icon layui-icon-note">div>
2.2、按钮
-
使用方法：任何标签都可以加上按纽样式，只要加上class="layui-btn"属性值即可
<button type="button" type="button" class="layui-btn layui-btn-primary">原始按钮button> <button type="button" type="button" class="layui-btn">默认按钮button> <button type="button" type="button" class="layui-btn layui-btn-normal">百搭按钮button> <button type="button" type="button" class="layui-btn layui-btn-warm">暖色按钮button> <button type="button" type="button" class="layui-btn layui-btn-danger">警告按钮button> <button type="button" type="button" class="layui-btn layui-btn-disabled">禁用按钮button> <a class="layui-btn">AAAAa> -
按钮相关样式：
1）必要样式：layui-btn
2）主题样式：
layui-btn-primary：原始按钮
layui-btn-normal：百搭按钮
layui-btn-warm：暖色按钮
layui-btn-danger：警告按钮
layui-btn-disabled：禁用按钮
-
按钮尺寸
layui-btn-lg：大型按钮
layui-btn-sm：小型按钮
layui-btn-xs：微型按钮
-
按钮内容嵌套图标
<button type="button" type="button" class="layui-btn layui-icon layui-icon-username">默认按钮button> <button type="button" type="button" class="layui-btn layui-btn-normal"> <span class="layui-icon layui-icon-cellphone">span>手机 button> <button type="button" type="button" class="layui-btn layui-btn-normal"> <span class="layui-icon">span>设置 button> -
圆角按钮
<button type="button" type="button" class="layui-btn layui-btn-normal layui-btn-radius"> <span class="layui-icon">span>设置 button> -
按钮组
<div class="layui-btn-group"> <button type="button" type="button" class="layui-btn layui-btn-primary">原始按钮button> <button type="button" type="button" class="layui-btn">默认按钮button> <button type="button" type="button" class="layui-btn layui-btn-normal">百搭按钮button> <button type="button" type="button" class="layui-btn layui-btn-warm">暖色按钮button> div> -
按钮监听
<div class="layui-btn-group"> <button type="button" type="button" class="layui-btn layui-btn-primary">原始按钮button> <button type="button" type="button" class="layui-btn">默认按钮button> <button type="button" type="button" class="layui-btn layui-btn-normal" id="delete">删除按钮button> <button type="button" type="button" class="layui-btn layui-btn-warm">暖色按钮button> div> <script src="resources/layui/layui.js">script> <script type="text/javascript"> // layui按钮监听 layui.use(["jquery"],function() { var $ = layui.jquery; $(".layui-btn").click(function() { alert($(this).html()); }) }) script>
2.3、导航菜单
-
水平导航：默认就是水平导航，注意若想使效果生效要引入element模块
<body> <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> <script src="resources/layui/layui.js">script> <script type="text/javascript"> // 引入element模块 layui.use(["element"],function() { }) script> body> -
垂直导航，最外层的ul标签加入class属性值layui-nav-tree
<div class="site-title"> <fieldset><legend><a name="theme">垂直导航a>legend>fieldset> div> <ul class="layui-nav layui-nav-tree"> <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> <script src="resources/layui/layui.js">script> <script type="text/javascript"> layui.use(["element"],function() { }) script> -
导航条样式
|- layui-nav：表示这是一个导航条菜单
|- layui-item：导航条子菜单
|- layui-nav-child：子菜单的子菜单
|- layui-this：当前选中的子菜单
2.4、选项卡
-
默认样式选项卡，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">内容1div> <div class="layui-tab-item">内容2div> <div class="layui-tab-item">内容3div> <div class="layui-tab-item">内容4div> <div class="layui-tab-item">内容5div> div> div> -
简洁样式选项卡，class属性加入layui-tab-brief属性值
<div class="layui-tab layui-tab-brief"> <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">内容1div> <div class="layui-tab-item">内容2div> <div class="layui-tab-item">内容3div> <div class="layui-tab-item">内容4div> <div class="layui-tab-item">内容5div> div> div> -
卡片样式选项卡，class属性加入layui-tab-card属性值
<div class="layui-tab layui-tab-card"> <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">内容1div> <div class="layui-tab-item">内容2div> <div class="layui-tab-item">内容3div> <div class="layui-tab-item">内容4div> <div class="layui-tab-item">内容5div> div> div> -
选项卡属性介绍：
1）lay-allowclose：选项卡是否可关闭，true表示可以关闭
代码如下
<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">内容1div> <div class="layui-tab-item">内容2div> <div class="layui-tab-item">内容3div> <div class="layui-tab-item">内容4div> <div class="layui-tab-item">内容5div> div> div>效果如图：
2）lay-filter=“name”：类似于id选择器
3）选项卡常见操作函数：
- 新增
element.tabAdd('demo', { title: '新增选项卡' ,content: '新增内容' //支持传入html }); // 其中demo为选项卡lay-filter属性值，{}内为新增选项卡属性，包括title和内容content- 切换
element.tabChange("demo","5"); // 其中demo为选项卡lay-filter属性值，5为选项卡li标签的lay-id的属性值- 删除
element.tabDelete("demo","3"); // 其中demo为选项卡lay-filter属性值，3为选项卡li标签的lay-id的属性值
2.5、进度条
-
class属性
<div class="layui-progress"> <div class="layui-progress-bar" lay-percent="40%">div> div> <div style="margin-top: 15px; width:300px"> <div class="layui-progress"> <div class="layui-progress-bar" lay-percent="70%">div> div> div>layui-progress属性就代表该div是一个进度条，内层div为进度条比例；margin-top表示进度条的外部承载div，若不显式指定外部div，则默认宽度是网页最大宽度。
-
进度条颜色：给内层layui-progress-bar后追加layui-bg-red进度条为红色
<div class="layui-progress layui-progress-big"> <div class="layui-progress-bar layui-bg-red" lay-percent="20%">div> div> -
开启进度条比例值显示：给外层layui-progress后追加属性值lay-showpercent=“true”
<div class="layui-progress" lay-showpercent="true"> <div class="layui-progress-bar layui-bg-orange" lay-percent="30%">div> div>
2.6、面板+布局
-
面板
卡片面板：
<div class="layui-bg-gray" style="padding: 30px;"> <div class="layui-row layui-col-space15"> <div class="layui-col-md6"> <div class="layui-card"> <div class="layui-card-header">卡片面板div> <div class="layui-card-body"> 卡片式面板面板通常用于非白色背景色的主体内<br> 从而映衬出边框投影 div> div> div> <div class="layui-col-md6"> <div class="layui-card"> <div class="layui-card-header">卡片面板div> <div class="layui-card-body"> 结合 layui 的栅格系统<br> 轻松实现响应式布局 div> div> div> div> div>最外层的div表示整个面板的背景，layui-row属性表示一行，layui-col-space15表示行内每个面板之间的间距，layui-card表示这个div是一个卡片面板，layui-card-header表示卡片标题，layui-card-body表示卡片主体
普通折叠面板（与手风琴面板区别是普通折叠面板可以同时展开多个面板）
<div class="layui-collapse" lay-filter="test"> <div class="layui-colla-item"> <h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？h2> <div class="layui-colla-content" layui-show="true"> <p>有不少其他答案说是因为JS太差。p> div> div> <div class="layui-colla-item"> <h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架？h2> <div class="layui-colla-content"> <p>因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayop> div> div> <div class="layui-colla-item"> <h2 class="layui-colla-title">layui 更适合哪些开发者？h2> <div class="layui-colla-content"> <p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类 AMD 组织形式，并非是有意与时代背道而驰。 <br><br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。p> div> div> <div class="layui-colla-item"> <h2 class="layui-colla-title">一个折叠面板标题？h2> <div class="layui-colla-content"> <p>一个折叠面板的内容。。。p> div> div> div>最外层layui-collapse表示这是一个普通折叠面板，layui-colla-item表示每个折叠项（类似于导航条的item），layui-colla-title表示折叠起来的显示信息，layui-colla-content表示展开后显示的内容，在layui-colla-content的class属性追加layui-show表示默认展开该面板。
面板展开与闭合事件监听函数：
<script type="text/javascript"> layui.use(["element","jquery"],function () { var element = layui.element; var $ = layui.jquery; //监听折叠 element.on('collapse(test)', function(data){ console.log(data.show); //得到当前面板的展开状态，true或者false console.log(data.title); //得到当前点击面板的标题区域DOM对象 console.log(data.content); //得到当前点击面板的内容区域DOM对象 }); }) </script>其中collapse后括号跟需要被监听的面板lay-filter属性值
手风琴面板：在普通折叠面板的最外层div加入属性lay-accordion=""
<div class="layui-collapse" lay-accordion=""> <div class="layui-colla-item"> <h2 class="layui-colla-title">layui 更适合哪些开发者？h2> <div class="layui-colla-content layui-show"> <p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。 <br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。p> div> div> div> -
布局
1、采用 layui-row 来定义行，如：
2、采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：
变量md代表不同屏幕下的标记（例如桌面端、移动端）
*代表代表的是该列所占行的12等分数，范围1-12（如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12， 多余的列将自动另起一行。）
<div class="layui-row"> <div class="layui-col-xs6"> <div class="grid-demo grid-demo-bg1">6/12div> div> <div class="layui-col-xs6"> <div class="grid-demo">6/12div> div> div> <div class="layui-row"> <div class="layui-col-xs3"> <div class="grid-demo grid-demo-bg1">3/12div> div> <div class="layui-col-xs3"> <div class="grid-demo">3/12div> div> <div class="layui-col-xs3"> <div class="grid-demo grid-demo-bg1">3/12div> div> <div class="layui-col-xs3"> <div class="grid-demo">3/12div> div> div>
2.7、徽章
-
样式：
1）圆点徽章（默认颜色橙色）
<span class="layui-badge-dot">span>2）弧形徽章（默认颜色橙色）
<span class="layui-badge">span>3）边框徽章（内部无颜色的弧形徽章）
<span class="layui-badge-rim">6span>
2.8、轮播
-
样式：轮播使用layui-carouser属性值标识（class属性），注意要使用函数对轮播图初始化
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>图片轮播legend> fieldset> <div class="layui-carousel" id="test10"> <div carousel-item=""> <div><img src="resources/images/3.jpeg">div> <div><img src="resources/images/4.jpeg">div> div> div> <script src="resources/layui/layui.js">script> <script type="text/javascript"> layui.use(["element","jquery","carousel"],function () { var element = layui.element; var $ = layui.jquery; var carousel = layui.carousel; //图片轮播 carousel.render({ elem: '#test10' ,interval: 5000 ,width: "142px" }); }) script>
2.9、时间和日期选择器
-
使用方式：引入layui相关css样式和js库，核心方法是使用laydate模块的render()方法来设备时间组件的各种参数
<script type="text/javascript"> layui.use(["element","jquery","laydate"],function () { var element = layui.element; var $ = layui.jquery; var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ // 各种页面初始化参数设置 }); }); </script> -
各种参数介绍：
|- elem（必填项）：需要设备时间组件的标签id，以下代码就是给id为test1的输入框的focus事件绑定了时间组件
<input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd"> layui.use(["element","jquery","laydate"],function () { // 引入laydate模块 var element = layui.element; var $ = layui.jquery; var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ // 各种页面初始化参数设置 }); });|- type（可选项）：时间组件类型，string型参数，可选值{year，month，date，time，datetime}
year： 只提供年列表选择
month： 只提供年、月列表选择
date： 只提供年、月、日列表选择，时间组件默认type值
time： 只提供时分秒列表选择
datetime：全组合，年月日时分秒选择
以下代码表示为id为test1的输入框focus事件绑定了时间组件且该时间组件的type值为年月日时分秒
//执行一个laydate实例 laydate.render({ elem: '#test1' //指定元素 ,type: "datetime" });|- range：开启左右面板范围选择，一般用于开始时间与结束时间的选择，默认值为false，传入true||false表示是否开启左右面板，若传入一个字符串则表示开启面板的同时使用该字符串作为两个时间之间的分隔符（默认分隔符为"-"，例如2016-08-27-2020-06-15），即传入字符串优先级大，默认开启range
//执行一个laydate实例 laydate.render({ elem: '#test1' //指定元素 ,type: "datetime" ,range: "~" });|- format：自定义格式（这里的格式是选择完时间以后显示在相应输入框内的格式，而不是时间组件的选择格式，时间组件格式是由type属性决定的），类型String，默认值：yyyy-MM-dd
format: "yyyy年MM月dd日 HH时mm分ss秒"可选值：很多，一般使用yyyy-MM-dd HH:mm:ss即可
|- value：初始值（时间组件打开默认选中的值和显示在输入框中的值），类型String，默认值new Date()，即当前值；支持传入符合format参数设定的日期格式字符，或者 new Date()，注意要与format格式一致
|- min/max：时间范围约束，类型：string，默认值：min: ‘1900-1-1’、max: ‘2099-12-31’
设定有限范围内的日期或时间值，不在范围内的将不可选中。一般将min设置为当前时间即可，即不能选择已经过去的时间，这也是符合我们的逻辑的做法，max一般不做要求
min: "new Date()"
2.16、表单元素
-
使用前提：引入layui form模块
-
layui 表单对象最外层div使用layui-form属性值标识，每一个表单元素使用layui-form-item属性标识
<div class="layui-form" action=""> <div class=layui-form-item>div> div> -
输入框：
1）单行输入框：独占一行，外层使用layui-input-block属性值标识，内层就是普通的input标签
<div class="layui-form-item"> <div class="layui-input-block"> <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input"> div> div>2）行内输入框，一行可以多个输入框，响应式布局，多了一层使用layui-inline属性，内层使用layui-input-inline
<div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">验证手机label> <div class="layui-input-inline"> <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input"> div> div> <div class="layui-inline"> <label class="layui-form-label">验证邮箱label> <div class="layui-input-inline"> <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input"> div> div> div> -
下拉框：写法与元素下拉框一样，只不过是经过layui渲染之后进行了显示，才会与元素的显示效果不一致，下拉框有一个lay-search属性，该属性标记该输入框是否带有检索option的功能
<div class="layui-form-item"> <label class="layui-form-label">单行选择框label> <div class="layui-input-block"> // 单行下拉框 <select name="interest" lay-filter="aihao" lay-search> // 用于选择该下拉框 <option value="">option> <option value="0">写作option> <option value="1" selected="">阅读option> <option value="2">游戏option> <option value="3">音乐option> <option value="4">旅行option> select> div> div> -
单选框：原生radio，经layui渲染显示
<div class="layui-form-item"> <label class="layui-form-label">单选框label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男" checked=""> <input type="radio" name="sex" value="女" title="女"> <input type="radio" name="sex" value="禁" title="禁用" disabled=""> div> div> -
复选框：
<div class="layui-form-item" pane=""> <label class="layui-form-label">原始复选框label> <div class="layui-input-block"> <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked=""> <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读"> <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled=""> div> div> -
富文本编辑器：具有markdown编辑器效果，实现原理是使用layui的富文本模块给一个textarea元素进行绑定富文本编辑器
<div class="layui-form-item layui-form-text"> <label class="layui-form-label">文本域</label> <div class="layui-input-block"> <textarea placeholder="请输入内容" class="layui-textarea" name="desc" id="myText"></textarea> </div> </div> <script type="text/javascript"> layui.use(["element","jquery","form","layedit"],function () { var element = layui.element; var $ = layui.jquery; var form = layui.form; var layedit = layui.layedit; var text = layedit.build("myText"); }) </script>
上篇部分就到这里了，在下篇中将给出layui的更多高级用法与特性。写作不易，觉得对你有帮助的话就请点个赞评论一下吧。代码和笔记已上传至gitee仓库，有兴趣的小伙伴可以下载到本地运行看一下效果。