layui组件实例

最新推荐文章于 2023-07-13 12:41:22 发布
最新推荐文章于 2023-07-13 12:41:22 发布
阅读量724 收藏 3
点赞数 1
文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/persistence_PSH/article/details/115314759
版权

文章目录

组件实例

1、弹出层

1、使用方式

模块加载名称：layer，独立版本：https://layer.layui.com/

第一种作为独立组件使用，在https://layer.layui.com/下载组件包，在需要使用的页面加载1.8以上的jquery的js和layer.js文件

独立使用需要用到Bootstrap的jquery的js文件

<link rel="stylesheet" type="text/css" href="layui-v2.5.7/layui/css/layui.css">
还需要引入jquery的js文件
<script src="layui-v2.5.7/layui/layui.js" type="text/javascript" charset="utf-8"></script>

第二种layui模块化使用

只需要引入layui的css于js文件，在script中使用layui,use()加载模块

    <script type="">
        layui.use("layer",function() {
            var layer=layui.layer;
			<!--弹出的文本-->
            layer.msg("你好")
        })

    </script>

2、基础参数

类型：Number，默认：0

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

1、 type :0, 弹出的信息框，title:“XXXX”，如果不填，会默认显示“消息”，如果不想显示可一设置为title:“false”, title:[] 可以设置样式

`<script type="">
        layui.use("layer",function() {
            var layer=layui.layer;

            layer.open({
                type :0,
                title:"false",
                title:["?????","color:red"],
                content:"？？？？？"
            });
        })

    </script>

在这里插入图片描述

2、 type :1,弹出文本框

            layer.open({
                type :1,
                title:"false",
                content:"<div style='height: 333px; width: 444px;'>阿伟你又在打游戏哦</div>"
            });

在这里插入图片描述

3、type :2,弹出的是URL

			layer.open({
                type :2,
                title:"",
                content:"https://www.bilibili.com/",area:"500px"
            });

area 宽高

  • content:“https://www.bilibili.com/”,area:“500px” ，宽度为500，高度自适应
  • 也可以使用数组的方式 area:[“1000px”,“800px”]

在这里插入图片描述

4、加载层

             layer.open({
                type :3,
                title:"",
                content:"？？？？？"
            });

5、tips层 在元素旁边弹出

在 id=“sp” 的元素旁边弹出

			layer.open({
                type :4,
                title:"",
                content:["??????","#sp"]
            });

		   <spen id="sp">hanser</spen>

在这里插入图片描述

area - 宽高

类型：String/Array，默认：‘auto’

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

icon - 图标。信息框和加载层的私有参数

类型：Number，默认：-1（信息框）/0（加载层）

信息框默认不显示图标。当你想显示图标时，默认层可以传入0-6，如果是加载层，可以传入0-2。

layer.alert('阿伟已经死了',{icon:1});

在这里插入图片描述

layer.alert('阿伟已经死了',{icon:2});

在这里插入图片描述

layer.alert('阿伟已经死了',{icon:3});

在这里插入图片描述

layer.alert('阿伟已经死了',{icon:4});

在这里插入图片描述

layer.alert('阿伟已经死了',{icon:5});

在这里插入图片描述

layer.alert('阿伟已经死了',{icon:6});

在这里插入图片描述

layer.load();参数为0-2 为加载时的效果
在这里插入图片描述

3、示例

多次选择退出效果

            layer.msg("你想要退出吗？",{
                <!-- time : 0 表示不会自己消失-->
                time :0,
                <!--两个按钮-->
                btn:["确定退出","我点错了"],
                yes: function(index) {
                    layer.msg("你想要退出吗？",{

                	time :0,
                	btn:["确定退出","我点错了"],
                	yes: function(index) {
                    	layer.msg("你想要退出吗？",{
                		time :0,
                		btn:["确定退出","我点错了"],
                		yes: function(index) {
                   			 layer.close(index);
                   			 layer.msg("好吧，你赢了",{
                       			icon:6,
                       			btn:["要不在考虑下？"]
                   			})
                		}
            		})
                	}
            	})
                }
            });

在这里插入图片描述

layer.msg("这是常用的弹出层")

在这里插入图片描述

 layer.msg("这是会定时关闭的弹出层",{inco : 6});

在这里插入图片描述

 layer.msg("玩命加载中",function() {
                layer.msg("???????");
 });

效果非常多

2、日期与时间选择

layui.laydate

模块加载名称：laydate，独立版本：http://www.layui.com/laydate/

	<div class="layui-inline" style="margin-left: 10%;">
        <input type="text" class="layui-input" id="datel">
    </div>
    
    <script type="text/javascript">
        //加载模块
        layui.use("laydate",function(){
            var laydate=layui.laydate;
            //加载laydate实例
            laydate.render({
                elem:"#datel"
            });
        });
    </script>

在这里插入图片描述

基础参数选项

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

elem - 绑定元素

type - 控件选择类型

类型：String，默认值：date

 	<script type="text/javascript">
        //加载模块
        layui.use("laydate",function(){
            var laydate=layui.laydate;
            //加载laydate实例
            laydate.render({
                elem:"#datel"   //日期选择器
            });

            laydate.render({
                elem:"#date2",
                type:"year"     //年选择器
            });
            laydate.render({
                elem:"#date3",
                type:"month"    //年月选择器
            });
            laydate.render({
                elem:"#date4",
                type:"time"     //时间选择器
            });
            laydate.render({
                elem:"#date5",
                type:"datetime"     //年月日，时分秒
            });
        });
    </script>

在这里插入图片描述

format - 自定义格式

类型：String，默认值：yyyy-MM-dd

通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：

格式符说明
yyyy年份，至少四位数。如果不足四位，则前面补零
y年份，不限制位数，即不管年份多少位，前面均不补零
MM月份，至少两位数。如果不足两位，则前面补零。
M月份，允许一位数。
dd日期，至少两位数。如果不足两位，则前面补零。
d日期，允许一位数。
HH小时，至少两位数。如果不足两位，则前面补零。
H小时，允许一位数。
mm分钟，至少两位数。如果不足两位，则前面补零。
m分钟，允许一位数。
ss秒数，至少两位数。如果不足两位，则前面补零。
s秒数，允许一位数。
laydate.render({ 
     elem: '#date6'
     ,format: 'yyyy年MM月dd日'  //可任意组合
});

与原本的样式对比：

在这里插入图片描述

value - 初始值

类型：String，默认值：new Date()

支持传入符合format参数设定的日期格式字符，或者 new Date()

//传入符合format格式的字符给初始值
laydate.render({ 
  elem: '#date7'
  ,value: '2018-08-18' //必须遵循format参数设定的格式
});
 
//传入Date对象给初始值
laydate.render({ 
  elem: '#date8'
  ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});

在这里插入图片描述

3、分页

layui.laypage

模块加载名称：laypage ，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染：

 	<div id="page"></div>

    <script>
        //加载laypage模块
        layui.use("laypage",function(){
            var laypage =layui.laypage;

            //加载实例
            laypage.render({
                elem:"page",     //这里不需要加#号，elem绑定的是容器的id属性值，不需要加#
                count:100,       //一般是从服务器获取，这里写死
            })
        })
    </script>

在这里插入图片描述

基础参数

参数选项说明类型默认值
elem指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: ‘id’ 注意：这里不能加 # 号 2. elem: document.getElementById(‘id’)String/Object-
count数据总数。一般通过服务端得到Number-
limit每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。Number10
limits每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框Array[10, 20, 30, 40, 50]
curr起始页。一般用于刷新类型的跳页以及HASH跳页。如：codelayui.code//开启location.hash的记录laypage.render({ elem: 'test1' ,count: 500 ,curr: location.hash.replace('#!fenye=', '') //获取起始页 ,hash: 'fenye' //自定义hash值});Number1
groups连续出现的页码个数Number5
prev自定义“上一页”的内容，支持传入普通文本和HTMLString上一页
next自定义“下一页”的内容，同上String下一页
first自定义“首页”的内容，同上String1
last自定义“尾页”的内容，同上String总页数值
layout自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）Array[‘prev’, ‘page’, ‘next’]
theme自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的CSS类，以便自定义主题String-
hash开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页String/Booleanfalse
	<script>
        //加载laypage模块
        layui.use("laypage",function(){
            var laypage =layui.laypage;

            //加载实例
            laypage.render({
                elem:"page",     //这里不需要加#号，elem绑定的是容器的id属性值，不需要加#
                count:100,       //总数量，一般是从服务器获取，这里写死
                limit :5,       //表示每页5条
                limits :[5,10,20,30],   //每页条数选择，必须要加上layout
                layout:["prev","page","next","limit","count"],  //自定义的排版
                groups:10 ,     //连续显示的页码数
                prev :"不返回一下看看吗？" ,             //上一页
                next :"不要在点了，已经到最里面了啦",   //下一页
            })
        })
    </script>

在这里插入图片描述

jump - 切换分页的回调

当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）

            laypage.render({
                elem: 'page1'
                , count: 70 //数据总数，从服务端得到
                , jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数

                    //首次不执行
                    if (!first) {
                        //do something
                    }
                }
            });

在控制台上打印当前页，和每页显示的条数

在这里插入图片描述

isTrueLoveColour
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui案例
Zhangrunhong的博客
07-10 1374
文章目录1.导入相关依赖2.dao层去访问数据3.web层去调用dao层给前台返回数据4.在struts_sy.xml进行配置5.js界面6.写jsp 1.导入相关依赖 前言：这个案例写了一个用户表，和角色表，根据用户的所拥有权限展示菜单 用户的权限通过该用户所绑定的角色获得 角色绑定权限，用户通过角色间接获得权限 记住按钮和菜单同属于一张表所以要用 type做区分 自定义标签依赖：代码如下 &l...
Layui简介、layui例子
weixin_49756484的博客
06-19 3818
Layui简介 什么是Layui？ Layui（谐音：类UI）是一套开源的WebUI解决方案，采用自身经典的模块化规范，并遵循原生HTML/CSS/JS的开发方式，说明不会像我们之前的Bootstrap里面的js依赖jQuery。Layui则是原生的不会依赖于jQuery，也不会依赖于其他的插件 注意：它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，（它是WebUI的前端框架，但是它更多的是面向后端的开发者） Bootstrap面向的是前端的一个开发，Layui更多的是面向后端
LayUI框架示例整合
06-21
自己写的前端LayUI框架示例整合，适合小白学习（大神勿喷。谢谢）
案例layUI
qq_45935397的博客
01-20 661
登录:将layui文件导入到web目录下 编写账户名密码验证码的后台验证 用《a》看不清换一张《/a》标签设置刷新验证码 登录成功-->/home -->home.jsp 更新左上方的用户名 从session域中取出username el表达式在jsp通过key取值； 在域中的取值：先在request域中找；没有则在session中寻找；还是没有则会到ServletContext中找；再没有就是代码写错了 getServletContext()...
layui简单实例
loliDapao的博客
03-26 225
layui简单实例直接应用 http://www.shagua.wiki/
layui扩展组件之树形下拉多选组件
12-19
**layui扩展组件之树形下拉多选组件详解** 在前端开发中，用户界面的交互性和易用性是至关重要的。layui是一个轻量级、模块化的前端框架，它提供了丰富的组件来帮助开发者快速构建优雅的网页应用。在这个场景中，...
基于layui步骤进度条实例下载
07-28
"基于layui步骤进度条实例下载"是一个专为实现四步骤操作流程设计的UI组件，能够清晰地向用户展示任务的进展状态，提高用户的交互体验。 首先，我们要理解什么是“步骤进度条”。步骤进度条是一种视觉表现形式，...
springboot+layui简单demo实例
04-18
2. **Layui**: Layui是一款轻量级的前端UI框架，它提供了丰富的组件，如表格、按钮、提示、加载效果等，适用于后台管理系统。在Spring Boot应用中，Layui可以用于构建直观、易用的用户界面。 3. **IntelliJ IDEA**:...
layui前端时间戳转化实例
10-16
layui是一个轻量级的前端UI框架，提供了丰富的组件和模块，如表格、分页、层弹窗等，方便快速构建界面。 1. **layui表格渲染**： 在示例中，首先在HTML部分创建了一个`layui-table`类的表格，表格ID为`list`，并...
Layui示例-数据表格
m0_50869511的博客
03-05 286
table.render({ elem: '#test'//绑定一个表格（要和哪个表格绑定） ,url:'data.json'//数据来源 ,toolbar: '#toolbarDemo'//绑定按钮 ,title: '用户数据表'//标题，导出时的文件名就是这边的标题 ,totalRow: true ,cols: [[ {type: 'checkbox', fixed: 'left'}/...
layui离线文档，包含示例
10-13
layui示例
layer ui 实例
10-13
layer和layerui的开发工具包用来显示层 layer和layerui的开发工具包用来显示层 layer和layerui的开发工具包用来显示层
Layui各常用组件使用方法简单示例
12-14
此资源包括了Layui各常用组件的使用方法,前端页面功能以及与后端功能接口对接的简单示例
Web Echarts+layui 统计图表demo实例 (统计深圳市旅游景点信息)
10-14
使用Echarts+layui+html 开发数据统计图表，demo中统计的数据是深圳市旅游景点分析统计，内有深圳地图统计，饼图统计，柱状图统计，漏斗图统计，玫瑰饼图统计等图形展示
layui导出所有数据的例子
12-04
layui自带的导出，是导出当前页的数据，以下方法是导出所有数据 <button class="layui-btn layui-btn layui-btn-warm" οnclick="excl_rep()">导出</button> //导出 function excl_rep() { var SH=$("#type").val();//汇总分类 var SER = $("#ser_row").val(), ONETYPE = $("#type_one").val(),//一级分类 TWOTYPE = $('#type_two').val();//二级分类 var BRA
LayUi基础入门【附有案例从0到1详解】
m0_74315688的博客
07-11 4425
不怎么怎么使用LayUi？一篇文章保姆级教学，让你一秒学会使用LayUi！！
Layui之组件的基本使用及案例演示
ChatYU的博客
07-13 1339
Layui的组件很多，想要自己的网页功能更加完善，界面更加好看，就需要不断得去学习新的组件，先了解该框架有没有该功能，再参考官方文档，文档中有详细注解，总之，Layui是一款开源框架供我们学习使用还是非常友好的今天的学习总结就到这里💪💪💪t=N658在线示例 - Layuihttps://layui.org.cn/demo/index.html。
电脑端layui实例
linsa_pursuer的博客
06-14 1541
1.controller（所有数据都返回json，layui默认的json类型，默认数据为当月） package com.taxsearch.controller.sjpc; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Calendar; import java.util.Ha...
layerui弹框实例
如风
08-03 2970
可参考layerui官网实例，这里我将一个实例单独摘出来进行测试 1.showBox.jsp页面代码： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+pa
layui tabletreedj实例
最新发布
09-09
layui tabletreedj是一个基于layui框架的树形表格插件。它能够方便地实现树形结构的展示和操作。 使用layui tabletreedj可以轻松创建一个树形表格，并且可以添加、编辑、删除树节点。它还支持节点的展开和折叠，使得用户可以按需查看树的分支。 在使用tabletreedj时，我们需要引入必要的样式和脚本文件。然后通过简单的HTML结构定义表格的布局和样式。利用layui的数据表格组件，我们可以填充表格的内容并设置相关的属性，比如是否显示分页、每页显示的数量等。 对于树形结构的操作，tabletreedj提供了一些API接口，比如添加节点、编辑节点、删除节点等。通过这些接口，我们可以在表格中实现树节点的增删改操作。 此外，tabletreedj还支持节点的排序，我们可以通过拖拽节点来改变节点的顺序。这对于需要对树节点进行排序的场景非常有用。 总的来说，layui tabletreedj是一个简单实用的树形表格插件，它通过简洁的API接口和丰富的功能，可以帮助我们方便地展示和操作树形结构数据。无论是用于展示组织架构图，还是用于实现其他业务需求，tabletreedj都能够起到很好的作用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值