【前端】layui前端框架学习笔记，最新大厂前端校招面试经验汇总

最新推荐文章于 2024-09-26 11:44:38 发布
最新推荐文章于 2024-09-26 11:44:38 发布
阅读量851 收藏 20
点赞数 17
分类专栏： 获取资料作者徽信vip1024c 文章标签： 前端 前端框架 layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_87288762/article/details/142503486
版权 
<!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-v2.6.8/layui/css/layui.css">
    <script src="./layui-v2.6.8/layui/layui.js"></script>
</head>
<body>
<!-- 你的 HTML 代码 -->
<script>
 layui.use(['layer', 'form'], function(){
 var layer = layui.layer
 ,form = layui.form;

 layer.msg('Hello World');
 });
</script>
</body>
</html>

3. 页面元素

3.1 布局

3.1.1 布局容器
3.1.1.1 固定宽度
 <!--固定宽度(两侧有留白效果)-->
<div class="layui-container" style="background-color:navajowhite;height: 300px">
    固定宽度
</div>
3.1.1.2 完整宽度
<!--完整宽度(占据屏幕的100%)-->
<div class="layui-fluid" style="background-color:yellow;height: 300px">
   完整宽度
</div>
3.1.2 栅格系统

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

3.1.2.1 栅格布局规则：

在这里插入图片描述

3.1.2.2 响应式规则

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

在这里插入图片描述

3.1.2.3 列间距

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

layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30
layui-col-space32
<p>即：支持列之间为 1px-32px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔</p>
·如果需要的间距高于30px（一般不常见），请采用偏移，下文继续讲解·
3.1.2.4 列偏移

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

3.1.2.5 列嵌套

理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。下面是一个简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!--引入核心css文件-->
    <link rel="stylesheet" href="./layui/css/layui.css">

</head>
<body>
<!--布局容器-->
<div class="layui-container">
<!--
 栅格系统
 1.定义行.layui-row
 2.定义列 .layui-col-md\*
 md:表示不同屏幕的表示（xs,sm,md,lg)
 \* 表示列的数量
 3.每一行被均分为12列，列的总数不能超过12，否则会自动换行
 4.响应式规则，栅格会根据屏幕的分辨率选择对应的样式效果
 5.列边距 . layui-col-space\*
 \* 表示px值（1-30）
 6.列偏移 . layui-col-md-offset\*
 \* 代表的是右偏移占据的列数
 7.列嵌套
 列中可以无限嵌套列


-->
    <!--定义行-->
    <div class="layui-row" >
        <!--定义列-->
        <div class="layui-col-md5" style="background-color: yellow">
            内容5/12
        </div>
        <div class="layui-col-md7" style="background-color: #00f7de">
            内容7/12
        </div>
    </div>
    <!--定义行-->
    <div class="layui-row" >
        <!--定义列-->
        <div class="layui-col-md4" style="background-color:rebeccapurple">
            内容4/12
        </div>
        <div class="layui-col-md4" style="background-color: red">
            内容4/12
        </div>
        <div class="layui-col-md5" style="background-color: blue">
            内容5/12
        </div>
    </div>

    <hr/>
<!-- 响应式规则-->
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="grid-demo grid-demo-bg1">xs:6/12 | sm:6/12 | md:4/12</div>
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="grid-demo layui-bg-red">xs:6/12 | sm:6/12 | md:4/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
            <div class="grid-demo layui-bg-blue">xs:4/12 | sm:12/12 | md:4/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
            <div class="grid-demo layui-bg-green">xs:4/12 | sm:7/12 | md:8/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
            <div class="grid-demo layui-bg-black">xs:4/12 | sm:5/12 | md:4/12</div>
        </div>
    </div>

    <hr>
    <h3>列间距</h3>
    <div class="layui-row layui-col-space30">
        <div class="layui-col-md4" >
            <div style="background-color: blue">1/3</div>
        </div>
        <div class="layui-col-md4" >
            <div style="background-color: blue">1/3</div>
        </div>
        <div class="layui-col-md4" >
            <div style="background-color: purple">1/3</div>
        </div>
    </div>

    <h3>列偏移</h3>
    <div class="layui-row">
        <div class="layui-col-md4" >
            <div style="background-color: blue">4/12</div>
        </div>
        <div class="layui-col-md4 layui-col-md-offset3" >
            <div style="background-color: red">4/12</div>
        </div>
    </div>

    <hr>
    <h3>列嵌套</h3>
    <div class="layui-row">
        <div class="layui-col-md6" style="background-color: red">
            <div class="layui-row" >
                <!--定义列-->
                <div class="layui-col-md4" style="background-color:rebeccapurple">
                    内容4/12
                </div>
                <div class="layui-col-md4" style="background-color: red">
                    内容4/12
                </div>
                <div class="layui-col-md4" style="background-color: blue">
                    内容5/12
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

3.2 基本元素

3.2.1 按钮

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

3.2.1.1 主题

在这里插入图片描述

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

在这里插入图片描述

尺寸组合
大型class=“layui-btn layui-btn-lg”
默认class=“layui-btn”
小型class=“layui-btn layui-btn-sm”
迷你class=“layui-btn layui-btn-xs”
3.2.1.3 圆角

在这里插入图片描述

主题组合
原始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”
3.2.1.4 图标

在这里插入图片描述

温馨提示：各种图标字体请移步(**官网**)文档左侧【页面元素 - 图标】阅览

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!--引入核心css文件-->
    <link rel="stylesheet" href="./layui/css/layui.css">

</head>
<body>
<!--基础按钮-->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://baidu.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>

<hr/>
<!-- 不同主题按钮-->
<div>
    <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
    <button type="button" class="layui-btn">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
    <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
    <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
    <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>

<hr/>
<!-- 不同尺寸按钮-->
<div>
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
        <button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
    </div>
</div>

<hr/>
<!-- 圆角-->
<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
    <button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
    <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
    <button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
</div>
<hr/>
<!--图标-->
<!--从 layui 2.3.0 开始，支持 font-class 的形式定义图标：-->
<i class="layui-icon layui-icon-face-smile"></i>
<!--注意：在 layui 2.3.0 之前的版本，只能设置 unicode 来定义图标-->
<i class="layui-icon">&#xe60c;</i>

<button type="button" class="layui-btn">
    <i class="layui-icon layui-icon-face-smile"></i>按钮
</button>
</body>
</html>
3.2.2 导航

导航一般指页面引导性频道集合,多以菜单的形式呈现,可用于头部和侧边,面包屑结构简单,支持自定义分隔符
依赖加载模块: element

  • 实现步骤
  1. 引入资源
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
  1. 依赖加载模块
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>
3.2.2.1 水平导航

水平导航: layui-nav
当前被选中项: layui-this
二级菜单: layui-nav-child

3.2.2.2 垂直/侧边导航

垂直导航: layui-nav layui-nav-tree
侧边导航: layui-nav layui-nav-tree layui-nav-side

3.2.2.3 导航主题

颜色:layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
徽章:

3.2.2.4 面包屑

面包屑导航: layui-breadcrumb
自定义分隔符: lay-separator="-"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!--引入核心css文件-->
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="layui/layui.js"></script>

</head>
<body>
<script>
 //注意：导航 依赖 element 模块，否则无法进行功能性操作
 layui.use('element', function(){
 var element = layui.element;

 //…
 });
</script>
<!--<hr/>-->
<!--<h3>水平导航</h3>-->
<!--<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"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!-- <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>-->

<!--<hr/>-->
<!--<h3>垂直导航</h3>-->
<!--<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"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!-- <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>-->
<!--<h3>侧边导航</h3>-->
<!--<ul class="layui-nav layui-nav-tree layui-nav-side">-->
<!-- <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"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!-- <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>-->

<!--<h3>主题:颜色,徽章</h3>-->
<!--<ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-red">-->
<!-- <li class="layui-nav-item"><a href="">最新活动</a></li>-->
<!-- <li class="layui-nav-item layui-this"><a href="">产品<span class="layui-badge">6</span></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"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!-- <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>-->

<!--lay-separator 自定义分隔符-->
<h3>面包屑导航</h3>
<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</ul>
</span>
</body>
</html>
3.2.3 选项卡

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。
依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）

  • 实现步骤
  1. 引入资源
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
  1. 依赖加载模块
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>
3.2.3.1 默认Tab选项卡

默认Tab选项卡: layui-tab
选项卡内容: layui-tab-content

3.2.3.2 Tab简洁风格

Tab简洁风格: layui-tab layui-tab-brief

3.2.3.3 Tab卡片风格

Tab卡片风格: layui-tab layui-tab-card

3.2.3.4 带删除的Tab

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

3.2.4 表格
3.2.4.1 静态表格

layui-table

3.2.4.2 基础属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!--引入核心css文件-->
    <link rel="stylesheet" href="./layui/css/layui.css">

</head>
<body>
<!--基本样例-->
<table class="layui-table" >
    <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>

<!--基础属性-->
<table class="layui-table" lay-even lay-skin="line" lay-size="sm">
<!--<table class="layui-table" lay-even lay-skin="row">-->
<!--<table class="layui-table" lay-even lay-skin="nob">-->
    <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>
    <tr>
        <td>贤心</td>
        <td>2016-11-29</td>
        <td>人生就像是一场修行</td>
    </tr>
    <tr>
        <td>许闲心</td>
        <td>2016-11-28</td>
        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
    <tr>
        <td>贤心</td>
        <td>2016-11-29</td>
        <td>人生就像是一场修行</td>
    </tr>
    <tr>
        <td>许闲心</td>
        <td>2016-11-28</td>
        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
    </tbody>
</table>
</body>
</html>
3.2.5 表单

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

layui-form

3.2.5.1 基本结构
<div class="layui-form-item">
  <label class="layui-form-label">标签区域</label>
  <div class="layui-input-block">
    原始表单元素区域
  </div>
</div>

常用属性
required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
layui-input-block 占据整行宽度
layui-input-inline 不会占据部分宽度

3.2.5.2 文本框
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

autocomplete是否自动填充（当浏览器缓存中存在相同的name属性时，会填充）
placeholder 为空时,默认显示的文本信息
class="layui-input"：layui.css提供的通用CSS类

3.2.5.3 下拉选择框

optgroup 标签给select分组
通过selected属性设置默认选中项
disabled禁用该选择:可可以设置select和option标签(禁用下拉框和禁用下拉选项)
lay-search 来开启搜索匹配功能

 <!--下拉选择框-->
    <!--第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项（存在value值）作为默认选中项。你可以在option的空值项中自定义文本，如：请选择分类。-->
    <div class="layui-form-item">
        <label class="layui-form-label">我是下拉选择框</label>
        <div class="layui-input-inline">
            <!--通过selected属性设置默认选中项-->
            <!--disabled禁用该选择:可以针对所有选择,也可以针对单个item-->
            <!--<select name="city" lay-verify="required" disabled>-->
            <select name="city" lay-verify="required">
                <option value="">请选择一个城市</option>
                <option value="010" selected>北京</option>
                <option value="021">上海</option>
                <option value="0571" disabled>杭州</option>
            </select>

            <select name="quiz" lay-verify="required">
                <option value="">请选择</option>
                <optgroup label="城市记忆">
                    <option value="你工作的第一个城市" selected>你工作的第一个城市？</option>
                </optgroup>
                <optgroup label="学生时代">
                    <option value="你的工号">你的工号？</option>
                    <option value="你最喜欢的老师">你最喜欢的老师？</option>
                </optgroup>
            </select>
            <select name="city" lay-search>
                <option value="">请选择一个城市</option>
                <option value="010">你好啊北京,hello</option>
                <option value="021" selected>上海</option>
                <option value="0571" disabled>杭州</option>
            </select>
        </div>
    </div>

在这里插入图片描述

3.2.5.3 复选框

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

  <div class="layui-form-item">
        <label class="layui-form-label">标签区域22</label>
        <div class="layui-input-block">
            <!--默认风格：-->
            <input type="checkbox" name="hobby" title="写作" checked>
            <input type="checkbox" name="hobby" title="发呆">
            <input type="checkbox" name="hobby" title="禁用" disabled>
            <!--原始风格：-->
            <hr/>
            <input type="checkbox" name="hobby" title="写作" lay-skin="primary" checked>
            <input type="checkbox" name="hobby" title="发呆" lay-skin="primary">
            <input type="checkbox" name="hobby" title="禁用" lay-skin="primary" disabled>
        </div>
    </div>
3.2.5.5 开关

其实就是checkbox复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置value="1"可自定义值，否则选中时返回的就是默认的on

<!--开关-->
    <div class="layui-form-item">
        <label class="layui-form-label">标签区域22</label>
        <div class="layui-input-block">
            <!--默认风格：-->
            <input type="checkbox" name="xxx" lay-skin="switch" lay-text="开/关闭">
            <input type="checkbox" name="yyy" lay-skin="switch" checked disabled>
            <input type="checkbox" name="zzz" lay-skin="switch" value="1">
        </div>
    </div>
3.2.5.6 单选框

属性title可自定义文本
属性disabled开启禁用
设置value="xxx"可自定义值，否则选中时返回的就是默认的on

<!--单选框-->
    <div class="layui-form-item">
        <label class="layui-form-label">标签区域22</label>
        <div class="layui-input-block">
            <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>
        </div>
    </div>
3.2.5.7 文本域

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

 <!--文本域-->
    <div class="layui-form-item">
        <label class="layui-form-label">标签区域22</label>
        <div class="layui-input-block">
            <textarea name="aaa" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
        </div>
    </div>
3.2.5.8 组装行内表单

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

<!--组装行内表单-->
    <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>
3.2.5.9 忽略美化渲染

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

 <!--忽略美化渲染-->
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block" >
            <select name="city" lay-search lay-ignore>
                <option value="">请选择一个城市</option>
                <option value="010">你好啊北京,hello</option>
                <option value="021" selected>上海</option>
                <option value="0571" disabled>杭州</option>
            </select>
        </div>
    </div>
3.2.5.10 表单方框风格

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

3.3 组件示例

3.3.1 弹层组

在这里插入图片描述

3.3.1.1 作为独立组件使用(未下载到独立版本)

引入jQuery1.8以上的任意版本，
引入layer.js
引入layer.css

<script>
layer.msg('hello'); 
</script>
3.3.1.2 layui 模块化使用

引入layui.css
引入layui.js

layui.use('form', function () {
        var layer = layui.layer;
        layer.msg('hello');
    });
3.3.1.3 内置方法

layer.open
layer.msg

3.3.1.4 type-基本层类型

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

3.3.1.5 title-标题

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

3.3.1.6 content-内容

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

/!\*
 如果是页面层
 \*/
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});
/!\*
 如果是iframe层
 \*/
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 
/!\*
 如果是用layer.open执行tips层
 \*/
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});
3.3.1.7 area - 宽高

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

3.3.1.8 icon - 图标

信息框和加载层的私有参数
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2

3.3.2 日期与时间选择
3.3.2.1 作为独立组件使用(未下载到独立版本)
3.3.2.2 在 layui 模块中使用
 layui.use('form', function () {
        var laydate = layui.laydate;

    });
3.3.1.4 基础参数选项

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

 laydate.render({
            elem: '#test1' //指定元素
});
3.3.1.5 elem - 绑定元素

类型：String/DOM，默认值：无
必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

laydate.render({ 
  elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});
3.3.1.6 type - 控件选择类型

类型：String，默认值：date
用于单独提供不同的选择器类型

type可选值名称用途
year年选择器只提供年列表选
month年月选择器只提供年、月选择
date日期选择器可选择：年、月、日。type默认值，一般可不填
time时间选择器只提供时、分、秒选择
datetime日期时间选择器可选择：年、月、日、时、分、秒
//日期范围选择
laydate.render({ 
  elem: '#test'
  ,range: true //或 range: '~' 来自定义分割字符
});
 
//日期时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,range: true
});
 
//时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,range: true
});
 
//年范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'year'
  ,range: true
});
 
//年月范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'month'
  ,range: true


### 最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。



>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

![](https://img-blog.csdnimg.cn/img_convert/ce331c95b55bd5e643195912027ceff9.webp?x-oss-process=image/format,png)
te.render(options)` 来设置基础参数，也可以通过方法：`laydate.set(options)` 来设定全局基础参数.
> 
> 
>

laydate.render({
elem: ‘#test1’ //指定元素
});


##### 3.3.1.5 elem - 绑定元素



> 
> 类型：String/DOM，默认值：无  
>  必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象
> 
> 
>

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


##### 3.3.1.6 type - 控件选择类型



> 
> 类型：String，默认值：date  
>  用于单独提供不同的选择器类型
> 
> 
> 




| type可选值 | 名称 | 用途 |
| --- | --- | --- |
| year | 年选择器 | 只提供年列表选 |
| month | 年月选择器 | 只提供年、月选择 |
| date | 日期选择器 | 可选择：年、月、日。type默认值，一般可不填 |
| time | 时间选择器 | 只提供时、分、秒选择 |
| datetime | 日期时间选择器 | 可选择：年、月、日、时、分、秒 |

//日期范围选择
laydate.render({
elem: ‘#test’
,range: true //或 range: ‘~’ 来自定义分割字符
});

//日期时间范围选择
laydate.render({
elem: ‘#test’
,type: ‘datetime’
,range: true
});

//时间范围选择
laydate.render({
elem: ‘#test’
,type: ‘time’
,range: true
});

//年范围选择
laydate.render({
elem: ‘#test’
,type: ‘year’
,range: true
});

//年月范围选择
laydate.render({
elem: ‘#test’
,type: ‘month’
,range: true

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-6uoxGipW-1727195870161)]

2401_87288762
关注
专栏目录
文件系统设计 - 开发文件系统 Store (上篇)
qq_44746132的博客
09-21 574
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
前端主流框架vue学习笔记第一篇
12-10
Vue.js 是一款轻量级且功能强大的前端JavaScript框架，由尤雨溪开发，自2014年发布以来迅速成为前端开发领域的热门选择。Vue.js 吸取了其他框架如Knockout、Angular、React以及Avalon等的优点，提供了多种开发模式，...
前端学习笔记与面试面经
09-24
【项目资源】：包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源，毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】：...
【学习笔记】前端框架LayUI.pdf
09-13
LayUI是一个流行的前端框架，它提供了丰富的UI组件和功能强大的JavaScript插件，帮助开发者快速构建Web应用程序。下面是对LayUI的详细介绍： 1. LayUI概述 LayUI是一个基于HTML/CSS/JS的前端框架，它提供了丰富的...
前端主流框架vue学习笔记第二篇
12-11
接上篇，在本篇中，我们将要实现如下，功能，编辑和查询，我们当前的todolist程序，和线上其它的demo程序不同，我们会对其进行增删改查的基本操作，之后进行进一步的完善，按照常规的系统使用经验，一般我们新增和...
webview2加载本地页面
qq_25160759的博客
09-23 571
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
WebGL复杂几何体与模型加载
天涯学馆
09-23 384
在WebGL中，复杂几何体的创建通常涉及多个顶点和面片，而模型加载则涉及到导入外部文件格式，如OBJ、GLTF或FBX。在WebGL中，可以通过设置不同类型的灯光来改变3D场景的光照效果。在WebGL中，可以通过增加更多的灯光uniforms并在片段着色器中计算它们的组合效果来实现多光源。除了基本的漫射和镜面高光，还可以添加软边缘高光、环境光遮蔽（Ambient Occlusion）和全局光照等效果，以增强光照的真实感。GLTF是一种现代的3D模型格式，包含了模型的几何体、材质、纹理和动画。
apply、call和bind的作用和区别
欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
09-23 673
javascript中，apply、call和bind的作用和区别介绍。
DC00015基于java web校园网上购物系统
黄昏下的黎明的博客
09-24 619
DC00015【含配套文档】基于java web校园网上购物系统。
前端入门：HTML+CSS
mingangel的博客
09-21 772
之前的文章我已经讲过HTML，这篇文章我将讲解HTML和CSS的案例。
WebGL阴影与后期处理
天涯学馆
09-24 142
在WebGL中实现更复杂的后期处理效果，通常会使用多个步骤，例如使用多个帧缓冲对象进行链式处理。它通过从光源视角渲染场景的深度信息，并在主渲染中使用这个深度信息来判断像素是否在阴影中。DOF（Depth of Field）模拟相机的焦距，使远离焦点的物体变得模糊。色调映射通常用于调整图像的动态范围，使其适应显示器的显示能力。WebGL还可以实现其他高级视觉效果，如SSAO（屏幕空间环境光遮蔽）、DOF（景深）、Bloom（光晕）等。SSAO是一种近似技术，用于模拟物体表面的阴影，增加场景的深度感。
如何使用ssm实现基于java web的防疫工作志愿者服务平台的设计与实现
寒夜
09-25 816
【代码】ssm基于java web的防疫工作志愿者服务平台的设计与实现+jsp
HTML·第三章课后练习题
最新发布
MortalTom的博客
09-26 170
【代码】HTML·第三章课后练习题。
【LLM】Ollama：本地大模型 WebAPI 调用
2303_80346267的博客
09-22 1394
Ollama 是一个基于 Python 的工具，专为本地调用大型语言模型而设计。它提供了用户友好的接口，使开发者能够在本地环境中快速加载和管理模型，简化了大模型的集成与使用流程。Ollama 适用于各种应用场景，包括自然语言处理、对话系统等，旨在提升开发效率和灵活性。
java中手动回滚事物
weixin_45650629的博客
09-24 191
1、原因是因为代码中我写了try catch，try catch后异常被catch捕获了，catch后的业务代码还会继续执行，捕获后的异常会在后台的日志中打印，不会把这个异常错误抛给前端了；2、这个时候如果你使用的是事物注解@Transcation，因为你异常被捕获所以它并不会帮你回滚代码了，这时候就需要我们自己在catch中进行手动事物回滚。为什么要手动回滚事物？
【React】获取DOM
在热爱技术的路上一直前行。
09-24 264
【代码】【React】获取DOM。
关于HarmonyOS的学习
m0_72035166的博客
09-24 704
1.?//?作用：1、三目运算符 2、可选链id: 1,// info: {// name: '张',// }.name)2.??空集合并符amount 是别人传递过来的，如果别人没有传递过来一个具体的值，那么count就会变成undefinedlet amount?13.+加号作用：1、加法运算 2、字符串拼接 3、数据类型转换let num = Number(prompt('请输入一个数字？'))let num = +prompt('请输入一个数字？')
前端面试题（八）
上进！努力！！！
09-26 854
前端面试题（八）
ant design vue实现表格序号递增展示~
m0_62626838的博客
09-24 253
【代码】ant design vue实现表格序号递增展示~
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值