精华内容
下载资源
问答
  • 2020-05-27 11:31:35

    前言

    首先,layui是一个前端框架,框架的意思: 字面上理解,是一个架子,你拿这个架子去做一些东西。  其实框架就是一个工具,用这个工具下的东西去实现我们想要的东西,比如 html上的item标签,现在我们使用的是layui-item标签。  这样子就是用的是这个工具下的item。

    基于模块开发的思想

    layui是基于模块的,模块的意思:form表单是一个模块。 比如一个表单是一个模块等等。、

    layui模块的类型的定义,

    define (模块,返回一个接口)   模块:比如一个表的各项信息,接口是对这个对象操作的方法。

    这个和类差不多,我们定义一个类也是 定义里面的各种字段,就是属性(不完全是),还有对字段操作的接口,主要起到对数据的封装操作。

    layui模块的使用,

    use这个模块就可以了,一般使用一个,use一个

    也可以把所有需要的默认加载模块加载进来(前面需要把全部的js引进来,直接fuction就可以使用),而不需要用一个use一个。

    非默认的模块:自己可以创建一个, 按照上面的define创建一个,记好放置的路径。然后,在需要的地方,设置路径,最后在use一下,

    就可以使用自己创建的模块了。

    当我们用了很多扩展模块的时候,可以把很多都合并到同一个mian里面,这样不需要加载那么多js了

     

    更多相关内容
  • Java学生宿舍管理系统源码(SSM+Layui框架;毕业设计) 实现功能 管理员的登录与登出 管理员,班级,学生,宿舍,卫生,访客各模块增删改查 个别模块关联查询 各个模块数据导出Excel Java学生宿舍管理系统源码...
  • 主要介绍了vue使用layui框架,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 今天小编就为大家分享一篇layui框架与SSM前后台交互的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1.相关技术,MVC、EF、Layer、MEF讲解 2.框架使用,规范 3.框架公用库更新要求与规范 4.本框架在实际的工作中综合应用 5.为提高工作效率,怎么样结合本框架提高工作效率
  • 今天小编就为大家分享一篇layui框架table 数据表格的方法级渲染详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了layui框架中layer父子页面交互的方法,结合实例形式分析了layer父子页面交互的常用技巧以及layer弹出多个iframe找到父页面的操作方法,需要的朋友可以参考下
  • LayUI框架

    千次阅读 2021-10-25 19:05:23
    一、引言 1.1 介绍 LayUI 是一款经典模块化前端 UI 框架,我们只需要定义简单的HTML、CSS...Layui - 经典开源模块化前端 UI 框架layui 是一套开源的 Web UI 解决方案,其内部采用的是自身经典的模块化规范,并遵...

    一、引言


    1.1 介绍

    LayUI 是一款经典模块化前端 UI 框架,我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。

    使得前端页面的制作变得更加简单,可以说是为后端人员量身定制的一款开源框架。

    可是很遗憾的是,贤心大神因为各种因素吧,从官网迁走了

    不过layui中的些许知识对我们而言还是挺好用的,

    我们也可以通过镜像网站

    Layui - 经典开源模块化前端 UI 框架layui 是一套开源的 Web UI 解决方案,其内部采用的是自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到使用方法的每一处细节都经过精心雕琢,非常适合网页界面的快速开发。icon-default.png?t=L9C2https://www.layui.site/ 

     进行访问和查询。

     

    二、环境搭建


    2.1 下载

    在镜像网站即可完成下载

    下载LayUI

     

    2.2 导入依赖

    下载的LayUI解压后,将其中的layui目录导入项目中

    解压后的 layui目录

     

    将layui目录放到项目的webapp目录下

     

    在JSP中导入layui依赖

     

    三、页面元素


    3.1.栅格布局.html

    响应式栅格布局,每行分 12 等分

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>栅格系统</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    
    <script src="layui/layui.js"></script>
    
    <body>
    
    <!-- layui-container居中显示有固定尺寸;layui-fluid占满行宽 -->
    <!--<div class="layui-container">-->
        <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md9 layui-col-lg6 layui-bg-orange">
                你的内容 9/12
            </div>
            <div class="layui-col-md3 layui-col-lg6 layui-bg-gray">
                你的内容 3/12
            </div>
        </div>
    
        <!--移动设备、平板、桌面端的不同表现:-->
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 layui-col-lg3">
                移动:6/12 | 平板:6/12 | 桌面:4/12;
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 layui-col-lg3">
                移动:6/12 | 平板:6/12 | 桌面:4/12;
            </div>
            <div class="layui-col-xs4 layui-col-sm12 layui-col-md4 layui-col-lg3">
                移动:4/12 | 平板:12/12 | 桌面:4/12;
            </div>
            <div class="layui-col-xs4 layui-col-sm7 layui-col-md4 layui-col-lg3">
                移动:4/12 | 平板:7/12 | 桌面:4/12;
            </div>
            <div class="layui-col-xs4 layui-col-sm5 layui-col-md8 layui-col-lg3">
                移动:4/12 | 平板:5/12 | 桌面:8/12;
            </div>
        </div>
    </div>
    
    </body>
    </html>

    可以看到,当在电脑页面上显示的时候,栅格布局第一行分为了四个模块,大家也可以将页面放大,当放大到平板的尺寸的时候,

     

     

    3.2.图标.html

    class="layui-icon 具体的图标样式"(访问的时候一定要通过服务器,也就是自己打开一个网页,输入网址进行访问,而不是直接点IDEA右上角那个网页!!!)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <!-- 引入样式 -->
        <link rel="stylesheet" href="layui/css/layui.css">
    
    </head>
    
    <!-- 引入js -->
    <script type="application/javascript" src="layui/layui.js"></script>
    
    <body>
    <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
    <i class="layui-icon layui-icon-wifi" style="font-size: 30px;  color: #1E9FFF;"></i>
    </body>
    </html>

     

    3.3.动画.html

    LayUI提供了动画支持

    这个是调节动画的时间用的

    <style>
            /*<!--        调节动画的时间-->*/
            .layui-anim{animation-duration: 3s; -webkit-animation-duration: 3s;}
        </style>
    样式类描述
    layui-anim-up从最底部往上滑入
    layui-anim-upbit微微往上滑入
    layui-anim-scale平滑放大
    layui-anim-scaleSpring弹簧式放大
    layui-anim-fadein渐现
    layui-anim-fadeout渐隐
    layui-anim-rotate360度旋转
    追加:layui-anim-loop循环动画
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <!-- 引入样式 -->
        <link rel="stylesheet" href="layui/css/layui.css">
    
        <style>
            /*<!--        调节动画的时间-->*/
            .layui-anim{animation-duration: 3s; -webkit-animation-duration: 3s;}
        </style>
    
    </head>
    
    <!-- 引入js -->
    <script type="application/javascript" src="layui/layui.js"></script>
    
    <body>
    <div class="layui-anim layui-anim-up layui-anim-loop">循环动画</div>
    <hr>
    <div class="layui-anim layui-anim-down">顶部下滑</div>
    <hr>
    <div class="layui-anim layui-anim-fadeout">渐隐</div>
    <hr>
    <!-- 整个div会在页面显示时,以特定动画显示出来 -->
    <div class="layui-anim layui-anim-up" style="height: 100px">aa</div>
    <!-- 额外添加样式类:layui-anim-loop 使得动画循环运行 -->
    <!--这里可以把图标加入里面,实现平常咱们所看到的等待的图像-->
    <div class="layui-anim  layui-anim-rotate layui-anim-loop"
         style="text-align:center;line-height: 100px;margin-left:50px;height: 100px;width:100px">
        <i class="layui-icon layui-icon-loading"></i>
    </div>
    <div class="layui-anim  layui-anim-rotate layui-anim-loop"
         style="text-align:center;line-height: 100px;margin-left:50px;height: 100px;width:100px">
        <i class="layui-icon layui-icon-loading-1"></i>
    </div>
    </body>
    </html>

     

     

    3.4.按钮.html

    class="layui-btn 主题 样式"

    <!DOCTYPE html>
    <html>
    <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
           <title></title>
           <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    ​
    <script src="layui/layui.js"></script>
    ​
    <body>
    ​
    <button type="button" class="layui-btn layui-btn-warm">添加</button>
    <a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-border-blue">跳转</a>
    ​
    <button type="button" class="layui-btn">标准的按钮</button>
    <a href="http://www.layui.com" class="layui-btn">可跳转的按钮</a>
    <a href="http://www.layui.com" class="layui-btn layui-btn-primary">主题的按钮</a>
    <a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-sm">主题的按钮</a>
    <a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-radius ">圆角的按钮</a>
    <a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-sm  layui-btn-radius ">
           <i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1E9FFF;"></i>
           带图标的按钮
    </a>
    ​
    </body>
    </html>

     

    3.5.表单.html

    • class="layui-form"

    <!DOCTYPE html>
    <html>
    <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
           <title></title>
           <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    ​
    <script src="layui/layui.js"></script>
    ​
    <body>
    ​
    <form class="layui-form" action="http://www.baidu.com">
           <div class="layui-form-item">
               <label class="layui-form-label">输入框</label>
               <div class="layui-input-block">
                   <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="on" class="layui-input">
               </div>
           </div>
           <div class="layui-form-item">
               <label class="layui-form-label">密码框</label>
               <div class="layui-input-inline">
                   <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
               </div>
               <div class="layui-form-mid layui-word-aux">辅助文字</div>
           </div>
           <div class="layui-form-item">
               <label class="layui-form-label">选择框</label>
               <div class="layui-input-block">
                   <select name="city" lay-verify="required">
                       <option value=""></option>
                       <option value="0">北京</option>
                       <option value="1">上海</option>
                       <option value="2">广州</option>
                       <option value="3">深圳</option>
                       <option value="4">杭州</option>
                   </select>
               </div>
           </div>
           <div class="layui-form-item">
               <label class="layui-form-label">复选框</label>
               <div class="layui-input-block">
                   <input type="checkbox" name="like[write]" title="写作">
                   <input type="checkbox" name="like[read]" title="阅读" checked>
                   <input type="checkbox" name="like[dai]" title="发呆">
               </div>
           </div>
           <div class="layui-form-item">
               <label class="layui-form-label">开关</label>
               <div class="layui-input-block">
                   <input type="checkbox" name="switch" lay-skin="switch">
               </div>
           </div>
           <div class="layui-form-item">
               <label class="layui-form-label">单选框</label>
               <div class="layui-input-block">
                   <input type="radio" name="sex" value="男" title="男">
                   <input type="radio" name="sex" value="女" title="女" checked>
               </div>
           </div>
           <div class="layui-form-item layui-form-text">
               <label class="layui-form-label">文本域</label>
               <div class="layui-input-block">
                   <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
               </div>
           </div>
           <div class="layui-form-item">
               <div class="layui-input-block">
                   <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                   <button type="reset" class="layui-btn layui-btn-primary">重置</button>
               </div>
           </div>
    </form>
    ​
    <script>
        //Demo
        layui.use('form', function(){
            var form = layui.form;​
            //监听提交
            form.on('submit(formDemo)', function(data){
                layer.msg(JSON.stringify(data.field));//把表单中数据转成Json并输出
                return false;//true表示执行action对应的地址
            });
        });
    </script>
    ​
    </body>
    </html>

     

    3.6 导航.html

    导航条

    • class="layui-nav" 水平导航条

    • class="layui-nav layui-nav-tree" 垂直导航条

    <!DOCTYPE html>
    <html>
    <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
           <title></title>
           <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    ​
    <script src="layui/layui.js"></script>
    ​
    <body>
    <!--<ul class="layui-nav layui-nav-tree" lay-filter="">-->
    <ul class="layui-nav" lay-filter="">
           <li class="layui-nav-item"><a href="">最新活动</a></li>
           <li class="layui-nav-item layui-this"><a href="">产品</a></li>
           <li class="layui-nav-item"><a href="">大数据</a></li>
           <li class="layui-nav-item">
               <a href="javascript:;">解决方案</a>
               <dl class="layui-nav-child"> <!-- 二级菜单 -->
                   <dd><a href="">移动模块</a></dd>
                   <dd><a href="">后台模版</a></dd>
                   <dd><a href="">电商平台</a></dd>
               </dl>
           </li>
           <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
    ​
    </body>
    ​
    <script>
        //注意:导航 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function(){});
    </script>
    ​
    </html>
    

     

     

    四、内置模块

    4.1.layer.html

    弹窗 msg()、alert()、confirm()

    <!DOCTYPE html>
    <html>
    <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
           <title></title>
           <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    ​
    <script src="layui/layui.js"></script>
    ​
    <body>
    qwer
       <div id="testmain" style="display:none;padding:10px; height: 173px; width: 275px;">
               hello world!
           </div>
    </body>
    ​
    <script>
        layui.use(["layer"],function(){
            layer = layui.layer;
            layer.open({
                type:1,// 消息框,没有确定按钮
                title:["hello","padding-left:5px"], // 标题,及标题样式
                content:layui.$("#testmain"), // dom格式
                offset:'rb',//可以在右下角显示
                shade:true //是否遮罩
            });
            layer.open({
                type:2,// iframe加载,需要一个url
                content:"1.栅格布局.html"
            });
        });
    </script>
    ​
    <!--<script>-->
    <!--    // 导入 layer模块-->
    <!--    layui.use(["layer"],function(){-->
    <!--        var layer = layui.layer;-->
    <!--        //layer.msg("hello world!!");-->
    <!--        layer.msg("确定吗?",{btn:["确定!","放弃!"],-->
    <!--            yes:function(i){layer.close(i);layer.msg("yes!!!")},-->
    <!--            btn2:function(i){layer.close(i);layer.msg("no!!!")}}-->
    <!--        );-->
    <!--    });-->
    <!--</script>-->
    ​
    ​
    <!--<script>-->
    <!--    // 导入 layer模块-->
    <!--    layui.use(["layer"],function(){-->
    <!--        var layer = layui.layer;-->
    <!--        //0-6 7种图标  0:warning  1:success  2:error  3:question  4:lock  5:哭脸  6:笑脸-->
    <!--        layer.alert("alert弹框",-->
    <!--            {title:'alert',icon:5 },-->
    <!--            function(){//点击“确定”按钮时的回调-->
    <!--                layer.msg("好滴");-->
    <!--            }-->
    <!--        );-->
    <!--    });-->
    <!--</script>-->
    ​
    <!--<script>-->
    <!--    // 导入 layer模块-->
    <!--    layui.use(["layer"],function(){-->
    <!--        var layer = layui.layer;-->
    <!--        layer.confirm("hello world~",-->
    <!--            {shade:false,icon:1,btn:["好滴","不行"]},-->
    <!--            function(){layer.msg("好滴!");},-->
    <!--            function(){layer.msg("不行!")}-->
    <!--        );-->
    <!--    });-->
    <!--</script>-->
    ​
    ​
    </html>

     

     

     

    4.2.layDate.html

    日期框

    <!DOCTYPE html>
    <html>
    <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
           <title></title>
           <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    ​
    <script src="layui/layui.js"></script>
    ​
    <body>
    ​
    <form class="layui-form layui-form-pane" action="" method="post">
           <!-- layui-form-item 一个输入项-->
           <div class="layui-form-item">
               <label class="layui-form-label">生日</label>
               <!-- layui-input-block 输入框会占满除文字外的整行 -->
               <div class="layui-input-block">
                   <input readonly id="birth" type="text" name="birth" placeholder="请选择生日日期" autocomplete="off" class="layui-input">
               </div>
           </div>
    </form>
    ​
    </body>
    ​
    <script>
        layui.use(["laydate","form"],function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#birth', //指定元素
                format:'yyyy/MM/dd',
                //value:'2012-12-12' //默认值
                value:new Date() //默认值
            });
        });
    </script>
    ​
    </html>

     

    4.3.数据表格.html

    4.3.1 动态表格

    动态表格 

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>数据表格</title>
        <link rel="stylesheet" href="css/layui.css" media="all">
    </head>
    <body>
    
    <table id="demo" lay-filter="test"></table>
    
    <script src="layui/layui.js"></script>
    <script>
        layui.use('table', function(){
            var table = layui.table;
    
            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 312
                ,url: 'music/findByPage' //数据接口
                ,page: true
                ,cols: [[ //表头
                    {field: 'musicId', title: 'ID', width:100, sort: true, fixed: 'left'}
                    ,{field: 'musicName', title: '歌曲名', width:100}
                    ,{field: 'musicAlbumName', title: '专辑名', width:100, sort: true}
                    ,{field: 'musicAlbumPicurl', title: '图片url', width:100}
                    ,{field: 'musicMp3url', title: '歌曲url', width: 177}
                    ,{field: 'musicArtistName', title: '歌手名字', width: 100, sort: true}
                    ,{field: 'sheetId', title: '专辑列表', width: 100, sort: true}
                ]]
            });
    
        });
    </script>
    </body>
    </html>
     
    

    data.json数据格式如下:

    • code:0 代表查询成功,为1时,会显示msg中的内容

    • count:是为分页准备的,共有多少条数据

    • msg:消息内容

    • data:数据

    {"code":0,"msg":"","count":1000,"data":
    [{"musicId":1,"musicName":"光年之外","musicAlbumName":"光年之外","musicAlbumPicurl":"https://imgessl.kugou.com/stdmusic/20161229/20161229233400375274.jpg","musicMp3url":"https://webfs.ali.kugou.com/202110231001/f8ce61782b9164c18fb5f351e63893b9/KGTX/CLTX001/f87095bff0de7c636c3a3b8aac702d76.mp3","musicArtistName":"G.E.M.邓紫棋","sheetId":1},{"musicId":2,"musicName":"夜空中最亮的星","musicAlbumName":"世界","musicAlbumPicurl":"https://imgessl.kugou.com/stdmusic/20150719/20150719010047203836.jpg","musicMp3url":"https://webfs.ali.kugou.com/202110231000/1bbc218df11c188d157670bb9394bbdc/G202/M04/1B/13/aocBAF55G0-ADd0HAD2Y88Efqbw072.mp3","musicArtistName":"逃跑计划","sheetId":1},{"musicId":3,"musicName":"只要平凡","musicAlbumName":"只要平凡","musicAlbumPicurl":"https://y.qq.com/music/photo_new/T002R300x300M000000K7srf1rZtOX.jpg?max_age=2592000","musicMp3url":"https://webfs.tx.kugou.com/202110230959/454d79bdb51b3853bdbef16cdeabad0f/KGTX/CLTX001/38aead7ed546b0736791ebb25c3a3951.mp3","musicArtistName":"张杰/张碧晨","sheetId":2},{"musicId":4,"musicName":"你要跳舞吗","musicAlbumName":"生命因你而火热","musicAlbumPicurl":"https://imgessl.kugou.com/stdmusic/20160407/20160407002744966139.jpg","musicMp3url":"https://webfs.ali.kugou.com/202110230959/4a0cf46bfc3a8c564ee035dc28062d14/KGTX/CLTX001/58ffa0221ed9397e7ad9b889cdbe1a4a.mp3","musicArtistName":"新裤子乐队","sheetId":2},{"musicId":5,"musicName":"Timber","musicAlbumName":"Timber","musicAlbumPicurl":"https://imgessl.kugou.com/stdmusic/20190517/20190517155803444871.jpg","musicMp3url":"https://webfs.ali.kugou.com/202110231008/84aa125fef71bba4becb6d4a23f14f9b/G192/M07/03/01/YIcBAF5ajbWAD3zrADH2ScRvxNQ240.mp3","musicArtistName":"pitbull","sheetId":1}]
    }

    4.3.2 分页参数

    分页条细节定制 在page后面加参数

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>数据表格</title>
        <link rel="stylesheet" href="css/layui.css" media="all">
    </head>
    <body>
    
    <table id="demo" lay-filter="test"></table>
    
    <script src="layui/layui.js"></script>
    <script>
        layui.use('table', function(){
            var table = layui.table;
    
            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 312
                ,url: 'music/findByPage' //数据接口
                ,page: {limit:2//每页显示1条( 向后台传值,每页显示条数 )
                    ,limits:[1,2,3] //可选每页条数
                    ,first: '首页' //首页显示文字,默认显示页号
                    ,last: '尾页'
                    ,prev: '<i class="layui-icon layui-icon-prev"></i>' //上一页显示内容,默认显示 > <
                    ,next: '<i class="layui-icon layui-icon-next"></i>'
                    ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
                }
                ,cols: [[ //表头
                    {field: 'musicId', title: 'ID', width:100, sort: true, fixed: 'left'}
                    ,{field: 'musicName', title: '歌曲名', width:100}
                    ,{field: 'musicAlbumName', title: '专辑名', width:100, sort: true}
                    ,{field: 'musicAlbumPicurl', title: '图片url', width:100}
                    ,{field: 'musicMp3url', title: '歌曲url', width: 177}
                    ,{field: 'musicArtistName', title: '歌手名字', width: 100, sort: true}
                    ,{field: 'sheetId', title: '专辑列表', width: 100, sort: true}
                ]]
            });
    
        });
    </script>
    </body>
    </html>

     

    4.3.3 显示工具栏

    右上角工具按钮 toolbar:true

    <script>
        layui.use("table",function(){
            var table = layui.table;
            table.render({
                elem: '#demo',
                toolbar:true,//显示工具栏
                url:'${pageContext.request.contextPath}/data,
                cols:[[...]],
                page:{...},
           });
        });
    </script>

     

    4.3.4 操作按钮

    为每行增加操作按钮

    <script>
        layui.use(["table","laytpl"],function(){
            var table = layui.table;
            table.render({
                elem: '#demo',
                url:'${pageContext.request.contextPath}/data,
                cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'username', title: '用户名', width:80}
                    ,{field: 'sex', title: '性别', width:80, sort: true}
                    ,{field: 'city', title: '城市'}
                    ,{field: 'score', title: '评分', width: 80, sort: true}
                    ,{field:"right",title:"操作",toolbar: '#barDemo'}//添加操作按钮
                ]],
                ...
            });
        });
    </script>
    <!-- 如下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>

     

    4.3.5 操作按钮回调

    按钮的单击事件

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>数据表格</title>
        <link rel="stylesheet" href="css/layui.css" media="all">
    </head>
    <body>
    
    <table id="demo" lay-filter="test"></table>
    
    <script src="layui/layui.js"></script>
    <script>
        layui.use('table', function(){
            var table = layui.table;
    
            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 312
                ,url: 'music/findByPage' //数据接口
                ,page: {limit:2//每页显示1条( 向后台传值,每页显示条数 )
                    ,limits:[1,2,3] //可选每页条数
                    ,first: '首页' //首页显示文字,默认显示页号
                    ,last: '尾页'
                    ,prev: '<i class="layui-icon layui-icon-prev"></i>' //上一页显示内容,默认显示 > <
                    ,next: '<i class="layui-icon layui-icon-next"></i>'
                    ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
                }
                ,cols: [[ //表头
                    {field: 'musicId', title: 'ID', width:100, sort: true, fixed: 'left'}
                    ,{field: 'musicName', title: '歌曲名', width:100}
                    ,{field: 'musicAlbumName', title: '专辑名', width:100, sort: true}
                    ,{field: 'musicAlbumPicurl', title: '图片url', width:100}
                    ,{field: 'musicMp3url', title: '歌曲url', width: 177}
                    ,{field: 'musicArtistName', title: '歌手名字', width: 100, sort: true}
                    ,{field: 'sheetId', title: '专辑列表', width: 100, sort: true}
                    ,{field: '',title:'操作',width:180,toolbar: '#barDemo'}
                ]]
                ,toolbar:true
            });
    
        });
    
    </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>
        layui.use("table",function(){
            table = layui.table;
            //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
            table.on('tool(test)', function(obj){
                var data = obj.data; //获得当前行数据
                //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
                var layEvent = obj.event;
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
                if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        // 向服务端发送删除请求
                        // 此处可以发送ajax
                        obj.del(); //删除对应行(tr)的DOM结构
                        layer.close(index);
                    });
                } else if(layEvent === 'edit'){ //编辑
                    // 向服务端发送更新请求
                    // 同步更新缓存对应的值
                    obj.update({
                        musicName: '孤独患者'});
                }
            });
        });
    </script>
    </body>
    </html>

    这里的删除是假的删除(页面上删除了但是数据库没有删除,可以在其中添加ajax进行删除)

    点击编辑,歌名变化(这里我是写死了,当然可以从编辑表中获取数据添上)

     

     

    4.4.upload.html

    文件上传,layui默认上传MultipartFile的文件名为:file

    <!DOCTYPE html>
    <html>
    <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
           <title></title>
           <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    ​
    <script src="layui/layui.js"></script>
    ​
    <body>
    ​
    <form class="layui-form layui-form-pane" action="" method="post" enctype="multipart/form-data">
           <!-- layui-form-item 一个输入项-->
           <div class="layui-form-item">
               <label class="layui-form-label">username</label>
               <!-- layui-input-block 输入框会占满除文字外的整行 -->
               <div class="layui-input-block">
                   <input id="birth" type="text" name="username" class="layui-input">
               </div>
           </div>
           <div class="layui-form-item">
               <div class="layui-input-block">
                   <button type="button" class="layui-btn" id="test1">
                       <i class="layui-icon">&#xe67c;</i>上传图片
                   </button>
               </div>
           </div>
    </form>
    ​
    </body>
    ​
    <script>
        layui.use(['upload','layer'], function(){
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: '/user/upload' //上传接口
                ,accept:'file' // file代表所有文件,默认是images代表图片
                ,size:100 // 文件最大不能超过100kb
                ,done: function(res){
                    //上传完毕回调
                    layui.layer.msg("ok");
                }
                ,error: function(){
                    //请求异常回调
                    layui.layer.msg("error");
                }
            });
        });
    </script>
    ​
    </html>
     
    

     

     

    4.5.carousel.html

    轮播图

    <!DOCTYPE html>
    <html>
    <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
           <title></title>
           <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    ​
    <script src="layui/layui.js"></script>
    ​
    <body>
    ​
    <div class="layui-carousel" id="test1">
           <div carousel-item style="text-align: center;line-height: 280px">
               <div><img src="img/1.jpg" width="400" height="400"></div>
               <div><img src="img/2.jpg" width="400" height="400"></div>
               <div>条目3</div>
               <div>条目4</div>
               <div>条目5</div>
           </div>
    </div>
    ​
    </body>
    ​
    <script>
        layui.use(['carousel'], function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,arrow: 'always' //始终显示箭头
            });
        });
    </script>
    ​
    </html>
    

     

    展开全文
  • 前台主要运用:Html,css,js,jquery,layui, layuimini等技术 后台主要运用:Servlet,过滤器,拦截器,dbutils, mysql8,Spring mvc开发思想 数据交互主要运用:json格式 开发工具:前端运用HBuilder,后端运用Eclipse,...
  • 目录标题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> 
    

    编码不易 如有帮助到您 请支持一下 多谢

    在这里插入图片描述

    展开全文
  • layui框架中使用form.on方法绑定select下拉框选中事件,form.on()方法不执行, 解决方法有以下几点: 1. html中form标签中要有class=”layui-form”,否则不生效  2. form.on方法必须放在layui.use({})里 ...
  • layui前端框架-其他

    2021-06-11 19:12:40
    </p><p> </p><p>layui前端框架更新日志:</p><p>v2.6.8</p><p>[重写] sort 方法,以便对数字、非数字及混合类等所有内容的排序进行支持</p><p>[新增] dropdown 组件的 align 参数,用于控制下拉菜单水平对齐方式...
  • 根据利用layui框架原理实现数据表格与数据库的显示、导入、导出、增删改查等一系列操作,从而实现最终的目的需求。
  • 了解layui框架

    千次阅读 2022-01-04 22:28:15
    layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。 准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏

    layui简介
    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。
    其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。
    layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。
    准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
    LayUI 的特性在vue、 react、 angular、更有类似 ant design,elementUI 等巨头的围攻下LayUI 坚韧的活着,自然有其独特的特征。
    那就是 LayUI:简约实用。正像原作者所说LayUI 原本就是为后端开发人员而做的。
    比如,一个静态表格,基本上在不修改现有的代码的情况下,只要增加,就能立刻展现出优美的界面。这简直就是后台开发人员的福音。
    更具体地说,当你使用 ASP.NET Gridview 控件时,基本上只要增加 就能达到 UI 上专业的美观效果。
    这和 Ant Design 这种 UI 设计理念完全不同,在 Ant Design 里,你需要 import/export 各种 JS 包。
    LayUI 最大的特色是美观原作者说:视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感,而 layui 提供的颜色,清新而不乏深沉,互相柔和,不过分刺激大脑皮层的神经反应,形成越久越耐看的微妙影像。合理搭配,可与各式各样的网站避免违和,从而使你的 Web 平台看上去更为融洽。
    我很喜欢 layui 的布局,特别适合做后端的项目,我自己在做启明星软件时,基本上后端都采用 layui 框架。
    layui的优点和缺点优点有以下几方面:
    (1)layui属于轻量级框架,简单美观。适用于开发后端模式,它在服务端页面上有非常好的效果。(2)layui是提供给后端开发人员最好的ui框架,基于DOM驱动,只要不涉及到交互layui还是很不错的。
    缺点如下:
    (1)layui出现较迟,想必其他前端框架来说还是不太成熟。

    展开全文
  • Layui框架

    千次阅读 2020-05-22 10:27:03
    动画第三章:Layui模块1. 颜色选择器(引入colorpicker模块)2. 滑块(引入slider模块)3. 评分(引入rate模块)4. 轮播(引入carousel模块)5. 代码修饰器(引入code模块)6. 时间和日期选择器(引入layda
  • layui框架入门篇

    2021-06-02 19:30:19
    layUi框架入门篇(一)——引入 layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,从源...
  • layui框架的一些基本使用

    千次阅读 2022-01-12 19:57:26
    layui的优缺点以及使用layui前的准备 1.栅格系统 2.按钮 3.表单 4.表格 5.面板 6.时间线 7.选项卡 8.弹出层 9.数据表格
  • Layui框架基本使用

    2022-01-12 10:37:00
    为后端量身定做的前端框架
  • layui框架的简单使用

    千次阅读 2022-03-23 16:30:21
    layui笔记,详细去官网看文档
  • 前端LayUI框架快速上手详解(一)

    千次阅读 多人点赞 2021-08-17 09:37:35
    和 Bootstrap 有些相似,但该框架有个极大的好处就是定义了很多前后端交互的样式接口,如分页表格,只需在前端配置好接口,后端则按照定义好的接口规则返回数据,即可完成页面的展示,极大减少了后端人员的开发成本...
  • Layui 框架说明

    2021-12-02 09:15:25
    一、参考文档: https://www.layui.com/doc/ https://www.kancloud.cn/sansui/easyweb/2141288
  • layui框架是什么?

    2021-08-19 22:17:33
    layui框架是什么? layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码...
  • layui框架学习笔记

    2020-08-05 11:58:57
    layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器...
  • Layui框架简介

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

    2020-07-11 07:41:10
    使用步骤:在后台首页index.html下引入layui.js和layui.css 然后在html下写以下脚本 <script> layui.use("options",function(){}); </script> 第一个参数是一个数组,是使用哪些模块,例如,[‘form’,...
  • 因为公司的需要,这几天学习了layui框架,稍微有一些心得。介绍就不多说,贴上官网的说明文档,目前是2.0版本,上面有很详细的介绍。 官网地址:https://www.layui.com/doc/element/layout.html 简单的布局 layui的...
  • 基于layui框架使用gulp工具搭建的后台模板
  • layui框架的使用

    2022-02-23 23:33:38
    我们可以通过npm命令将它下载下来! 它长的是这个样子! 然后我们引入它 然后使用它
  • 摘要:layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML CSS JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,622
精华内容 6,648
关键字:

layui框架