Layui基础入门

这篇具有很好参考价值的文章主要介绍了Layui基础入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、引言


1.1 介绍

官网:<https://www.layui.com/ > 这个不维护了 看下面这个

https://www.layuiweb.com/

在官网首页,可以很方便的下载LayUI

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

使得前端页面的制作变得更加简单。

二、环境搭建


2.1 下载

在官网即可完成下载

下载LayUI
Layui基础入门
2.2 导入依赖

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

解压后的 layui目录
Layui基础入门
将layui目录放到项目的webapp目录下
Layui基础入门
在JSP中导入layui依赖
Layui基础入门

官网也有示例,可以根据官网进行学习拓展自己想学的,以下展示一些常用的元素使用方式。

三、页面元素


3.1 布局

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

<!-- 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-md8 layui-col-lg3">
            移动:4/12 | 平板:7/12 | 桌面:8/12;
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4 layui-col-lg3">
            移动:4/12 | 平板:5/12 | 桌面:4/12;
        </div>
    </div>
</div>
3.2 字体图标

class=“layui-icon 具体的图标样式”

<i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1E9FFF;"></i>
<i class="layui-icon layui-icon-heart" style="font-size: 30px; color: #1E9FFF;"></i>
3.3 按钮

class=“layui-btn 主题 样式”

<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>
3.4 表单
  • class=“layui-form”
<form class="layui-form" action="">
  <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="off" 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 layui-btn-lg" lay-submit lay-filter="formDemo">立即提交</button>
        <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
    </div>
  </div>
</form>
<script>
// 必须要导入form模块,才能保证表单正常渲染
layui.use('form', function(){
  var form = layui.form;
  //监听提交
  form.on('submit(formDemo)', function(data){// data就是表单中的所有数据
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>
3.5 数据表格
3.5.1 动态表格

动态表格

<table id="demo" lay-filter="test"></table>
<script>
// 必须要导入 table模块 layui.use('table',...)
layui.use('table', function(){
  var table = layui.table;
  // 为表格填充数据
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '${pageContext.request.contextPath}/data‘ //获取数据
    ,page: true //开启分页
    ,cols: [[ //表头
       {field:'id', width:80, title: 'ID', sort: true}
        ,{field:'username', width:80, title: '用户名'}
        ,{field:'sex', width:80, title: '性别', sort: true}
        ,{field:'city',  title: '城市'} //没定义宽度则占满剩余所有宽度,都不定义则所有列均分
        ,{field:'score',width:80, title: '评分', sort: true}
    ]]
  });
  
});
</script>

数据格式如下:

  • code:0 代表查询成功,为1时,会显示msg中的内容
  • count是为分页准备的,共有多少条数据
数据格式如下:
{"msg":"no data",
 "code":0,
 "data":[{"id":1,"username":"shine1","sex":"男","city":"保定","score":100},
         {"id":2,"username":"shine2","sex":"女","city":"石家庄","score":100},
         {"id":3,"username":"shine3","sex":"男","city":"邢台","score":100}],
 "count":100}

3.5.2 分页参数

分页条细节定制

<script>
    layui.use("table",function(){
        var table = layui.table;
        table.render({
            elem: '#demo'url:'${pageContext.request.contextPath}/data,
            cols:[[...]],
            page:{limit:1//每页显示1条
                ,limits:[1,2,3] //可选每页条数
                ,first: '首页' //首页显示文字,默认显示页号
                ,last: '尾页'
                ,prev: '<em>←</em>' //上一页显示内容,默认显示 > <
                ,next: '<i class="layui-icon layui-icon-next"></i>'
                ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
            },
       });
    });
</script>
3.5.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>
3.5.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>
3.5.5 操作按钮回调

按钮的单击事件

<table id="demo" lay-filter="test"></table>
<script>
    layui.use("table",function(){
        table = layui.table;
        table.render({...});
        //注: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({
                    username: 'shine001',
                    city: '北京',
                    sex:'女',
                    score:99});
            }
        });
    });
</script>
3.6 导航

导航条

  • class=“layui-nav” 水平导航条
  • class=“layui-nav layui-nav-tree” 垂直导航条
<ul class="layui-nav layui-nav-tree" 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>
<script>
    //注意:导航 依赖 element 模块,否则无法进行功能性操作
    layui.use('element', function(){});
</script>
3.7 动画

LayUI提供了动画支持

样式类 描述
layui-anim-up 从最底部往上滑入
layui-anim-upbit 微微往上滑入
layui-anim-scale 平滑放大
layui-anim-scaleSpring 弹簧式放大
layui-anim-fadein 渐现
layui-anim-fadeout 渐隐
layui-anim-rotate 360度旋转
追加:layui-anim-loop 循环动画
<!-- 整个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">bb</div>

四、内置模块

4.1 layer
4.1.1 弹窗方法

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

<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:6 }, 
               function(){//点击“确定”按钮时的回调
               		layer.msg("好滴");
    			}
	);
});
</script>
<script>
// 导入 layer模块  
layui.use(["layer"],function(){
    var layer = layui.layer;
	layer.confirm("hello world~",
            {shade:false,icon:3,btn:["好滴","不行"]},
            function(){layer.msg("好滴!");},
            function(){layer.msg("不行!")}
   	);
});
</script>
4.1.2 弹窗属性
  • type 弹窗类型,可选值 0-4
  • title 弹窗标题,可选值 text/array
  • content 弹窗内容,可选值 text/html/dom
<script>
    layui.use(["layer"],function(){
        layer = layui.layer;
        layer.open({
            type:1,// 消息框,没有确定按钮
            title:["hello","padding-left:5px"], // 标题,及标题样式
            content:layui.$("#testmain"), // dom格式
            offset:'rb',//可以在右下角显示
            shade:false //是否遮罩
        });
        layer.open({
            type:2,// iframe加载,需要一个url
            content:"${pageContext.request.contextPath}/xx"
        });
    });
</script>
<div id="testmain" style="display:none;padding:10px; height: 173px; width: 275px;">
	hello world!
</div>
4.2 layDate

日期框

<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>
<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>
4.3 upload

上传按钮

<form class="layui-form layui-form-pane" th:action="@{/abc}" method="post">
    <!-- 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>
<script>
    layui.use(['upload','layer'], function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/data.jsp' //上传接口
            ,accept:'file' // file代表所有文件,默认是images代表图片
            ,size:100 // 文件最大100kb
            ,done: function(res){
                //上传完毕回调
                layui.layer.msg("ok");
            }
            ,error: function(){
                //请求异常回调
                layui.layer.msg("error");
            }
        });
    });
</script>
4.4 carousel

轮播图文章来源地址https://www.toymoban.com/news/detail-496248.html

<div class="layui-carousel" id="test1">
    <div carousel-item style="text-align: center;line-height: 280px">
        <div>条目1</div>
        <div>条目2</div>
        <div>条目3</div>
        <div>条目4</div>
        <div>条目5</div>
    </div>
</div>
<script>
    layui.use(['carousel'], function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
        });
    });
</script>

到了这里,关于Layui基础入门的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java虚拟机快速入门 | JVM引言、JVM内存结构、直接内存

    目录 一:JVM引言 1. 什么是 JVM ? 2. 常见的 JVM 3. 学习路线 二:JVM内存结构 1. 程 序 计 数 器(PC Register) 2. 虚 拟 机 栈(JVM Stacks) 3. 本 地 方 法 栈(Native Method Stacks) 4. 堆(Heap) 5. 方 法 区(Method Area) 三:直接内存 tips: 首先给大家推荐两款好用的免费软件:动图抓取软

    2024年02月05日
    浏览(66)
  • Datawhale 大模型基础理论 Day1 引言

    开源链接如下:https://github.com/datawhalechina/so-large-lm/blob/main/docs/content/ch01.md 语言模型的概念:即能够赋予每个有意义的词(token)以一定的概率的一个函数的集合。 语言模型可以被用来评估输入的质量,也可以根据prompt生成对应的内容(作画、描述、回答等) 温度,可以控制

    2024年01月16日
    浏览(35)
  • python数据分析基础《用数据讲故事》#0 引言

    在学校里,我们学习了很多关于语言和数学的知识。在语言方面,我们学习如何将单词组合成句子和故事。数学方面,我们学习如何理解数字。但很少有人将这两方面结合起来:没有人教我们如何用数字讲故事。更严峻的是,很少有人觉得自己天生就擅长这个领域。 这让我们

    2024年02月12日
    浏览(44)
  • notepad++官网地址 https://notepad-plus-plus.org/;notepad++ 官网地址 https://notepad-plus-plus.org/

    notepad++ 官网地址 https://notepad-plus-plus.org/ 今天想进官网下载notepad++ ,却发现百度搜索官网都是出来很多乱七八糟的,就自己记录一下 notepad++官网:https://notepad-plus-plus.org/ notepad++项目主页:https://github.com/notepad-plus-plus/notepad-plus-plus/

    2024年02月11日
    浏览(42)
  • 006-基础入门-抓包技术&HTTPS协议&APP&小程序&PC应用&WEB&转发联动

    先找到目标目录下的相关文件:在此文件目录打开cmd 安装过java的直接输入 java -jar BurpSuiteLoader_v2022.jar 准备工作: 1、浏览器安装证书:解决本地抓HTTPS 2.模拟器安装证书:解决模拟器抓HTTPS 实现目的: 掌握几种抓包工具证书安装操作 掌握几种HTTP/S抓包工具的使用 学会Web,A

    2024年01月19日
    浏览(53)
  • Layui快速入门之第一节Layui的基本使用

    目录 一:Layui的基本概念 二:Layui使用的基本步骤 1.在官网下载layui的基本文件,引入css和js文件 ①:普通方式引入 ②:第三方 CDN 方式引入 2.在script标签体中编写代码 3.测试                        Layui 是一套开源的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态

    2024年02月09日
    浏览(49)
  • layui介绍以及登录功能的实现

    Layui 是一套开源免费的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架,它更多是面向于后端开发者,即无需涉足各类构建工具,只需面向浏览器本身,便可将页面所需呈现

    2024年02月16日
    浏览(42)
  • 制造领域 基础概念快速入门介绍

    目录 1、基本背景知识  2、什么是BOM? 3、BOM有什么作用? 4、BOM有哪些形式? 4.1    按照用途划分 工程BOM——EBOM(Engineering BOM): 计划BOM——PBOM(Plan BOM): 设计BOM——DBOM(Design BOM): 制造BOM——MBOM(Manufacturing BOM): 客户BOM——CBOM(Customer BOM): 销售BOM——SBOM(SALE BOM): 维修

    2024年01月20日
    浏览(47)
  • PHP入门介绍及语言基础

    🌱博客主页:大寄一场. 😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注 目录 前言 一、变量和数据类型 二、运算符和表达式 三、条件语句 四、循环语句 PHP是一种非常流行的开源服务器端脚本语言,广泛用于Web开发。它可以与HTML、CSS和JavaScript配合使用,以动态生成内容。

    2024年02月05日
    浏览(43)
  • Layui之入门

    目录 一、layui介绍 1.是什么 2.谁开发的 3.特点 二、layui,easyui和bootstrap的区别 1.layui、easyui与bootstrap的对比   2. layui和bootstrap对比(这两个都属于UI渲染框架)  3. layui和easyui对比 三、基础使用 四、登录注册实例讲解 1.登录  2.注册  五、如何扩展一个layui(自定义模块) 1.是

    2024年02月13日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包