精华内容
下载资源
问答
  • 简单通用的layui后台页面模板。主要是导航的样式 以及菜单缩进,自适应手机端处理。
  • 目录标题1、layui官方公告2、为什么要使用layui框架layui框架的好处3、layui框架的使用3.1、导入Layui的资源3.2、项目中的资源引入,我们项目中的webapp文件下,直接将资源的layui文件复制进去即可3.3、技术文档的...

    本文章创建于2021年10月8日,20时10分
    于10月11日早上5:30制作完毕

    1、layui官方公告

    今天是我刚接触layui,对于后台的开发人员来说,了解基本的前端编程还是很有必要的,虽然平时写的前端不多,但也是被繁琐的前端代码搞得很烦,于是为了避免这种情况,就把代码简化,没有布局,没有定位,没有美观,反正就是丑的一批,但是后端人员在意这么多干什么,只要不是特别指定需求,我只要前台可以接收和反馈数据就可以了;

    但是考虑到今后工作中可能会见到前端框架,为了更好的与前端进行交互,那么就必须了解一下,否则写代码的时候,连前端页面的接口我都找不到;

    最近看到官网发的信息:
    点击进入官网
    在这里插入图片描述

    觉得很有感触,虽然我也是第一次学习这个,但是在步入Java时,敲hello word的时候,就听过layui,那么对于之前使用过layui的程序员,可能感触更大。

    下面我将用心做出一个文章,将对layui做出一定的代码示例演示,用最通俗的语言描述对应的方法和功能,但需要注意的是,这篇文章,只针对于后端开发人员,了解即可,并不适用于专业的前端人员,以及对框架知识要求过高的朋友,请周知!

    2、为什么要使用layui框架、layui框架的好处

    在这里插入图片描述

    我们的layui框架就是提供的特定的方法和接口,我们想要什么样式和效果,我们直接拿框架内的直接用就可以了,比如我们之前手写的form表单或者是下拉框、等等,就不用我们在一个标签一个标签手敲了,这样我们只需要关注传值和取值的本身,其他的一些复杂的操作直接交给框架即可

    layui框架为我们后端的人员提供了很好的帮助,下面就是layui框架的特点以及使用详解
    在这里插入图片描述

    3、layui框架的使用

    3.1、导入Layui的资源

    这个可以去他的官网直接下载即可,虽然过不久侯官网就会关闭,但是大家可以去他的gitee下载
    点击跳转

    在这里插入图片描述

    3.2、项目中的资源引入,我们项目中的webapp文件下,直接将资源的layui文件复制进去即可

    在这里插入图片描述
    并不需要其他的jar包,如果单纯使用它,这个已经足够

    3.3、技术文档的支持

    layui的官方技术文档本身就是不错的,大家如果觉得官方文档可以,大家其实可以直接去看着官方文档里面的代码演示,直接进行复制修改使用即可,如果技术很好的,请直接看文档,没必要看我这个,我这个只为为了初学者学起来更快更简单!

    官方文档链接

    由于最近官方文档可能会下架,大家可以去之前的gitee里面,贤心应该会发,同时也可以去镜像内部观看;

    4、代码上手,按键模块示例,框架的引入

    我们按照之前的步骤在代码中直接引入即可:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <!--引入核心的class文件-->
        <link rel="stylesheet" href="./layui/css/layui.css">
    
        <!--引入核心的js文件-->
        <script type="text/javascript" src="./layui/layui.js"></script>
    </head>
    <body>
    
    </body>
    </html>
    

    把之前资源整体好之后,我们直接在代码中引入class文件和js文件即可,这个都在我们的layui文件内部;

    我们要想使用框架内的东西,我们直接使用class进行调用即可,layui为我们提供了各种信息的调用方法,示例如下:

    我这里就用按钮举例:
    在这里插入图片描述
    首先我们在代码中定义一个普通的按钮
    在这里插入图片描述效果如下:
    在这里插入图片描述

    很明显,这个按钮很平常,最基础的按钮,那我们相对这个按钮的样式变化一下,让他变好看一些,我们直接在标签内使用class进行调用框架内写好的样式即可:
    在这里插入图片描述效果:
    在这里插入图片描述

    想实现转跳的按钮,我们直接使用标签即可,a标签是个超链接标签,但是框架内的class="layui-btn"会转成按钮的样式:
    在技术文档中复制:
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述

    5、layui框架模块的引入和使用

    在刚刚使用的按钮,我们是直接使用class调用框架封装好的方法就可以出现效果了,但是在框架内,有些效果是需要引入模块才能使用的
    比如在文档的快速入门的地方就有说明:
    在这里插入图片描述那这些代码有什么效果呢?我们可以看一下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <!--引入核心的class文件-->
        <link rel="stylesheet" href="./layui/css/layui.css">
    
        <!--引入核心的js文件-->
        <script type="text/javascript" src="./layui/layui.js"></script>
    </head>
    <body>
    <button type="button" class="layui-btn">一个标准的按钮</button>
    <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
    
    
    <script>
        layui.use(['layer'], function(){
            var layer = layui.layer;
            layer.msg('Hello World');
        });
    </script>
    
    </body>
    </html>
    

    运行效果:出现了一个类似于小的弹窗,姑且认为是弹窗

    在这里插入图片描述那想要是新这个弹窗的效果,这个弹窗需要模块的支持,所以我们就得导入模块,我们再看一下模块导入的代码:
    在这里插入图片描述

    除了描述的,其余的都是固定格式;

    如果我们想用其他的,比如导航:他需要模块:
    在这里插入图片描述

    在这里插入图片描述

    6、栅格系统:

    使用框架进行栅格布局

    先看技术文档:
    在这里插入图片描述

    如果想用框架系统的框架样式,它需要一个容器进行接收,比如biv标签
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>栅格系统</title>
    
        <!--引入核心的class文件-->
        <link rel="stylesheet" href="./layui/css/layui.css">
    
        <!--引入核心的js文件-->
        <script type="text/javascript" src="./layui/layui.js"></script>
    </head>
    <body>
    
        <div class="layui-container" style="background-color:red ">
            123
        </div>
    
    
    </body>
    </html>
    

    效果如下:
    在这里插入图片描述
    是我截图的原因,这个他应该是居中的效果;

    除此之外还有不对它进行局限,是100%平铺屏幕的效果:
    在这里插入图片描述
    在这里插入图片描述
    以上就是两种的简单布局

    现在我们进行栅格了
    框架其实是吧整个布局分成了十二份,我们可以根据不同的占比,来设置布局

    我们要定义一个div,引入布局:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>栅格系统</title>
    
        <!--引入核心的class文件-->
        <link rel="stylesheet" href="./layui/css/layui.css">
    
        <!--引入核心的js文件-->
        <script type="text/javascript" src="./layui/layui.js"></script>
    </head>
    <body>
    
        <div class="layui-container" style="background-color:red ">
            123
        </div>
    
        <div class="layui-fluid" style="background-color:gold ">
            ……
        </div>
    
        <br>
        <br>
        <br>
    
        <div class="layui-fluid" style="background-color:fuchsia ">
    
            <!--layui-row代表的是一行将被分成12份-->
            <div class="layui-row">
                <!--md后面的9,代表则个div占一行div的9份-->
                <div class="layui-col-md9">
                    你的内容 9/12
                </div>
                <!--md后面的3,代表则个div占一行div的3份-->
                <!--要保证他们的份数整体是12份,如果超过或者小于,都可能会对布局产生影响-->
                <div class="layui-col-md3">
                    你的内容 3/12
                </div>
            </div>
        </div>
    
    
    </body>
    </html>
    

    在这里插入图片描述记住这个格式即可

    运行效果:
    在这里插入图片描述

    为了更好的观看,我们可以把后面的那个添加上颜色:
    在这里插入图片描述

    在这里插入图片描述

    6.1、设备问题引起的布局错乱

    现在我们可以通过这个效果,基本上就可以实现div中的一些效果的定位,但是还需要考虑到不同设备下的情况,很可能会出现pc端正常,但是到了手机端和平板,由于屏幕和分辨不同,导致布局错乱;

    于是我们可以通过以下进行调整,在技术文档中
    在这里插入图片描述
    看标记,那一列有一个md,md就是我们之前写的div引用布局时写的,我们可以根据不同的设备进行更改即可在这里插入图片描述
    但是我们一直这样修改,岂不是很麻烦,所以,我们可以直接在class内,直接在md9之后,添加一个空格,再写一个,只不过这个就不要时md了,可以换其他设备,这样就可以在多台设备进行添加

    在这里插入图片描述

    7、管理系统界面布局

    我们管理系统,其实大体都差不多,都是上面有一个导航栏,左边有一个目录栏,右边有一个主题,可能最下面还有一个尾栏,

    技术文档内就有指出:
    在这里插入图片描述
    代码实现:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>栅格系统</title>
    
        <!--引入核心的class文件-->
        <link rel="stylesheet" href="./layui/css/layui.css">
    
        <!--引入核心的js文件-->
        <script type="text/javascript" src="./layui/layui.js"></script>
    </head>
    <body>
    
        <!--引入布局-->
        <div class="layui-layout" >
            <!--头部-->
            <div  class="layui-header">
                123
            </div>
    
            <!--主体-->
            <div class="layui-body">
                123
            </div>
            
            <!--尾部-->
            <div class="layui-footer">
                123
            </div>
        </div>
    
    
    </body>
    </html>
    

    示例布局已经做好,现在要添加颜色, 之前我们是按照原先的div的颜色标签进行添加颜色的,其实在框架内部,提供了颜色:
    在这里插入图片描述
    在这里插入图片描述
    添加代码后的颜色是这样:来看下效果:
    在这里插入图片描述
    发现并不尽人意,那是因为,主体部分我们并没有限定高度,但是限定高度仍属于div的属性,子啊框架中,我们可以通过layui-layout-admin解决,他会自动生成管理系统布局:
    在这里插入图片描述
    那此刻我们的管理系统布局已经做好了:
    在这里插入图片描述
    左边的空白部分是菜单,我们暂时可以忽略;

    说实现,现在已经凌晨一点07分了,真晚了,真不想在写了;再写一点,今晚先发布出去,等之后在添加改吧,唉,苦逼的编程生活

    8、按钮组件

    我们一开始使用的示例,就是由框架生成的按钮的效果
    在这里插入图片描述

    代码演示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>栅格系统</title>
    
        <!--引入核心的class文件-->
        <link rel="stylesheet" href="./layui/css/layui.css">
    
        <!--引入核心的js文件-->
        <script type="text/javascript" src="./layui/layui.js"></script>
    </head>
    <body>
    
        <!--框架的普通按钮属性,都可以作用到任何元素上-->
        <button type="button" class="layui-btn">一个标准的按钮</button>
        <a class="layui-btn">a标签的按钮</a>
        <span class="layui-btn">span标签的按钮</span>
    
    </body>
    </html>
    

    在这里插入图片描述
    我们普通的框架按钮,作用在其他元素上,都可以生成按钮

    除了这些,还有一些其他格式的按钮,我们只需要添加不同的class就可以了,就不再一一展示了
    在这里插入图片描述
    在这里插入图片描述
    这些按钮添加响应的class即可,下面讲一下图标按钮的使用

    8.1、图标按钮的使用

    在我们的文档中就有描述在这里插入图片描述
    如何才能把 图标和按钮组合起来呢,主要由两个方法:

    class引入:
    在这里插入图片描述
    效果:
    在这里插入图片描述
    想要更换,更换后面的样式即可
    在这里插入图片描述图标下面的就是:

    另外一种就是使用样式上面的那一段文字:
    在这里插入图片描述

    具体使用如下:
    在这里插入图片描述
    只不过是早之前的版本,推荐使用class那个

    9、导航栏

    导航栏再前端的应用中非常广泛,通常我们再使用平台,进行不同页面的切换,导航栏可以简洁高效的实现效果:

    代码演示:
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>栅格系统</title>
    
        <!--引入核心的class文件-->
        <link rel="stylesheet" href="./layui/css/layui.css">
    
        <!--引入核心的js文件-->
        <script type="text/javascript" src="./layui/layui.js"></script>
    </head>
    <body>
    
    <!--使用ul标签-->
    <ul class="layui-nav" >
        <li class="layui-nav-item">java</li>
        <li class="layui-nav-item">python</li>
        <li class="layui-nav-item">C</li>
        <li class="layui-nav-item">C++</li>
    </ul>
    
    
        <script>
            //注意:导航 依赖 element 模块,否则无法进行功能性操作
            layui.use('element', function(){
                var element = layui.element;
    
                //…
            });
        </script>
    
    </body>
    </html>
    

    运行效果:
    在这里插入图片描述

    9.1、解决效果问题

    可以看到,我们只是创建了一个导航栏,并没有其他的属性,在这里显得不自然,那么我们可以再li标签内部添加一个a标签,包裹选项:
    在这里插入图片描述现在就好看很多:
    在这里插入图片描述

    9.2、默认选项

    再我们的导航栏中,可能再实际的项目展示的过程中,可能需要默认选中某一个选项:
    在这里插入图片描述在这里插入图片描述

    9.3、实现导航栏的二级菜单

    再导航栏中,我们可以对选项添加子选项,也就是二级菜单,如果我们想哪个菜单下面添加菜单,就直接再a标签中添加dl标签即可:如:
    在这里插入图片描述

    效果:
    在这里插入图片描述

    9.4、模块的使用事项

    我们再使用这个模块的时候,需要导入模块:
    在这里插入图片描述
    其实即使我们不导入模块,我们的导航栏效果照样可以实现,但也仅仅只能实现效果,无法对导航进行功能操作
    如果需要导入多个模块,如下:
    在这里插入图片描述

    9.5、导航中徽章的使用(消息提示效果)

    我们在网站中经常发发现某些提示的效果,比如我们在csdn的时候,如果有人评论点赞了我们的文章,那么消息那一栏就会出现一个小红点,这个效果在layui的徽章中可以实现:
    在这里插入图片描述

    在我们的文档中就有指明徽章的使用:
    在这里插入图片描述
    在这里插入图片描述
    我们要想使用徽章,直接把相关的样式直接扔到a标签内就行了:
    在这里插入图片描述

    代码演示:在这里插入图片描述
    在这里插入图片描述

    9.6、导航更换主题

    我们的导航默认应该是藏青色,想换其他颜色,也是可以的
    在这里插入图片描述
    水平导航有三种 主题,垂直的只有默认的一种
    ,如果想要更换,直接把对应的方法调用即可,我们的导航引入是用ul标签,直接在ul标签使用即可

    代码演示:
    在这里插入图片描述
    在这里插入图片描述
    当然,也不知也三种,如果想用其他颜色,可以后面的代码即可
    在这里插入图片描述在这里插入图片描述

    在这里插入图片描述

    9.7、垂直导航、菜单效果

    在我们的管理系统中,左侧都会有一个菜单栏,我们通过导航也可以实现,在ul标签内添加layui-nav-tree即可:

    在这里插入图片描述
    在这里插入图片描述
    目前的菜单也只是导航 自适应的效果,我们还可以添加layui-nav-side实现导航布满左侧的效果
    在这里插入图片描述
    在这里插入图片描述

    9.8、垂直导航二级菜单点不出来效果

    当我们点击左边的二级菜单,他会直接刷新页面,我们可以把设置a标签,让他不再转跳
    在这里插入图片描述

    完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>栅格系统</title>
    
        <!--引入核心的class文件-->
        <link rel="stylesheet" href="./layui/css/layui.css">
    
        <!--引入核心的js文件-->
        <script type="text/javascript" src="./layui/layui.js"></script>
    </head>
    <body>
    
    <!--使用ul标签-->
    <ul class="layui-nav layui-bg-red" >
        <li class="layui-nav-item layui-this"><a href="">java</a> </li>
    
        <li class="layui-nav-item"><a href="">python
            <span class="layui-badge">99+</span>
        </a></li>
    
        <li class="layui-nav-item"><a href="">C
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </a></li>
        <li class="layui-nav-item"><a href="">C++</a></li>
    </ul>
    
    
    <!--使用ul标签-->
    <ul class="layui-nav layui-nav-tree layui-nav-side" >
        <li class="layui-nav-item layui-this"><a href="">java</a> </li>
    
        <li class="layui-nav-item"><a href="">python
            <span class="layui-badge">99+</span>
        </a></li>
    
        <li class="layui-nav-item"><a href="javascript:void(0)">C
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </a></li>
        <li class="layui-nav-item"><a href="">C++</a></li>
    </ul>
    
    
        <script>
            //注意:导航 依赖 element 模块,否则无法进行功能性操作
            layui.use('element', function(){
                var element = layui.element;
    
                //…
            });
        </script>
    
    </body>
    </html>
    

    10、选项卡的使用

    选项卡就是当我们点击菜单或者导航时,主体窗口会出现不同的效果,这个就是选项卡

    在这里插入图片描述
    代码展示:
    在这里插入图片描述

    他们之间的联系时一一对应的,下面的第一个内容对应的上面第一个标签;还有选项卡的大小是根据内容的多少进行匹配的,如果想要设定选项卡的大小,直接在选项卡中设置高度即可

    效果:
    在这里插入图片描述我们点击哪个,就会跳到哪个选项卡

    10.1、细节添加

    在这之前,我们的选项卡的选项点击效果不是特别明显,我们可以添加layui-tab-brief,实现效果:
    在这里插入图片描述
    在这里插入图片描述

    字体会变颜色,另外还可以出现一个指示栏,这样效果就可以展示的更加明显

    10.2、选项后面添加X

    我们在有些应用上,我们可以关闭某些选项,点击后面的X就可以了,layui就可以实现,我们只需要添加一串代码即可lay-allowClose=“true”

    在这里插入图片描述在这里插入图片描述
    点击X就可以关闭;

    11、form表单的使用(重点)

    在我们学习基础的jsp的时候,基本上我们都会手敲form表单,但展示美观一般,在框架它自身就有表单
    在这里插入图片描述
    代码演示:需要导入form模块
    在这里插入图片描述
    之后需要使用form的标签,并指定class

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>栅格系统</title>
    
        <!--引入核心的class文件-->
        <link rel="stylesheet" href="./layui/css/layui.css">
    
        <!--引入核心的js文件-->
        <script type="text/javascript" src="./layui/layui.js"></script>
    </head>
    <body>
    
    <form class="layui-form">
        <!--在form表单中还需要把form中的表单项转成layui内的-->
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
    
            <!--layui-input-block-----代表换行的意思-->
            <div class="layui-input-block">
                <input type="text" name="uname"  class="layui-input">
            </div>
        </div>
    
    
        <!--提交按钮-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <!--这个默认的就是直接提交,相当于type=“submit”,,如果不想提交,需要手动指出-->
                <button class="layui-btn" >立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        
    </form>
    

    在这里插入图片描述

    11.1、指定输入框长度

    默认div就是自适应屏幕的,如果我们想要指定,只能通过手动设置在这里插入图片描述

    11.2、提交按钮的两种方法:

    除了刚刚在文中注释的,还有一种提交方法
    当然,只要在指定layui的div中不写的话他也会默认提交,这是第一种方法,在这里插入图片描述
    第二种方法,就是把提交这个功能直接交给layui进行管理,添加lay-submit在这里插入图片描述

    11.3、 表单验证

    之前我们大都是通过span标签与jq进行表单验证的,示例:如果不使用之前那种导入jq的方法,也可以使用如下方法
    在这里插入图片描述

    在这里插入图片描述
    之前的方式仍然可以使用,同时我们也可以使用layui中的在这里插入图片描述

    在这里插入图片描述

    我们也可以通过表单项的值获取输入的值
    在这里插入图片描述在这里插入图片描述

    在这里插入图片描述

    11.4、实现ajax的请求发送

    如果我们想要实现ajax发送,那我们需要把提交按钮改成type=“button”,另外把lay-submit lay-filter="formDemo"去掉,添加id
    在这里插入图片描述在这里插入图片描述

    在这里插入图片描述

    11.5、表单中的各个选项及其注意事项

    11.5.1、required必填项

    如果我们设置某个文本框设置位必填项,我们之前就会通过表单验证的形式,以及span的方式,现在layui只需要添加required即可
    在这里插入图片描述
    在这里插入图片描述
    另外我们还可以更换校验的格式,之前写的required可以删掉

    在这里插入图片描述
    在这里插入图片描述
    除了这些,我们也可以进行其他校验,比如手机号,邮箱等:
    在这里插入图片描述

    11.5.2、placeholder初始文本提示

    在这里插入图片描述
    在这里插入图片描述

    11.5.3、autocomplete="off"历史记录是否展示

    添加off就是不默认展示
    如果是on就会出现以下效果:在这里插入图片描述

    在这里插入图片描述

    11.5.4、密码

    密码跟之前一样,改type:password

    11.5.5、下拉框

    <div class="layui-form-item" style="width: 400px">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <!--selected优点展示此栏-->
                    <option selected value=""></option>
                    <option value="0">北京</option>
                    <!--disabled禁用选项-->
                    <option value="1" disabled>上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
    
    

    在这里插入图片描述
    同时也支持分组:

    <div class="layui-form-item" style="width: 400px">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="quiz">
                    <option value="">请选择</option>
                    <optgroup label="城市记忆">
                        <option value="你工作的第一个城市">你工作的第一个城市?</option>
                    </optgroup>
                    <optgroup label="学生时代">
                        <option value="你的工号">你的工号?</option>
                        <option value="你最喜欢的老师">你最喜欢的老师?</option>
                    </optgroup>
                </select>
            </div>
        </div>
    

    在这里插入图片描述
    另外对于如果选项多的话,我们也可以通过添加lay-search对选项进行搜索
    在这里插入图片描述
    在这里插入图片描述

    11.5.6、复选框

    <div class="layui-form-item" style="width: 400px">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <!--默认风格:-->
                <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>
            </div>
        </div>
    

    在这里插入图片描述

    11.5.7、开关

    在这里插入图片描述
    只有用户是开启的状态,我们才可以获取里面的值,可以直接使用value

    11.5.8、单选框

    在这里插入图片描述

    <div class="layui-form-item" style="width: 400px">
            <label class="layui-form-label">复选框</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>
    

    在这里插入图片描述

    11.5.9、文本域

    在这里插入图片描述基本上和之前使用一样

    <div class="layui-form-item" style="width: 400px">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>
    

    在这里插入图片描述

    11.6、组装行内表单

    为了可以模范模拟查询的样式,所以有了组装行内表单

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    12、弹出层

    在这里插入图片描述
    需要加载模块

    在这里插入图片描述
    在这里插入图片描述
    弹出层出现小图标
    在这里插入图片描述在这里插入图片描述图标一供有七种,数字只能填1-7,如果多填,马效果只能是最后一个效果

    第二种:有一个确定键
    在这里插入图片描述在这里插入图片描述
    想要改变弹窗标题:
    在这里插入图片描述

    另外同时也可以执行函数
    在这里插入图片描述
    如果调用函数,如果不写东西,会无法关闭弹窗
    在这里插入图片描述
    弹出选择框
    在这里插入图片描述
    如果点击了确定,可以通过发送消息值后台
    在这里插入图片描述

    弹出输入框

    在这里插入图片描述

    12.1、open弹窗:

    实现效果举例:
    在这里插入图片描述
    详细介绍
    在这里插入图片描述
    在这里插入图片描述
    在我们使用项目的时候,如果有这样的需求,1和2的区别,1的话效果不怎么美观,但是修改获取值简单,2获取值比较麻烦

    设置open的宽高
    在这里插入图片描述

    13、日期和时间

    13.1、给指定元素添加日期

    在这里插入图片描述

    在这里插入图片描述
    目前只能输入年月份,如何输入其他时间?
    在这里插入图片描述
    在这里插入图片描述

    13.2、日期范围

    我们有时候需要日期的范围
    在这里插入图片描述
    在这里插入图片描述
    这样,是没有办法向后台传数据的

    可是使用两个div进行传入

    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">日期范围</label>
        <div class="layui-inline" id="test-range">
          <div class="layui-input-inline">
            <input type="text" id="startDate" class="layui-input" placeholder="开始日期">
          </div>
          <div class="layui-form-mid">-</div>
          <div class="layui-input-inline">
            <input type="text" id="endDate" class="layui-input" placeholder="结束日期">
          </div>
        </div>
      </div>
    </div>
    <script> 
    laydate.render({ 
      elem: '#test-range' //开始时间和结束时间所在 input 框的父选择器
      //设置开始日期、日期日期的 input 选择器
      ,range: ['#startDate', '#endDate'] //数组格式为 layui 2.6.6 开始新增
    });
    </script> 
    

    终于写完了,没想到写了这么久。我发现自身的约束力真的是不怎么好,国庆七天,本来打算复习Java的,结果我玩了六天,昨天周日,我本来打算恶补的,却发现看小说,看了一天,我的自制力太差了,没办法,有些时候,小说和游戏确实很吸引人,但是我还有一个月就毕业了,要说我现在的编程能力强吧,倒也不是很强,要说不强吧,那是真不强,但基本的更删改查还是可以的,但是想进大厂,拿高薪,毕竟,学这个大都是为了高新,看来我必须克制了一段时间了,等工作之后,我在好好玩吧!!!毕竟要给自己一些动力,只能先欺骗自己,如果有兄弟看到这些话,请忽略,因为我初来新的城市,还没知心朋友,但又不吐不快,所以只能在这属于自己的一方小天地发一下牢骚,另外如果有兄弟,觉得我写的不好的话,也请不要在意,因为这是我的个人笔记,设置私密的话,找起来会很麻烦,这里面有些内容我懂,所以没有写的这么详细,如果不算我其他时间,就单纯写这篇文章,加起来的有一整天!我的天,凌晨5:30了,熬了一个通宵,白天我怎么办,天啊

    展开全文
  • layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTMLCSSI)S的书写与组织形式,门槛极低,拿来即用。 由国人开发,16年出厂的框架,其主要提供了很多好看、方便的样式,并且基本拿来即用,和...

    视频出处 爱代码的念小安
    layui官网

    1.主要内容

    在这里插入图片描述

    2.LayUl的安装及使用

    2.1.LayUl的介绍

    layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTMLCSSI)S的书写与组织形式,门槛极低,拿来即用。

    由国人开发,16年出厂的框架,其主要提供了很多好看、方便的样式,并且基本拿来即用,和Bootstrap有些相似,但该框架有个极大的好处就是定义了很多前后端交互的样式接口,如分页表格,只需在前端配置好接口,后端则按照定义好的接口规则返回数据,即可完成页面的展示,极大减少了后端人员的开发成本。
    官网: https://www.layui.com
    官方文档: https://www.layui.com/doc/

    2.2.LayUI的特点

    (1) layui属于轻量级框架,简单美观。适用于开发后端模式,它在服务端页面上有非常好的效果。
    (2) layui是提供给后端开发入员的ui框架,基于DOM驱动。

    2.3.下载与使用

    1.在官网首页下载到layui的最新版,目录结构如下:
    在这里插入图片描述
    2.获得layui后,将其完整的部署(拷贝到项目中)在你的项目目录中,你只需要引入以下两个文件。

    • layui.css
    • layui.js
      在这里插入图片描述

    3.基本的入门页面

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- layui 的核心 css文件 -->
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
        <!-- layui 的核心 Js 文件(采用模块化引入) -->
        <script src="../layui/layui.js"></script>
    </head>
    <body>
        <script>
            layui.use(['layer', 'form'], function () {
                let layer = layui.layer;
                let form = layui.form;
                layer.msg("Hello world!")
            });
        </script>
    </body>
    </html>
    

    在这里插入图片描述
    4.还需要声明需要使用的模块和回调函数。参照官方文档,选择自己想要的效果就行。
    比如:

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

    3.页面元素

    3.1.布局

    3.1.1.布局容器

    3.1.1.1.固定宽度
    将栅格放入一个带有 class="layui-container”的特定的容器中,以便在小屏幕以上的设备中固定宽度,让列可控。
    3.1.1.2.完整宽度
    可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid”的容器中,那么宽度将不会固定,而是100%适应

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
        <script src="../layui/layui.js"></script>
    </head>
    <body>
        <!-- 
            布局容器
                1.固定宽度(两侧有留白效果)
                2.完整宽度
         -->
        <!-- 固定宽度(两侧有留白效果) -->
        <div class="layui-main" style="background-color: burlywood;height: 300px;text-align: center;line-height: 300px;">
            我是固定宽度,class 可以是 layui-container ——width是1170px||
            layui-main ——width是1140px
        </div>
        <div class="layui-fluid" style="background-color: cornflowerblue; height: 300px;">
        </div>
    </body>
    </html>
    

    在这里插入图片描述

    3.1.2.栅格系统

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

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

    2.采用类似layui-col-md*这样的预设类来定义一组列(column),且放在行(row)内。其中:

    • 变量md代表的是不同屏幕下的标记
    • 变量*代表的是该列所占用的12等分数(如6/12),可选值为1-12
    • 如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起
      一行。

    3.列可以同时出现最多四种不同的组合,分别是:xs (超小屏幕,如手机) 、sm (小屏幕,如平板)、 md(桌面中等屏幕)、lg(桌面大型屏幕)。
    4. 可对列追加类似layui-col-space5 、 layui-col-md-offset3这样的预设类来定义列的间距和偏移。5.可以在列(column)元素中放入你自己的任意元素填充内容

    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
    
    </head>
    
    <body>
        <!-- 
            栅格系统
                1.定义行  .layui-row
                2.定义列  .layui-col-md*
         -->
        <!-- 布局容器 -->
        <div class="layui-container">
            <!-- 自定义行 -->
            <div class="layui-row">
                <!-- 定义列 -->
                <div class="layui-col-md5" style="background-color: crimson;text-align: center;">内容占父元素5/12</div>
                <div class="layui-col-md7" style="background-color: rgb(157, 20, 220);text-align: center;">内容占父元素7/12</div>
            </div>
            <div class="layui-row">
                <!-- 定义列 -->
                <div class="layui-col-md5" style="background-color: crimson;text-align: center;">内容占父元素5/12</div>
                <div class="layui-col-md7" style="background-color: rgb(157, 20, 220);text-align: center;">内容占父元素7/12</div>
                <div class="layui-col-md7" style="background-color: rgb(157, 20, 220);text-align: center;">内容占父元素7/12</div>
            </div>
        </div>
    </body>
    </html>
    

    每个layui-row下的layui-col-md*总和大于12份,会另起一行放剩余的子元素。
    在这里插入图片描述
    3.1.2.2.响应式规则
    栅格的响应式能力,得益于cSs3媒体查询((Media Queries)的强力支持,从而针对四类不同尺寸的屏幕,进行相应的适配处理。
    在这里插入图片描述

     <div class="layui-container">
            <h1>平板、桌面端的不同表现:</h1>
            <div class="layui-row">
                <div class="layui-col-sm6 layui-col-md4" style="background-color: thistle">平板≥768p×: 6/12
                    |桌面端=992px:4/12
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-sm4 layui-col-md6 " style="background-color: mediumaquamarine ; ">平板≥768px:
                    4/12|桌面端≥992px:6/12
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-sm12 layui-col-md8" style="background-color : coral">平板=768px:12/12
                    |桌面端≥992px: 8/12</div>
            </div>
        </div>
    

    在这里插入图片描述

    在这里插入图片描述
    3.1.2.3.列边距
    通过“列间距"的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距,预设了12种不同尺寸的边距,分别是︰

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

    示例

        <div class="layui-container">
            <h1>列边距</div>
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md4">
                    <div style="background-color: rgb(218, 102, 179);">4</div>
                </div>
                <div class="layui-col-md4" style="background-color: rgb(121, 218, 218);">4</div>
                <div class="layui-col-md4" style="background-color: rgb(117, 111, 111);">4</div>
                <div class="layui-col-md4"></div>
            </div>
    
    

    运行结果:
    在这里插入图片描述

    注:

    1. layui-col-space︰设置后不起作用主要是因为设置的是padding,也就是说是向内缩,所以设置背景色padding也是会添上颜色,看起来好像没有间距一样。可以在里面在加一个div,来达到目的。
    2. 间距一般不高于30px,如果超过30,建议使用列偏移。

    3.1.2.4.列偏移
    对列追加类似layui-col-md-offset的预设类,从而让列向右偏移。其中号代表的是偏移占据的列数,可选中为1 -12。
    如: layui-col-md-offset3 ,即代表在“中型桌面屏幕”下,让该列向右偏移3个列宽度

        <div class="layui-container">
            <h1>列偏移</div>
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md4" style="background-color: rgb(62, 175, 40);">4</div>
                <div class="layui-col-md4 layui-col-md-offset4" style="background-color: rgb(180, 55, 55);">4</div>
            </div>
        </div>
    
    

    运行结果
    在这里插入图片描述
    注︰列偏移可针对不同屏幕的标准进行设定,在当前设定的屏幕下有效,当低于桌面屏幕的规定的临界值,就会堆叠排列。
    3.1.2.5.列嵌套
    可以对栅格进行无穷层次的嵌套。在列元素( layui-col-md*)中插入行元素( layui-row ) ,即可完成嵌套。

      <div class="layui-container">
            <h1>列嵌套</h1>
            <div class="layui-row layui-col-space10">
    
                <div class="layui-col-md4" style="background-color: rgb(62, 175, 40);">
                    <div class="layui-row">
    
                        <div class="layui-col-md4" style="background-color: rgb(219, 224, 218);">内部类1</div>
                        <div class="layui-col-md4 " style="background-color: rgb(102, 83, 83);">内部类2
                        </div>
                        <div class="layui-col-md4 " style="background-color: rgb(218, 101, 101);">内部类3
                        </div>
    
                    </div>
                </div>
                <div class="layui-col-md4 layui-col-md-offset4" style="background-color: rgb(180, 55, 55);">4</div>
            </div>
        </div>
    

    3.2.基本元素

    3.2.1.按钮

    3.2.1.1.用法
    向任意HTML元素设定class="layui-btn”,建立一个基础按钮。通过追加格式为layui-btn-[type}的class来定义其它按钮风格。

    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
    
    </head>
    
    <body>
    
        <div class="layui-container">
            <h1>基础按钮</h1>
            <button type="button" class="layui-btn">一个标准的按钮(button)</button>
            <div class="layui-btn">一个按钮(div)</div>
            <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮(a)</a>
        </div>
        <hr>
    
        <div class="layui-container">
            <!-- 不同主题的按钮 -->
            <h1>不同主题的按钮</h1>
            <button class="layui-btn ">默认按钮</button>
            <button class="layui-btn layui-btn-primary">原始按钮</button>
            <button class="layui-btn layui-btn-normal">百搭按钮</button>
            <button class="layui-btn layui-btn-warm">暖色按钮</button>
            <button class="layui-btn layui-btn-danger">警告按钮</button>
        </div>
        
        <hr>
        <div class="layui-container">
            <!-- 不同大小的按钮 -->
            <h1>不同大小的按钮</h1>
            <button class="layui-btn layui-btn-lg">大型按钮</button>
            <button class="layui-btn layui-btn-primary">默认按钮</button>
            <button class="layui-btn layui-btn-sm">小型按钮</button>
            <button class="layui-btn layui-btn-xs">迷你按钮</button>
        </div>
        
        <hr>
        <div class="layui-container">
            <!-- 圆角按钮 -->
            <h1> 圆角按钮</h1>
            <button class="layui-btn layui-btn-radius">默认按钮</button>
            <button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
            <button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
            <button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
            <button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
        </div>
    
        <hr>
        <div class="layui-container">
            <h1>图标按钮</h1>
            <button class="layui-btn layui-btn-lg layui-btn-warm"><i class="layui-icon ">&#xe68f;关注</i></button>
            <button class="layui-btn layui-btn-lg layui-btn-danger"><i class="layui-icon layui-icon-logout">关注</i></button>
        </div>
    </body>
    
    </html>
    

    运行结果:
    在这里插入图片描述

    3.2.2.导航

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

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

    2.依赖加载模块

        <script type="text/javascript">
            //导航 依赖于elemet 模块
            layui.use('element', function () {
                var element = layui.element;
            });
    
        </script>
    

    3.显示指定类型的导航

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
        <script src="../layui/layui.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            //导航 依赖于elemet 模块
            layui.use('element', function () {
                var element = layui.element;
            });
        </script>
        <!-- 
       导航
          水平导航layui-nav
             layui-nav-item表示的是导航的子项
             layui-this表示 当前被选中的项
             layui-nav-child表示动是二级菜单垂直导航
             layui-nav layui-nav-tree
          侧边导航 layui-nav layui-nav-tree layui-nav-side
          导航的主题颜色
                layui-bg-颜色
                      墨绿molv 藏青cyan 艳蓝blue
          面包肥式导航
               layui- breadcrumb
                通过lay-separator-”符号”设置面包同导航的分割符
            -->
    
        <!-- 水平导航 layui-nav -->
        <ul class="layui-nav" style="margin-left: 300px;">
            <li class="layui-nav-item"><a href="#">最新活动</a></li>
            <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>
                <dl class="layui-nav-child">
                    <dd><a href="#">移动模块</a></dd>
                    <dd><a href="#">后台模板</a></dd>
                    <dd><a href="#">电商平台</a></dd>
                </dl>
    
            </li>
        </ul>
    
    
        <!-- 垂直导航 layui-nav -->
        <ul class="layui-nav layui-nav-tree" style="margin-left: 300px;margin-top: 200px;">
            <li class="layui-nav-item"><a href="#">最新活动</a></li>
            <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>
                <dl class="layui-nav-child">
                    <dd><a href="#">移动模块</a></dd>
                    <dd><a href="#">后台模板</a></dd>
                    <dd><a href="#">电商平台</a></dd>
                </dl>
            </li>
        </ul>
    
    
        <!-- 侧边导航栏 -->
        <ul class="layui-nav layui-nav-tree layui-nav-side">
            <li class="layui-nav-item"><a href="#">最新活动</a></li>
            <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>
                <dl class="layui-nav-child">
                    <dd><a href="#">移动模块</a></dd>
                    <dd><a href="#">后台模板</a></dd>
                    <dd><a href="#">电商平台</a></dd>
                </dl>
            </li>
        </ul>
        </div>
    
        <!-- 面板导航栏 -->
        <span class="layui-breadcrumb " lay-separator="|" style="margin-top: 450px;margin-left: 600px;">
            <a href="">首页</a>
            <a href="">国际新闻</a>
            <a href="">亚太地区</a>
            <a><cite>正文</cite></a>
        </span>
    
    </body>
    
    </html>
    

    运行结果
    在这里插入图片描述

    3.2.4.表格

    3.2.4.1.常规用法
    3.2.4.2.基础属性
    在这里插入图片描述

    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表格</title>
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
        <script type="text/script" src="../layui/layui.js"></script>
    </head>
    
    <body>
        <!--
               表格
               表格
                  class="layui-table""常用属性
                  lay-even如果设置了该风性,则可以显示隔行换色的效果
                  lay-skin设置表格边框风格
                       line(行行1风格)row(列边框风格)nob(无边框风格)
                  lay-size设置表格的尺寸
                       sm(小尺寸)  lg(大尺寸)
    
             -->
        <div class="layui-container layui-row">
            <div class="layui-col-md2">&nbsp;</div>
            <div class="layui-col-md8">
                <table class="layui-table" lay-even lay-skin="line" lay-size="lg">
                    <colgroup>
                        <col width="100">
                        <col width="200">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>名字</th>
                            <th>密码</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>joy</td>
                            <td>123456</td>
                            <td>我是中国人</td>
                        </tr>
                        <tr>
                            <td>tom</td>
                            <td>123456</td>
                            <td>我是中华子孙</td>
                        </tr>
                        <tr>
                            <td>joy</td>
                            <td>123456</td>
                            <td>我来了</td>
                        </tr>
    
                    </tbody>
                </table>
            </div>
            <div class="layui-col-md2">&nbsp;</div>
        </div>
    </body>
    
    </html>
    

    运行结果
    在这里插入图片描述

    3.2.5.表单

    依赖加载模块:form
    1.在一个容器中设定class="layui-form”来标识一个表单元素块

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

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

                    <div class="layui-form-item">
                        <label class="layui-form-label">密码:</label>
                        <div class="layui-input-block">
                            原始表单元素区域
                        </div>
                    </div>
    

    3.2.5.1.输入框

    <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类
    3.2.5.2.下拉选择框

    <select name= "city" lay-verify="">
    <option value="">请选择一个城市</ option><option value="010">北京</option>
    <option value="021">上海</option><option value="0571">杭州</ option>< / select>
    
    • 属性selected可设定默认项
    • 属性disabled开启禁用,select和option标签都支持
    <select name="city" lay-verify="">
    <option value="010">北京</option>
    <option value="021" disabled>上海(禁用效果)</option><option value="0571" selected>杭州</option>
    </ select>
    
    • 可以通过optgroup标签给select分组
    • 通过设定属性lay-search来开启搜索匹配功能
    <select name= "city" lay-verify="" lay-search><option value="010">layer</option>
    <option value="021">form< / option>
    <option value="0571" selected>layim</ option>< / select>
    

    3.2.5.3.复选框

    <h2>默认风格:</h2>
    <input type=" checkbox" name="" title="写作” checked><input type="checkbox" name="" title="发呆">
    <input type="checkbox" name="" title="禁用" disabled>
    <h2>原始风格: </h2>
    <input type=" checkbox" name="" title="写作”lay-skin="primary" ><input type="checkbox" name="" title="发呆"lay-skin="primary">
    <input type=" checkbox" name="" title="禁用”lay-skin="primary" disabled>
    

    运行结果:
    在这里插入图片描述

    • 属性title可自定义文本(温馨提示:如果只想显示复选框,可以不用设置title)
    • 属性checked可设定默认选中
    • 属性lay-skin可设置复选框的风格(原始风格:lay-skin=“primary”)·
    • 设置value="1”可自定义值,否则选中时返回的就是默认的on

    3.2.5.4.开关
    将复选框checkbox,通过设定lay-skin="switch”形成了开关风格

        <div class="layui-form-item">
                        <label class="layui-form-label">我是开关</label>
    
                        <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>
    
                    </div>
    

    在这里插入图片描述

    • 属性checked可设定默认开
    • 属性disabled开启禁用
    • 属性lay-text可自定义开关两种状态的文本(两种文本用"”隔开)·设置value="1”可自定义值,否则选中时返回的就是默认的on

    3.2.5.5.单选框

    • 属性disabled开启禁用
    • 设置value="xxx”可自定义值,否则选中时返回的就是默认的on
              <div class="layui-form-item">
                        <label class="layui-form-label">我是单选框</label>
                        <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>
    

    3.2.5.6.文本域

     <div class="layui-form-item">
                        <label class="layui-form-label">我是文本域</label>
                        <textarea name="remark" required lay-verify=" required" placeholder="请输入个人介绍"
                            class="layui-textarea"></textarea>
                    </div>
    

    在这里插入图片描述

    • class=“layui-textarea” : layui.css提供的通用CSS类
      3.2.5.7.组装行内表单
    <div class=" layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">范围</ label>
    <div class="layui-input-inline" style="width : 188px; "><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: 10epx ; "><input type="text" name="price_max" placeholder=" ¥“
    autocomplete="off" class="layui-input">
    </ div>
    </div>
    </ div>
    

    .class=“layui-inline”︰:定义外层行内. class=“layui-input-inline”:定义内层行内
    在这里插入图片描述
    3.2.5.8.忽略美化渲染
    可以对表单元素增加属性lay-ignore设置后,将不会对该标签进行美化渲染,即保留系统风格。

    <input type="radio" name="sex" value="nan" title="" lay-ignore>
    

    3.2.5.9.表单方框风格
    通过追加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></ d**加粗样式**iv>
    </div></form>
    

    在这里插入图片描述

    3.3.1.弹出层

    模块加载名称:layer ,独立版本: layer.layui.com
    3.3.1.1.使用场景
    由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

    场景用前准备调用方式
    1.作为独立组件使用如果你只是单独想使用layer,你可以去 layer独立版本官网下载组件包。你需要在你的页面引入jQuery 1.8以上的任意版本,并引入layer.js 。通过script标签引入layer.js后,直接用即可。
    2. layui模块化使用如果你使用的是layui,那么你直接在官网下载layui框架即可,无需引入jQuery 和layer.js,但需要引入layui.css 和layui.js通过layui.use('layer,callback)加载模块

    方式一:

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>弹出层</title>
        <link rel="stylesheet" rel="text/css" href="../layui/layer/layer.css">
        <script type="text/javascript" src="../layui/js/jquery-3.5.1.js"></script>
        <script type="text/javascript" src="../layui/layer/layer.js"></script>
    </head>
    <body>
        <!-- 两种使用方式
                 1.作为独立组件使用 | 如果你只是单独想使用layer,你可以去 layer独立版本官网下载组件包。你需要在你的页面引入jQuery 1.8以上的任意版本,并引入layer.js 。| 通过script标签引入layer.js后,直接用即可。 
                 2. layui模块化使用 | 如果你使用的是layui,那么你直接在官网下载layui框架即可,无需引入jQuery 和layer.js,但需要引入layui.css 和layui.js | 通过layui.use('layer,callback)加载模块
        
        -->
        <script type="text/javascript">
            //使用layer   弹出层
            layer.msg("Hello!");        
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    方式二:

    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>弹出层</title>
    
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
        <script type="text/javascript" src="../layui/layui.js"></script>
    </head>
    <body>
        <!-- 两种使用方式
                 1.作为独立组件使用 | 如果你只是单独想使用layer,你可以去 layer独立版本官网下载组件包。你需要在你的页面引入jQuery 1.8以上的任意版本,并引入layer.js 。| 通过script标签引入layer.js后,直接用即可。 
                 2. layui模块化使用 | 如果你使用的是layui,那么你直接在官网下载layui框架即可,无需引入jQuery 和layer.js,但需要引入layui.css 和layui.js | 通过layui.use('layer,callback)加载模块
        -->
        <script type="text/javascript">
            layui.use("layer", function () {
                let layer = layui.layer;
                //使用layer 弹出层
                layer.msg("Hello!")
            });
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    3.3.1.2.基础参数

    1. type -基本层类型

       类型:Number,默认:日
       可传入的值有:
       (信息框,默认)
       1 (页面层)
       2 (iframe层)
       3 (加载层)
       4 (tips层)
      
    2. title -标题

    类型:String/Array / Boolean,默认︰'信息'
    title支持三种类型的值:
    若传入的是普通的字符串,如 title : '我是标题',那么只会改变标题文本;
    若需要自定义样式,可以title:[ '文本', 'font-size:18px;'],数组第二项可以写任意css样式;若你不想显示标题栏,可以title : false;
    
    1. content -内容
    类型:String/DOM/ Array,默认: '"
    content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM。
    

    信息框

        <script type="text/javascript">
            //使用layer   弹出层
            // layer.msg("Hello!")
            layui.use("layer", function () {
                let layer = layui.layer;
                //使用layer 弹出层
    
                // 信息框
                layer.open(
                    {
                        type: 0,//type为0代表信息框
                        title: false,
                        title: ['我是标题', 'color:red;font-size:20px;'],
                        content: "我是内容——hello",
                    }
                );
            });
    
    
    
        </script>
    

    在这里插入图片描述

    页面层

        <script type="text/javascript">
            //使用layer   弹出层
            // layer.msg("Hello!")
            layui.use("layer", function () {
                let layer = layui.layer;
                //使用layer 弹出层
    
                // 信息框
                layer.open(
                    {
                        type: 1,//type为1代表页面层
                        title: false,
                        title: ['我是标题', 'color:red;font-size:20px;'],
                        content: "我是内容——hello",
                    }
                );
            });
    
    
    
        </script>
    

    在这里插入图片描述
    frame层

    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>弹出层</title>
        <!-- <link rel="stylesheet" rel="text/css" href="../layui/layer/layer.css">
        <script type="text/javascript" src="../layui/js/jquery-3.5.1.js"></script>
        <script type="text/javascript" src="../layui/layer/layer.js"></script> -->
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
        <script type="text/javascript" src="../layui/layui.js"></script>
    </head>
    
    
    
    <body>
        <!-- 两种使用方式
                 1.作为独立组件使用 | 如果你只是单独想使用layer,你可以去 layer独立版本官网下载组件包。你需要在你的页面引入jQuery 1.8以上的任意版本,并引入layer.js 。| 通过script标签引入layer.js后,直接用即可。 
                 2. layui模块化使用 | 如果你使用的是layui,那么你直接在官网下载layui框架即可,无需引入jQuery 和layer.js,但需要引入layui.css 和layui.js | 通过layui.use('layer,callback)加载模块
        
        -->
        <script type="text/javascript">
            //使用layer   弹出层
            // layer.msg("Hello!")
            layui.use("layer", function () {
                let layer = layui.layer;
                //使用layer 弹出层
             
                layer.open(
                    {
                        type: 2,//type为2代表frame
                        title: ['我是frame'],
                        content: 'http://www.baidu.com',
                        area: ['500px', '300px']
    
                    }
                );
            });
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    <body>
      
        <script type="text/javascript">
            //使用layer   弹出层
            // layer.msg("Hello!")
            layui.use("layer", function () {
                let layer = layui.layer;
                //使用layer 弹出层
    
    
                layer.open({
                    type: 4,//type为4代表tips层
                    content: ['内容', '#box1']
    
    
                })
    
    
            });
    
        </script>
    
        <div id="box1" style="margin: 100px;">dsaf</div>
    
    </body>
    

    在这里插入图片描述
    4. area -宽高
    类型:String /Array,默认: “auto”
    在默认状态下,layer是宽高都自适应的。
    当定义宽度时,你可以area: ‘588px’,高度仍然是自适应的。当宽高都要定义时,你可以area: [ '508px ', ‘300px’]。
    5.icon -图标
    注:信息框和加载层的私有参数。
    类型:Number,默认: -1(信息框)/日 (加载层)

            layer.msg("你愿意跟我做朋友吗?", {
                    time: 0,//不关闭
                    btn: ['当然愿意', '残忍拒绝'],
                    yes: function (index) {
                        layer.close(index);
                        layer.msg('新朋友,你好!', {
                            icon: 6,
                            btn: ['开心', '快乐']
                        })
                    },
                })
            });
    

    在这里插入图片描述

    更多内容请参考官网layer

    3.3.2.日期与时间选择

    模块加载名称:laydate ,独立版本: http://www.layui.com/laydate/
    layDate包含了大量的更新,其中主要以︰年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式。
    3.3.2.1.快速使用
    和layer一样,可以在layui中使用layDate,也可直接使用layDate独立版,请按照实际需求来选择。
    在这里插入图片描述

    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>日期与时间选择</title>
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
        <script type="text/javascript" src="../layui/layui.js"></script>
    </head>
    
    <body>
        <div class="layui-inline">
            <input type="text" class="layui-input" id="date1">
        </div>
        <script>
            layui.use('laydate', function () {
    
                let laydate = layui.laydate;
                //执行一个laydate实例
                laydate.render({
                    elem: '#date1'
                });
            });
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    3.3.2.2.基础参数

    1.elem -绑定元素
    类型:String/DOM,默认值:无
    必填项,用于绑定执行日期渲染的元素,值一般为选择器,或DOM对象
    laydate.render( {
    elem: ‘#test’//或elem: document.getElementById( ’ test’)、elem: lay( ’ #test’)等});
    2. type -控件选择类型
    类型:String,默认值:date
    用于单独提供不同的选择器类型,可选值如下表:
    在这里插入图片描述

        <script>
            layui.use('laydate', function () {
    
                let laydate = layui.laydate;
                //执行一个laydate实例
                laydate.render({
                    elem: '#date1' //默认为 年+月+日
                });
                laydate.render({
                    elem: '#date2',
                    type: 'year'   //年
                });
                laydate.render({
                    elem: '#date3',
                    type: 'month'  //年+月
                });
                laydate.render({
                    elem: '#date4',
                    type: 'date'   //年+月+日
                });
                laydate.render({
                    elem: '#date5',
                    type: 'time'   // 时+分+秒
                });
                laydate.render({
                    elem: '#date6',
                    type: 'datetime'//年+月+日+时+分+秒
                });
            });
        </script>
    

    在这里插入图片描述
    3. format -自定义格式
    类型:String,默认值:yyyy-MM-dd
    通过日期时间各自的格式符和长度,来设定一个你所需要的日期格式。layDate 支持的格式如下:
    在这里插入图片描述
    4. value-初始值
    类型:String,默认值:new Date()
    支持传入符合format参数设定的日期格式字符,或者new Date( )

    <script>
       laydate.render({
                    elem: '#date7',
                    type: 'datetime',//年+月+日+时+分+秒
                    format: "yyyy/MM/dd HH:mm:ss",
                    value: new Date()
                });
    
    
            });
        </script>
    

    在这里插入图片描述

    3.3.3.分页

    模块加载名称:laypage
    3.3.3.1.快速使用
    laypage的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。

    3.3.3.2.基础参数
    通过核心方法: laypage.render(options)来设置基础参数。
    查看官网 基础参数选项
    3.3.3.3 jump - 切换分页的回调
    当分页被切换时触发,函数返回两个参数:obj(当前分页的所有选项值)、first(是否首次,一般用于初始加载的判断)

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
        <script type="text/javascript" src="../layui/layui.js"></script>
    </head>
    <body>
        <div id="page"></div>
        <script type="text/javascript">
            //加载laypage模块
            layui.use('laypage', function () {
                let laypage = layui.laypage;
                //加载laypage实例
                laypage.render({
                    elem: 'page',//elem 属性绑定的是容器的ID属性值,不需要加#
                    count: 100,//总数量  ,一般从服务器获取
                    limit: 5,//每页显示的个数
                    limits: [5, 10, 20, 30],//每页条数的选择项
                    layout: ['prev', 'page', 'next', 'limit', 'count'],// 自定义排版默认是['prev','page','next']
                    groups: 10,//连续显示的页码数
                    jump: function (obj, first) {
                        console.log(obj)
                        if(!first){//首次不执行
                          //do something
                        }
                    }
                });
            });
        </script>
    </body>
    </html>
    

    3.3.4.数据表格

    由于浏览器不允许表格直接请求json数据,数据表格的学习是通过部署在tomocat上进行的。

    模块加载名称:table
    3.3.4.1.快速使用
    创建一个table实例最简单的方式是,在页面放置一个元素
    ,然后通过table.render()方法指定该容器。

    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>数据表格</title>
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
        <script type="text/javascript" src="../layui/layui.js"></script>
    </head>
    
    <body>
        <table id="demo"></table>
        <hr>
        <!-- 方法渲染 -->
        <!-- 准备容器(标签) -->
        <table id="demo2"></table>
    
        <script type="text/javascript">
            layui.use('table', function () {
                let table = layui.table;
    
                //加载table 实例
                table.render({
                    elem: '#demo2',//elem属性用来绑定容器的id的属性值
                    url: "user.json",//数据接口
                    cols: [[//表头
                        { field: 'id', title: '用户编号', sort: 'true', width: 120 },
                        { field: 'username', title: '用户姓名', sort: 'true', width: 120 },
                        { field: 'sex', title: '性别', sort: 'true', width: 80 },
                        { field: 'city', title: '城市', sort: 'true', width: 100 },
                        { field: 'sign', title: '签名', sort: 'true', width: 100 },
    
    
    
                    ]],
                    height: 315,
                    page: true
                });
    
    
                table.render({
    
    
    
    
    
                })
    
            })
        </script>
    
    </body>
    
    </html>
    

    表格所用的user.json

    {
      "code": 0,
      "msg": "",
      "count": 1000,
      "data": [
        {
          "id": 10000,
          "username": "user-0",
          "sex": "女",
          "city": "城市-0",
          "sign": "签名-0",
          "experience": 255,
          "logins": 24,
          "wealth": 82830700,
          "classify": "作家",
          "score": 57
        },
        {
          "id": 10001,
          "username": "user-1",
          "sex": "男",
          "city": "城市-1",
          "sign": "签名-1",
          "experience": 884,
          "logins": 58,
          "wealth": 64928690,
          "classify": "词人",
          "score": 27
        },
        {
          "id": 10002,
          "username": "user-2",
          "sex": "女",
          "city": "城市-2",
          "sign": "签名-2",
          "experience": 650,
          "logins": 77,
          "wealth": 6298078,
          "classify": "酱油",
          "score": 31
        },
        {
          "id": 10003,
          "username": "user-3",
          "sex": "女",
          "city": "城市-3",
          "sign": "签名-3",
          "experience": 362,
          "logins": 157,
          "wealth": 37117017,
          "classify": "诗人",
          "score": 68
        },
        {
          "id": 10004,
          "username": "user-4",
          "sex": "男",
          "city": "城市-4",
          "sign": "签名-4",
          "experience": 807,
          "logins": 51,
          "wealth": 76263262,
          "classify": "作家",
          "score": 6
        },
        {
          "id": 10005,
          "username": "user-5",
          "sex": "女",
          "city": "城市-5",
          "sign": "签名-5",
          "experience": 173,
          "logins": 68,
          "wealth": 60344147,
          "classify": "作家",
          "score": 87
        },
        {
          "id": 10006,
          "username": "user-6",
          "sex": "女",
          "city": "城市-6",
          "sign": "签名-6",
          "experience": 982,
          "logins": 37,
          "wealth": 57768166,
          "classify": "作家",
          "score": 34
        },
        {
          "id": 10007,
          "username": "user-7",
          "sex": "男",
          "city": "城市-7",
          "sign": "签名-7",
          "experience": 727,
          "logins": 150,
          "wealth": 82030578,
          "classify": "作家",
          "score": 28
        },
        {
          "id": 10008,
          "username": "user-8",
          "sex": "男",
          "city": "城市-8",
          "sign": "签名-8",
          "experience": 951,
          "logins": 133,
          "wealth": 16503371,
          "classify": "词人",
          "score": 14
        },
        {
          "id": 10009,
          "username": "user-9",
          "sex": "女",
          "city": "城市-9",
          "sign": "签名-9",
          "experience": 484,
          "logins": 25,
          "wealth": 86801934,
          "classify": "词人",
          "score": 75
        }
      ]
    }
    

    很多时候,您接口返回的数据格式并不一定都符合 table 默认规定的格式,
    那么你需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式 前往官网了解更多
    在这里插入图片描述

    在这里插入图片描述

    3.3.4.2.三种初始化渲染方式

    机制适用场景 
    方法渲染用JS方法的配置完成渲染(推荐)无需写过多的HTML,在JS中指定原始元素,再设定各项参数即可。
    自动渲染HTML配置,自动渲染无需写过多JS,可专注于HTML表头部分
    转换静态表格转化一段已有的表格元素无需配置数据接口,在JS中指定表格元素,并简单地给表头加上自定义属性即可

    3.3.4.3.方法渲染
    1.将基础参数的设定放在了JS代码中,且原始的table标签只需要一个选择器

    同上示例
    注: table.render()方法返回一个对象: var tablelns = table.render(options),可用于对当前表格进行“重载”等操作。
    3.3.4.4.自动渲染
    在一段table容器中配置好相应的参数,由table模块内部自动对其完成渲染,而无需你写初始的渲染方法。
    1)带有class=“layui-table”的标签。
    2)对标签设置属性lay-data=”“用于配置一些基础参数
    3)在标签中设置属性lay-data=”"用于配置表头信息

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
    <body>
    
    
    
    <!-- 自动渲染 -->
    <!-- 准备容器(标签) -->
    <table id="demo" class="layui-table" lay-data="{url:'layui/user.json',page:true}">
        <thead>
          <tr>
              <th lay-data="{field:'id',width:100}">ID</th>
              <th lay-data="{field:'username'}">用户名</th>
              <th lay-data="{field:'sex',sort:true}">性别</th>
          </tr>
        </thead>
    </table>
    <script type="text/javascript">
        layui.use('table', function () {
            let table = layui.table;
        })
    </script>
    </body>
    </html>
    
    

    在这里插入图片描述

    3.3.4.5.转换静态表格
    页面已经存在了一段有内容的表格,由原始的table标签组成,只需要赋予它一些动态元素。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
    <body>
    <!--转换静态表格 -->
    <!-- 准备容器(标签) -->
    <table lay-filter="demo">
        <thead>
          <tr>
              <th lay-data="{field:'id',width:100}">ID</th>
              <th lay-data="{field:'username'}">用户名</th>
              <th lay-data="{field:'sex',sort:true}">性别</th>
    
          </tr>
        </thead>
        <tbody>
           <tr>
               <td>44</td>
               <td>贤心</td>
               <td>人生就像是一场修行</td>
           </tr>
        </tbody>
    </table>
    
    <script type="text/javascript">
        layui.use('table', function () {
            let table = layui.table;
            //转换静态 表格
            table.init('demo',{
                height:315//设置高度
                //支持所有基础参数
    
            })})
    </script>
    
    </body>
    </html>
    

    在这里插入图片描述
    3.3.4.6.基础参数使用的场景

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

    前往官网查看更多
    3.3.4.8.开启头部工具栏
    3.3.4.9.开启单元格编辑

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
    <body>
    
    <table id="demo" lay-filter="test"></table>
    <hr>
    <!-- 方法渲染——开启工具栏 -->
    <!-- 准备容器(标签) -->
    <table id="demo2"></table>
    
    <!--表格工具栏-->
    <script type="text/html" id="toolbarDemo">
    
        <div class="layui-btn-container">
            <button class="layui-btn" lay-event="getCheckData">
                获取选中行数据
            </button>
            <button class="layui-btn" lay-event="getCheckLength">
                获取选中数目
            </button>
            <button class="layui-btn" lay-event="isAll">
                验证是否全选
            </button>
    
        </div>
    </script>
    <!--表头工具栏-->
    <script type="text/html" id="barDemo">
    
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    
    
    </script>
    
    <script type="text/javascript">
        layui.use('table', function () {
            let table = layui.table;
    
            //加载table 实例
            table.render({
                elem: '#demo',//elem属性用来绑定容器的id的属性值
                method: "post",
                url: "layui/user.json",//数据接口
                cols: [[//表头
                    //设置序列号
                    {field: 'aa', type: 'numbers'},
                    //设置复选框
                    {field: 'aa', type: 'checkbox'},
                    //设置单选框
                    {field: '', type: 'radio'},
                    //隐藏一列
                    {field: 'id', title: '用户编号', sort: 'true', width: 120, hide: true},
                    {field: 'username', title: '用户姓名', sort: 'true', width: 120,edit:'text'},
                    {field: 'sex', title: '性别', sort: 'true', width: 80},
                    {field: 'city', title: '城市', sort: 'true', width: 100,edit: 'text'},
                    {field: 'sign', title: '签名', sort: 'true', width: 200},
                    {field: "操作", toolbar: "#barDemo"}//开启单元格编辑
                ]],
                height: 315,
                limits: [2, 3, 5, 6, 10],
                page: true,//开启分页
                //设置表格工具栏
                toolbar: '#toolbarDemo'
            });
    
    
    
    
    
        })
    </script>
    </body>
    </html>
    

    在这里插入图片描述
    监听这些工具栏的事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
    <body>
    
    <table id="demo" lay-filter="test"></table>
    <hr>
    <!-- 方法渲染——开启工具栏 -->
    <!-- 准备容器(标签) -->
    <table id="demo2"></table>
    
    <!--表格工具栏-->
    <script type="text/html" id="toolbarDemo">
    
        <div class="layui-btn-container">
            <button class="layui-btn" lay-event="getCheckData">
                获取选中行数据
            </button>
            <button class="layui-btn" lay-event="getCheckLength">
                获取选中数目
            </button>
            <button class="layui-btn" lay-event="isAll">
                验证是否全选
            </button>
    
        </div>
    </script>
    <!--表头工具栏-->
    <script type="text/html" id="barDemo">
    
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    
    
    </script>
    
    <script type="text/javascript">
        layui.use('table', function () {
            let table = layui.table;
    
            //加载table 实例
            table.render({
                elem: '#demo',//elem属性用来绑定容器的id的属性值
                method: "post",
                url: "layui/user.json",//数据接口
                cols: [[//表头
                    //设置序列号
                    {field: 'aa', type: 'numbers'},
                    //设置复选框
                    {field: 'aa', type: 'checkbox'},
                    //设置单选框
                    {field: '', type: 'radio'},
                    //隐藏一列
                    {field: 'id', title: '用户编号', sort: 'true', width: 120, hide: true},
                    {field: 'username', title: '用户姓名', sort: 'true', width: 120,edit:'text'},
                    {field: 'sex', title: '性别', sort: 'true', width: 80},
                    {field: 'city', title: '城市', sort: 'true', width: 100,edit: 'text'},
                    {field: 'sign', title: '签名', sort: 'true', width: 200},
                    {field: "操作", toolbar: "#barDemo"}//开启单元格编辑
                ]],
                height: 315,
                limits: [2, 3, 5, 6, 10],
                page: true,//开启分页
                //设置表格工具栏
                toolbar: '#toolbarDemo'
            });
    
                    /*
                    * 头监听事件
                    *   语法:
                    *      table.on('toolbar(demo)',function(obj){});
                    *    注:demo表示的是容器上设置的lay-filter的属性值
                    *
                    * */
              table.on('toolbar(test)',function (obj){
                   console.log(obj);
                   //在obj.config对象中可以获取id属性值,即表示当前容器的ID属性值,也就是demo
                  // 获取当前表格被选中的对象,返回数据
                  let checkStatus=table.checkStatus(obj.config.id);
                  console.log(checkStatus);
                  //获取事件名 前提是你已经在工具栏中写入 lay-event="getCheckLength"
                  let eventName=obj.event;
                  //判断事件名,处理不同事件
                  switch (eventName){
                      case "getCheckData":
                          //获取被选中记录的数组
                          let arr1=checkStatus.data;
                          //将数组解析成字符串
                          layer.alert(JSON.stringify(arr1))
                          break;
                      case "getCheckLength":
    
                          //获取被选中记录的数组
                          let arr2=checkStatus.data;
                           layer.alert("选中了"+arr2.length+"条记录!")break;
                      case "isAll":
                      //通过checkStatus中的isAll属性判断
                          let flag=checkStatus.isAll;
                          if (flag){
                              layer.alert("全选")
                          }else {
                              layer.alert("未全选")
                          }
                          break;
                      default:
                          break;
                  }
              });
    
              /*
              * 监听工具栏事件
              * */
            table.on('tool(test)',function (obj){
                //得到当前操作行的相关信息
                let tr1=obj.data;
                // layer.msg(JSON.stringify(tr1))
                //得到事件名
                let eventName=obj.event; //只有指定了 lay-event="del"
                console.log(obj)
                //判断事件名,执行对应的方法
                if (eventName=='del'){//删除
                    //确认框
                    layer.confirm('确认删除吗?',function (index){
                        //删除指定 tr del();
                        obj.del();
                        //关闭弹出层(index是当前弹出层的下标)
                        layer.close(index);
                    })
                }else if (eventName=='edit'){//编辑
                   //输入框
                    layer.prompt(
                        {
                            //表单元素的类型 0=文本框 1=密码框 2=文本框
                            formType:0,
                            value:tr1.username,//设置输入框的值
                        },function (value,index){
                            //修改单元格的值
                            //value表示输入的值
                            obj.update({
                                username:value
                            });
                            //关闭弹出层
                            layer.close(index)
                        }
                    )
                }
            });
             /*
             * 监听单元格事件
             * 表格设置edit属性,单元格编辑类型(默认不开启)目前只支持:text(输入框)
             * */
             table.on('edit(test)',function (obj){
    
                 layer.msg(JSON.stringify(obj))
                 console.log(obj)
    
                 //修改后的值
                 let  value=obj.value
                 //得到当前修改的tr对象
                 let data=obj.data
                 //得到修改的字段名
                 let field =obj.field
                 layer.alert("【ID:"+data.id+"】 的"+field+"字段的值修改为"+value);
    
             })
        })
    </script>
    </body>
    </html>
    

    在这里插入图片描述
    3.3.4.10.数据表格的重载

    展开全文
  • 使用layui框架迅速搭建后台管理页面

    万次阅读 2018-09-01 08:52:26
    写在前面 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织...layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信...

    写在前面

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

    其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。

    准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

    材料准备

    1.进入layui官网下载layui资源包:https://www.layui.com

    这里写图片描述

    图1.layui官网

    代码书写

    后台管理界面如下图所示:

    这里写图片描述

    图2.后台界面效果图

    后台管理界面代码如下所示:

    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>后台管理面板</title>
      <link rel="stylesheet" href="css/layui.css">
    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo">后台管理面板</div>
        <!-- 头部区域(可配合layui已有的水平导航) -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item"><a href="">控制台</a></li>
          <li class="layui-nav-item"><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>
        </ul>
        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item">
            <a href="javascript:;">
              <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
              贤心
            </a>
            <dl class="layui-nav-child">
              <dd><a href="">基本资料</a></dd>
              <dd><a href="">安全设置</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
      </div>
    
      <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
          <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
          <ul class="layui-nav layui-nav-tree"  lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
              <a class="" href="javascript:;">所有商品</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;">列表一</a></dd>
                <dd><a href="javascript:;">列表二</a></dd>
                <dd><a href="javascript:;">列表三</a></dd>
                <dd><a href="">超链接</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">解决方案</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;">列表一</a></dd>
                <dd><a href="javascript:;">列表二</a></dd>
                <dd><a href="">超链接</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item"><a href="">云市场</a></li>
            <li class="layui-nav-item"><a href="">发布商品</a></li>
          </ul>
        </div>
      </div>
    
      <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">内容主体区域</div>
      </div>
    
      <div class="layui-footer">
        <!-- 底部固定区域 -->
        Copyright © 2018 idcs.vip All Rights Reserved.
      </div>
    </div>
    <script src="layui.js"></script>
    <script>
    //JavaScript代码区域
    layui.use('element', function(){
      var element = layui.element;
    
    });
    </script>
    </body>
    </html>

    其中css和js资源引用需要替换成自己的资源链接。

    参考资源

    更多内容可阅读layui官方文档https://www.layui.com/doc/


    作者:戴翔
    电子邮箱:daixiangcn@outlook.com


    展开全文
  • layui框架导入

    万次阅读 2017-05-26 15:12:21
    目录:  1.导入步骤  2.框架包含的组件 ... 1.1 下载框架包:http://www.layui.com/   1.2 将layer文件夹拷入项目位置  1.3 页面中导入layer.js和jq即可完成配置   2.框架包含的组件
    目录:
        1.导入步骤
        2.框架包含的组件

    1.导入步骤
        1.1 下载框架包: http://www.layui.com/ 

        1.2 将layui文件夹拷入项目位置

       1.3 页面中导入 layui.all.js layui.css jquery 即可完成配置
       
    1. <script type="application/javascript" src="jquery-3.2.1.js"></script>
    2. <script type="application/javascript" src="layui/lay/dest/layui.all.js"></script>
    3. <link rel="stylesheet" href="layui/css/layui.css">
    2.框架包含的组件
       
        2.1 页面元素
                    

        2.2 内置模块


            注意:layui 包含了layer,只是layer被独立出来成了一个单独的项目,如果只是需要layer的下载网址为:http://layer.layui.com/

            后面对框架中的组件进行逐一的学习使用。


     
    展开全文
  • Layui 父子页面间传递参数

    千次阅读 2020-07-13 19:39:38
    Layui拥有各式各样的后端模板,对于一个需要快速开发的后端系统无疑是雪中送炭,最近听见有小伙伴在使用layui与angularJS作为前段框架的时候在页面传参数的时候遇到了问题,今天我们就来总结一下,主要分为两种。...
  • Layui框架简介

    千次阅读 2019-09-27 11:00:54
    layui简介 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式...layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,...
  • Layui框架实现图片上传

    万次阅读 多人点赞 2019-08-02 17:05:47
    Layui框架实现图片上传 前言: 一直以来,图片上传总是件很麻烦的事。最近在学layui,发现layui真是极大简化了各种复杂的操作,避免了繁琐的开发。 layui图片上传和传统的图片上传不同,它并不予表单元素并存,而是...
  • layui 表单页面代码

    千次阅读 2017-10-19 09:19:46
    <!... < ...附上效果图,初次接触layui前台框架,感觉样式很清爽!! 专业墙纸贴纸厨房用具装饰出售,本人网店经营 博客对你有用记得访问下哦,增加下访问量,如有需要可以下单购买哦^_^。 ...
  • Alpaca-Spa-2.0 使用帮助简介Alpaca-spa-2.0.js 简介  Alpaca-spa.js是一款轻量的前端JS框架,提供前端路由功能,前端视图渲染功能,前端套页面功能。目的是用来提高web项目的开发效率,前后端分离开发,同时使...
  • Layui前端框架导航栏使用介绍

    千次阅读 2019-01-08 13:40:07
    Layui前端框架导航栏使用介绍
  • Layui框架学习

    2020-09-11 15:18:24
    从官方解释简单来说就是在页面中有一些动态的效果,当然不是我们说的动态网页那个动态,这些动态效果呢,就是通过我们去加载element模块以后,默认为页面的这些元素添加的一些动态效果,比如layui文档顶部的导航下部...
  • layui后台框架的搭建

    万次阅读 2018-03-11 19:35:35
    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写...layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。...
  • layui框架使用方法详解

    千次阅读 2019-01-07 15:15:10
    前言 首先我们先了解一下什么是layuilayui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即...layui框架结构 ├─css //css目录 │ ...
  • Layui框架引入

    2020-07-11 07:41:10
    使用步骤:在后台首页index.html下引入layui.js和layui.css 然后在html下写以下脚本 <script> layui.use("options",function(){}); </script> 第一个参数是一个数组,是使用哪些模块,例如,[‘form’,...
  • layui框架整理

    2021-01-14 15:53:18
    layui使用form表单实现post请求页面跳转 https://blog.csdn.net/souloflove21g/article/details/80346690 如果想用form表单进行post请求跳转,只能用这个方式了。所需要的参数在input里面加好,然后在上面做赋值就...
  • 官网:经典模块化前端框架 一、快速上手 1. 下载layui后引入两个文件到项目目录 ./layui/css/layui.css ./layui/layui.js //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.js 2. ...
  • Layui拥有各式各样的后端模板,对于一个需要快速开发的后端系统无疑是雪中送炭,最近听见有小伙伴在使用layui与angularJS作为前段框架的时候在页面传参数的时候遇到了问题,今天我们就来总结一下。 新的改变 我们对...
  • layUi框架入门篇(一)

    千次阅读 2017-09-01 21:08:36
    layUi框架学习笔记(一)整理人:LF时间:2017-9-1表示今天第一次听说了layui的前端框架,上网搜了很多的资料和图示,对比了一下自己辛辛苦苦写了十天的网页样式,最后不得不感叹前端框架的魅力,下定决心要好好学习...
  • 禁止程序重复启动采用线程互斥锁Mutex,在winform程序的主入口点中加入如下代码,将程序改为实例运行. static class Program { /// /// 应用程序的 ...SAP&lowbar;Web&lowbar;Service开发配置第一章SAP创建...
  • 学习layui框架感悟!

    2019-07-18 20:15:24
    大致从以下几个方面了解layui(类ui): 1.layer (有独立版本:layer.layui.com) 2.laydate(有独立版:http://www.layui.com/laydate/) 3.layim (独立版:layim.layui.com) 3.layui (官网:https://www.layui.com/) ...
  • 02-Layui框架入门篇

    2020-05-17 18:21:52
    认识layui框架
  • 但是事与愿违,由于不熟练和拖沓导致一直延后,所以想按照工作的思路,先找一个前端框架写一个前端页面以完成前端快速开发,至于框架源码实现,在完成效果后再去研究吧。同时也要意识到这一点,框架永远都是别人的...
  • layui框架使用与代码编写

    千次阅读 2018-11-22 06:53:10
    layui框架使用与代码编写 一、layui增加操作工具列 ShowLeakList = ListPager.extend({ init : function(container, primaryKey, url){ //列表容器 this.container = container; //主键字段 this....
  • 先简单介绍一下layuilayui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心...
  • layuiAdmin 框架单页面文档

    万次阅读 2019-08-29 00:58:59
    由于 layuiAdmin 可采用前后端分离开发模式,因此你无需将其放置在你的服务端 MVC 框架中,你只需要给 layuiAdmin 主入口页面(我们也称之为:宿主页面)进行访问解析,它即可全权完成自身路由的跳转和视图的呈现,...
  • 今天笔者学习了LayUi框架的一些基础内容,总体来说,LayUi框架比BootStrap框架更倾向于后台的搭建和使用,样式更加多样,说明也对国人更加友好,毕竟是国人开发的框架嘛~废话不多少,开始介绍。 LayUI 的介绍 ...
  • 现在热部署后刷新页面即可) 4、好多人都不知道,项目有工具类CodeDOM.java可以生成一套表的完整增删改查后台代码。 配置好数据库,指定代码生成父位置。 运行main函数即可一键生成一套表增删改查后台代码。 后记...
  • layui框架——弹出层layer

    万次阅读 多人点赞 2018-07-26 10:11:56
    两种调用方法: 1、引用独立的layer.js文件 引入好layer.js后,直接用即可 <script src="layer.js"></script>...2、调用layui中的layer模块 layui.use('layer', function(){ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,625
精华内容 650
关键字:

layui单页面框架