layui的弹出层，日期与时间选择，分页

最新推荐文章于 2024-06-06 13:37:47 发布
最新推荐文章于 2024-06-06 13:37:47 发布
阅读量3.1k 收藏 4
点赞数
文章标签： layui jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/serendipity_xr/article/details/119932408
版权

layui

内置模块

一.弹出层

1.使用场景

1.1 作为独立组件使用

  • 只是单独想使用 layer，去 layer 独立版本官网下载组件包。
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

  • 你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。
<link rel="stylesheet" href="layer/layer.css" />
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="layer/layer.js" ></script>
  • 通过script标签引入layer.js后，直接用即可
<script type="text/javascript">	
	//使用layer
	layer.msg("Hello");
</script>

1.2 layui 模块化使用

  • 在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
  • 通过layui.use(‘layer’, callback)加载模块
<script type="text/javascript">	
	//加载模块
	layui.use('layer',function(){
		var layer = layui.layer;
	});	
	//使用layer
	layer.msg("Hi,zhangsan!!!");
</script>

2.基础参数

2.1 type-基本层类型

  • 类型：Number，默认：0

可传入的值有：

  • 0(信息框，默认)
  • 1(页面层)
  • 2(iframe层)
  • 3(加载层)
  • 4(tips层)

2.2 title-标题

  • 类型：String/Array/Boolean，默认：‘信息’

title支持三种类型的值：

  • 若传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；
  • 若需要自定义标题区域样式，可以title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式；
  • 如果不想显示标题栏，你可以title: false

2.3 content-内容

  • 类型：String/DOM/Array，默认：’’
  • content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM。

2.4 area - 宽高

  • 类型：String/Array，默认：‘auto’
  • 在默认状态下，layer是宽高都自适应的
  • 当定义宽度时，可以area: ‘500px’，高度仍然是自适应的。
  • 当宽高都要定义时，可以area: [‘500px’, ‘300px’]
<body>
	<span>内容1</span>
	<span>内容2</span>
	<span>内容3</span>
	<span id="sp">内容4</span>		
<!--
两种使用方式：
	1.作为独立组件使用
		在layer独立版本官网下载组件包，在需要使用layer的页面加载1.8版本以上的jquery的js文件和layer.js文件
	2.layui模块化使用
		只需要引入layui的css与js文件，在script中使用layui.use()加载模块
-->
	<script type="text/javascript">	
		//使用layer
		//layer.msg("Hello");			
		//加载模块
		layui.use('layer',function(){
			var layer = layui.layer;
		});			
		//使用layer
//			layer.msg("Hi,zhangsan!!!");
		//信息框
		layer.open({
			type:0,
			//title:"系统消息",
			title:false,//不显示标题
			title:['标题','color:red;'],
			//content可以传入任意的文本或html
			content:"Hello"
		});
		
		//页面层
		layer.open({
			type:1,
			title:"系统消息",
			//content可以传入任意文本或html
			content:"<div style="height: 200px;width: 400px;">Hello</div>"
		});
		//iframe
		layer.open({
			type:1,
			title:"系统消息",
			//content是一个URL，如果你不想让iframe出现滚动条，你还可以content:['url','no']
			content:"http://www.baidu.com"
			//content:["http://www.baidu.com",'no']
			//,area:'500px'//设置宽度，高度自适应
			,area:['800px','400px']//设置宽高
		});
		//tips层
		layer.open({
			type: 4,
			content: ['内容','#sp']//数组第二项即吸附元素选择器或者DOM
		});
	</script>
</body>

2.5 icon - 图标

  • 信息框和加载层的私有参数
  • 类型：Number，默认：-1（信息框）/0（加载层）
  • 信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。
//eg1
layer.alert('酷毙了', {icon: 2});
//eg2
layer.msg('不开心', {icon: 5});

在这里插入图片描述

//eg3
layer.load(1); //风格1的加载

在这里插入图片描述

//eg1
layer.alter('很高兴见到你😊',{icon: 6});
//eg2
layer.msg('你愿意和我做朋友吗？',{
	time: 0,//不自动关闭
	btn:['当然愿意','狠心拒绝'],//按钮
	yes: function(index){
		layer.close(index);//关闭当前弹出框
		layer.msg('新朋友，你好！',{
			icon: 6,//图标
			btn:['开心','快乐']
		});
	}
});
//eg3
layer.msg('这是常用的弹出层');
//eg4
layer.msg('有点不开心',{icon: 5});
//eg5
layer.msg('玩命加载中...',function(){
	//关闭后操作
	layer.msg('关闭');
});

弹出层详细请查看官方文档：https://www.layui.com/doc/modules/layer.html#icon

二.日期与时间选择

  • layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式。

1.使用场景

1.1 作为独立组件使用

  • 去 layDate 独立版本官网下载组件包，引入 laydate.js 。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 去 layDate 独立版本官网下载组件包，引入 laydate.js

<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script type="text/javascript" src="js/laydate.js" ></script>
<link rel="stylesheet" href="css/laydate.css" />
  • 通过script标签引入layer.js后，直接用即可
<div class="layui-inline">
	<input type="text" class="layui-input" id="date1" />
</div>
<script>
	laydate.render({
		elem: '#date1'//指定元素
	});
</script>

结果展示：
在这里插入图片描述

1.2 layui 模块化使用

  • 下载 layui 后，引入layui.css和layui.js即可
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
  • 通过layui.use(‘laydate’, callback)加载模块后，再调用方法
<div class="layui-inline">
	<input type="text" class="layui-input" id="date1" />
</div>		
<script type="text/javascript">
	//加载laydate模块
	layui.use('laydate',function(){
		var laydate = layui.laydate;				
		//加载laydate示例
		laydate.render({
			elem: '#date1'//指定元素
		});
	});
</script>

结果展示：
在这里插入图片描述

2.基础参数

2.1 elem - 绑定元素

  • 类型：String/DOM，默认值：无
  • 必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象
laydate.render({ 
  elem: '#date1' //或 elem: document.getElementById('date1')、elem: lay('#date1') 等
});

2.2 type-控件选择类型

  • 类型：String，默认值：date

  • 用于单独提供不同的选择器类型，可选值如下表：

type可选值名称用途
year年选择器只提供年列表选择
month年月选择器只提供年、月选择
date日期选择器可选择：年、月、日。type默认值，一般可不填
time时间选择器只提供时、分、秒选择
datetime日期时间选择器可选择：年、月、日、时、分、秒
<div class="layui-inline">
			<input type="text" style="border-color: #00FFFF;" class="layui-input" id="date1" />
		</div>
		<hr>
		<div class="layui-inline">
			<input type="text" style="border-color: #00FFFF;" class="layui-input" id="date2" />
		</div>
		<hr>
		<div class="layui-inline">
			<input type="text" style="border-color: #00FFFF;" class="layui-input" id="date3" />
		</div>
		<hr>
		<div class="layui-inline">
			<input type="text" style="border-color: #00FFFF;" class="layui-input" id="date4" />
		</div>
		<hr>
		<div class="layui-inline">
			<input type="text" style="border-color: #00FFFF;" class="layui-input" id="date5" />
		</div>
		<hr>
		<div class="layui-inline">
			<input type="text" style="border-color: #00FFFF;" class="layui-input" id="date6" />
		</div>
		
		<script type="text/javascript">
			//加载laydate模块
			layui.use('laydate',function(){
				var laydate = layui.laydate;				
				//加载laydate示例
				laydate.render({
					elem: '#date1'//绑定id为date1的元素
				});
				
				laydate.render({
					elem: '#date2',//绑定id为date2的元素
					type:"year"//年选择器
				});
				
				laydate.render({
					elem: '#date3',//绑定id为date3的元素
					type:"month"//年月选择器
				});
				laydate.render({
					elem: '#date4',//绑定id为date4的元素
					type:"date"//年月日选择器
				});
				laydate.render({
					elem: '#date5',//绑定id为date5的元素
					type:"time"//时间(时分秒)选择器
				});
				laydate.render({
					elem: '#date6',//绑定id为date3的元素
					type:"datetime"//年月日时分秒选择器
				});
			});
		</script>

结果展示：
在这里插入图片描述

2.3 range - 开启左右面板范围选择

  • 类型：Boolean/String/Array，默认值：false
  • 如果设置 true，将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。
//日期时间范围选择
laydate.render({ 
  elem: '#date7',
  type: 'datetime',
  range: true
});

结果展示：
在这里插入图片描述

2.4format - 自定义格式

  • 类型：String，默认值：yyyy-MM-dd
  • 通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：
格式符说明
yyyy年份，至少四位数。如果不足四位，则前面补零
y年份，不限制位数，即不管年份多少位，前面均不补零
MM月份，至少两位数。如果不足两位，则前面补零。
M月份，允许一位数。
dd日期，至少两位数。如果不足两位，则前面补零。
d日期，允许一位数。
HH小时，至少两位数。如果不足两位，则前面补零。
H小时，允许一位数。
mm分钟，至少两位数。如果不足两位，则前面补零
m分钟，允许一位数
ss秒数，至少两位数。如果不足两位，则前面补零。
s秒数，允许一位数。

例如：

格式示例值
yyyy-MM-dd HH:mm:ss2021-08-12 21:12:45
yyyy年MM月dd日 HH时mm分ss秒2021年08月18日 20时08分08秒
yyyyMMdd20190818
dd/MM/yyyy16/09/2021
yyyy年M月2021年8月
M月d日8月15日
北京时间：HH点mm分北京时间：20点08分
yyyy年的M月某天晚上，大概H点2018年的8月某天晚上，大概20点
//自定义日期格式
laydate.render({ 
  elem: '#date8',
  //format: 'yyyy/MM月dd日'
  format: 'yyyy年MM月dd日' //可任意组合
});

结果展示：
在这里插入图片描述

2.5 value - 初始值

  • 类型：String，默认值：new Date()
  • 支持传入符合format参数设定的日期格式字符，或者 new Date()
//传入符合format格式的字符给初始值
laydate.render({ 
	  elem: '#date9',
	  value: '2018-08-18' //必须遵循format参数设定的格式
	});
	 
	//传入Date对象给初始值
	laydate.render({ 
	  elem: '#date10',
	  value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
	});

日期与时间选择详细请查看官方文档：https://www.layui.com/doc/modules/laydate.html

三.分页

1.引入layui.css和layui.js

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

2.加载模块

<div id="page"></div>		
<script type="text/javascript">
	//加载laypage模块
	layui.use('laypage',function(){
		var laypage = layui.laypage;
		
		//加载laypage实例
		laypage.render({
			elem:"page",//elem属性绑定的是容器的ID属性值，不需要加#
			count:100,//总数量，一般通过服务端获取
			limit:5,//每页显示的数量
			limits:[5,10,20,30],//每页条数的选择项
			layout:['prev','pagee','next','limit','count'],//自定义排版
			groups:10,//连续显示的页码数
		});
	});
</script>

结果展示：
在这里插入图片描述

3.基础参数

参数选项说明类型默认值
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跳页。如：
//开启location.hash的记录
laypage.render({
elem: ‘test1’,
count: 500,
curr: location.hash.replace(’#!fenye=’, ‘’), //获取起始页
hash: ‘fenye’ //自定义hash值
});		Number1
groups连续出现的页码个数Number5
prev自定义“上一页”的内容，支持传入普通文本和HTMLString上一页
next自定义“下一页”的内容，支持传入普通文本和HTMLString下一页
first自定义“首页”的内容，支持传入普通文本和HTMLString1
last自定义“尾页”的内容，支持传入普通文本和HTMLString总页数值
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

4.jump - 切换分页的回调

  • 当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
<script type="text/javascript">
	//加载laypage模块
	layui.use('laypage',function(){
		var laypage = layui.laypage;
		//切换分页的回调
		laypage.render({
			elem:"page",//elem属性绑定的是容器的ID属性值，不需要加#
			count:100,//总数量，一般通过服务端获取
			limits:[5,10,20],//每页条数的选择项
			layout:['prev','page','next','limit','count'],//自定义排版
			groups:10,//连续显示的页码数
			jump:function(obj,first){
				//obj包含了当前分页的所有参数，比如
				console.log(obj.curr);//得到当前页，以便向服务端请求对应页的数据
				console.log(obj.limit);//得到每页显示的条数
				
				//首次不执行
				if(!first){
					
				}
			}
		});

	});
</script>

结果展示：
在这里插入图片描述

分页详细请查看官方文档：https://www.layui.com/doc/modules/laypage.html

serendipity_xr
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui表单选择时间_layui弹窗的基本设置+自定义弹窗按钮事件+弹窗中的时间控件+单选框的选中状态改变...
weixin_32150027的博客
02-01 1477
//规划编制添加界面functionguihuabianzhi(){//layui页面弹窗layer.open({type :1,title :"添加信息",//弹窗名字offset : '0px' //整体弹窗距离顶端位置,id :'layerDemo' //防止重复弹出,content : $("#detailTable"),area : ['1800px', '800px' ],//弹窗面积...
layui时间范围选择器，一个选择框
qq_38181746的博客
07-20 765
layui时间范围选择器，封装
layer open弹层 页面层 laydate 日期控件点击一闪消失的解决方法
wh445306
11-29 1570
bug症状：点击选择日期，弹出的框会一闪而即消失，但是切换窗口回来自己又出来了。参考网上的说法添加trigger: ‘click’ 直接没任何反应了。 如果你的现象跟我的一样，那么解决方案如下： 父页面定义弹层内容不能用如下这种方式： <div class="layui-row" id="test" style="display: none;"> 应该使用以下方式 <script type="text/html" id="test"> 网上还有几种说法： 删除：l.
【LayUI时间控件与弹出层】
qq_43534564的博客
12-12 419
根据需求写laydate.render()的内容。：在弹出层中加载时间控件时，出现时间控件点击无效的问题。：在弹出层加载成功后重新加载时间控件。
layer.open弹出框放置一个时间控件
最新发布
xpyunjia的博客
06-06 219
https://download.csdn.net/download/xpyunjia/89403582
layui弹出层laydate时间选择一闪而过，无法弹出时间选择
无极低码
07-01 1527
问题：layUI日期框弹不出，一闪而过。解决方案：关键代码，添加如下代码。
layer.open加上时间
xylyaya的博客
06-17 1184
layer.open({ title: '停用截至日期', content: '<input type="date" id="deadline" />', yes: function(index, layero){ var deadline = $('#deadline').val(); } }) 这样日期就可以获取到了，格式貌似是yyyy-MM-dd。 ...
Kalendae日历控件+layer弹框
04-14
包含了一些扩展方法如：//清空选择、返回本月、快速选择、单击事件【获取单击的日期】等
layui列表分页+添加修改！！！
05-13
当用户点击“添加”按钮时，可以弹出layui的layer模块来显示表单，提交后通过Ajax发送数据到服务器，成功后刷新列表。同样，对于“修改”，可以先根据列表中的某一行数据初始化表单，然后进行编辑和提交操作。 以...
layui-v2.5.6
07-04
4. **弹窗（layer）**：layer组件用于创建弹出层，可以是对话框、图片预览、iframe嵌入等，具有丰富的配置选项。 5. **导航（nav）**：导航组件支持树形结构，适用于构建多级菜单或面包屑导航。 6. **图标（icon）**...
带时间的日期控件 自动向上或向下弹出 JS
09-01
带时间的日期 JS控件 弹出框可以根据窗体可视高度判断向上弹出或者向一弹出。
解决在layer.open中使用时间控件laydate失败的问题
10-16
今天小编就为大家分享一篇解决在layer.open中使用时间控件laydate失败的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui后台管理系统完整版免费版本
05-22
5. **弹出层（Layer）**：用于弹出对话框、提示信息等，支持多种类型和自定义配置。 6. **导航（Nav）**：构建菜单和导航栏，支持多级菜单和选中状态。 7. **图标（Icon）**：内置大量矢量图标，方便美化界面。 8. *...
layui-2.5.6.zip
11-30
3. 弹出层：layui的弹出层组件可实现对话框、提示、图片预览等多种功能，且支持自定义内容，灵活度极高。 4. 导航菜单：layui的导航菜单组件可以轻松构建多级菜单，适应各种布局需求，支持响应式设计，自动适配不同...
layui文档(官网下线前版本)
10-22
6. **弹出层laylayer**：laylayer不仅用于简单的提示，还可以实现图片预览、iframe嵌入、表单提交、全屏展示等多种功能，是layui中非常实用的一个组件。 7. **导航与菜单**：layui提供了多种导航样式，包括顶部导航...
layer.open里面写laydate不弹出日期选择器与选择器闪退问题
weixin_40707378的博客
05-27 1361
1.layui中layer.open()模板中时间选择器导致的闪退的问题？ 原因:隐藏的面板中可能存在两个(html)导致时间选择器不知道选中那一层 解决办法: 使用<script ></script>将html代码块包裹起来。 <script id="importBox2" type="text/html"> <form id="importFormBox1" class="form-horizontal" acti...
layui里面layer弹窗渲染layerdate,时间控件不出现，闪现问题，F12才出来
雷绍发
04-19 7574
直接说解决办法吧！ 排除法，首先看type类型 首先说第一种 layer.open({ type: 1, content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 }); 这种基本不会出现高度问题，一般出现这种情况就是冒泡，虽然都知道冒泡 但是这里也是可能会遇到2种情况的， 1：通过按钮或者...
layui表格与layui分页组件搭配使用
05-16
layui表格与layui分页组件可以很好地搭配使用，可以实现数据的分页展示，具体使用方法如下： 1. 引入layui框架和相关样式文件： ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值