layui框架学习(27:弹出层模块_其它用法)

news2024/12/29 7:49:39

  除了前几篇文章介绍的弹出框类型外,layui的layer弹出层模块还支持相册框和tab框,所谓相册框即点击图片或按钮后会出现一个类似相册的页面单独浏览、切换图片,而tab框是指弹出框的显示形式类似于Winform中的TabControl控件,能以选项卡的形式切换内容,这两类弹出框也是layer模块底层open函数的特定应用。
  相册框的函数原型为layer.photos(options),其支持传入json和直接读取页面图片两种方式,json方式的话请参照参考文献2中的代码示例,本文结合之前学习轮播模块的示例演示直接读取页面图片的相册框用法。用法其实比较简单,主要是在options参数集合中使用photos参数指定页面中包含图片的元素类或者id即可。用法及效果如下所示(点击轮播图片显示相册框):

<fieldset class="layui-elem-field" style="width: 610px;">
  <legend>龙珠人物展示</legend>
  <div class="layui-field-box layui-carousel" id="test">
	  <div carousel-item>
	   <img src="dragonball/wukong.jpg" alt="悟空" />
	   <img src="dragonball/kelin.jpg" alt="克林" />
	   <img src="dragonball/duandi.jpg" alt="短笛大魔王"/>
	   <img src="dragonball/beijita.jpg" alt="贝吉塔">
	   <img src="dragonball/yamucha.jpeg" alt="雅木茶">			   
	  </div>			  
  </div>
</fieldset>
<script>
	layui.use(['carousel','layer'], function(){
	  var carousel = layui.carousel;
	  var layer = layui.layer;
	  var $ = layui.jquery;
	  
	  //建造实例
	  carousel.render({
		elem: '#test',
		width: '600px' ,//设置容器宽度
		height:'400px',
		arrow: 'always' ,
		autoplay:true,
		interval:2000,
		indicator:'none'
	  });
	});
	
	layer.photos({
	  photos: '#test'
	  ,anim: 5 
	}); 
</script>

在这里插入图片描述
在这里插入图片描述
  tab框的函数原型为layer.tab(options) ,其用法与相册框类似,只不过是用tab参数指定选项卡集合,每个选项卡包含title和content两个属性。用法及效果如下所示(第二个、第三个选项卡中的内容走样了,暂时不清楚怎么回事。):

	layer.tab({
	     tab: [{
	       title: '早发白帝城', 
	       content: '朝辞白帝彩云间,千里江陵一日还。<br />两岸猿声啼不尽,轻舟已过万重山。'
	     }, {
	       title: '赠汪伦', 
	       content: '李白乘舟将欲行,忽闻岸上踏歌声。<br />桃花潭水深千尺,不及汪伦送我情。'
	     }, {
	       title: '望庐山瀑布', 
	       content: '日照香炉生紫烟,遥看瀑布挂前川。<br />飞流直下三千尺,疑是银河落九天。'
	     }]
	   });

在这里插入图片描述
  layer模块中的底层核心函数open,其函数原型为layer.open(options) ,options中最重要的参数为type,其取值范围为0-4,意义为:0(信息框)、1(页面层)、2(iframe层)、3(加载层)、4(tips层)。之前文章介绍的各类弹出框对应的type值如下:

序号函数名称type参数值
1msg0
2alert0
3load3
4confirm0
5tips4
6prompt1
7photos1
8tab1

  参考文献5中对layer模块各种弹出框有详尽的使用示例,在此不再赘述。主要说一下type=2时的iframe框,通过参考文献5中的示例演示,除了可以通过content参数链接本机页面或其它网址之外,还可以在父页面和弹出框之间交互(主要是用过parent参数进行交互),感兴趣的可以仔细学习参考文献5中的各类示例。
  layer模块中的各类弹出框相关函数调用后会返回弹出框的索引,类似于弹出框的唯一标识。layer模块提供基于弹出框索引操作弹出框的各类辅助函数,包括置顶弹出框、设置弹出框标题、设置弹出框样式等,在此不再一一列出,有需要的话可以在参考文献2中按需学习、使用。

  基础参数move设置触发弹出框拖拽的元素,默认为标题,也即鼠标按住标题区域拖拽弹出框。
  基础参数moveOut设置弹出框是否能拖拽到窗口外,默认为false,参数的效果如下所示:
在这里插入图片描述
  基础参数minStack设置弹出框最小化时的位置,默认值为true,最小化时在页面左下角,值为false时弹出框最小化时会在原始位置显示最小化框。
  其它基础参数主要是弹出框的各类事件处理函数,包括moveEnd设置弹出框拖拽后的事件处理函数;success设置弹出框创建创建完成后的事件处理函数,感觉类似windorm的load或shown事件;yes设置点击确定按钮或者是按钮组第一个按钮时的事件处理函数;cancel设置点击弹出框右上角关闭按钮时的事件处理函数;end设置弹出框销毁时的事件处理函数;full/min/restore设置弹出框最大化、最小化、还原后的事件处理函数。

  至此粗略的将layui中的弹出层layer模块学习了一遍,很多细节都没有涉及到,后续会结合开源项目及官网教程继续深入学习layer模块的用法。

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://layui.gitee.io/v2/layer/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/660879.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何把一个 Git 仓库的分支加入另一个无关的 Git 仓库

文章目录 笔者需要将两个无关的 Git 仓库合并&#xff0c;也就是把一个 Git 仓库的分支加入另一个无关的 Git 仓库。笔者琢磨了一下之后就实现了。方法如下。 笔者的运行环境&#xff1a; git version 2.37.0.windows.1 TortoiseGit 2.11.0.0 IntelliJ IDEA 2023.1.1 (Ultima…

vue2_markdown的内容目录生成

文章目录 ⭐前言⭐引入vue-markdown&#x1f496; 全局配置&#x1f496; 渲染选项&#x1f496; 取出markdown的标题层级 ⭐结束 ⭐前言 大家好&#xff01;我是yma16&#xff0c;本文分享在vue2的markdown文本内容渲染和目录生成 背景&#xff1a; 优化个人博客功能&#xf…

Spring MVC简介附入门案例

目录 一、SpringMVC简介 1.1 MVC模型 1.2 SpringMVC 二、SpringMVC入门案例 2.1 创建项目 2.2 引入依赖和tomcat插件 2.3 修改web.xml文件 2.4 新建springmvc.xml文件 2.5 编写控制器 2.6 配置运行方式 2.7 运行测试 三、SpringMVC执行流程 3.1 SpringMVC的组件…

【FreeRTOS】FreeRTOS动态创建任务与删除

0. 实验准备 正点原子 STM32407ZG 探索者开发板 FreeRTOS 例程模板&#xff08;可以在这一篇文章找到&#xff1a;STM32F407 移植 FreeRTOS&#xff09; 1. 动态创建任务函数 API 1.1 函数简介 动态创建任务需要使用到BaseType_t xTaskCreate函数&#xff0c;我们可以在 Fr…

unittest教程__TestSuite测试套件(2)

在前面一章中演示了unittest如何执行一个简单的测试&#xff0c;但有两个问题&#xff1a; 我们知道测试用例的执行顺序是根据测试用例名称顺序执行的&#xff0c;在不改变用例名称的情况下&#xff0c;我们怎么来控制用例执行的顺序呢&#xff1f;一个测试文件&#xff0c;我…

事务底层与高可用原理

一、redo日志 在事务的实现机制上&#xff0c;MySQL采用的是WAL&#xff08;Write-ahead logging&#xff0c;预写式日志&#xff09;机制来实现的。 就是所有的修改都先被写入到日志中&#xff0c;然后再被应用到系统中。通常包含redo和undo两部分信息。 redo log称为重做日…

Spring执行流程和Bean的生命周期

1、Spring执行流程2、Bean的生命周期&#xff08;重点&#xff09;2.1、实例化和初始化的区别2.2、为什么先设置属性再进行初始化呢&#xff1f; 1、Spring执行流程 Spring执行流程&#xff08;Bean执行流程&#xff09;&#xff1a;1、在启动类中遇到了ApplicationContext的时…

【微服务】在window下安装nacos以及可能遇到的问题

介绍 这里是小编成长之路的历程&#xff0c;也是小编的学习之路。希望和各位大佬们一起成长&#xff01; 以下为小编最喜欢的两句话&#xff1a; 要有最朴素的生活和最遥远的梦想&#xff0c;即使明天天寒地冻&#xff0c;山高水远&#xff0c;路远马亡。 一个人为什么要努力&a…

【029】C++静态成员和 this 指针详解

C静态成员和 this 指针详解 引言一、静态成员1.1、静态成员变量1.2、静态成员变量的使用示例1.3、静态成员函数1.4、单例模式设计 二、C面向对象模型2.1、成员变量和函数的存储2.2、this 指针2.3、this 指针的应用2.4、const修饰成员函数 总结 引言 &#x1f4a1; 作者简介&…

.NET6创建Windows服务

之前的文章已经写过了创建Windows服务。 C#创建Windows服务_c# 创建windows服务_故里2130的博客-CSDN博客 不过之前使用的是.NET Framework创建的Windows服务。现在已经2023年了&#xff0c;其中vs2022有新的方法去创建Windows服务&#xff0c;本次使用.NET6创建Windows服务。…

网络层:虚拟专用网VPN和网络地址转换NAT

1.网络层&#xff1a;虚拟专用网VPN和网络地址转换NAT 笔记来源&#xff1a; 湖科大教书匠&#xff1a;虚拟专用网VPN和网络地址转换NAT 声明&#xff1a;该学习笔记来自湖科大教书匠&#xff0c;笔记仅做学习参考 1.1 虚拟专用网VPN 专用网和公用网的特点 专用网络&#xff…

远程访问VPN配置与验证实验:构建安全的远程连接

远程访问VPN配置与验证实验&#xff1a;构建安全的远程连接 【实验目的】 理解远程访问 VPN的含义。掌握远程访问 VPN的含义。掌握VPN Client软件的使用。验证配置。 【实验拓扑】 实验拓扑如下图所示。 实验拓扑 设备参数表如下表所示。 设备参数表 设备 接口 IP地址 …

【软件设计】模块设计耦合的七种类型

一.什么是高内聚、低耦合&#xff1f; 在结构化分析与模块设计方法中&#xff0c;模块化是一个很重要的概念&#xff0c;它是将一个待开发的软件分解成为若干个小的模块&#xff0c;每个模块可以独立地开发、测试。使得复杂问题的“分而治之”&#xff0c;令程序的结构清晰、易…

ubuntu 20.04 linux6.3.8 qemu arm64 平台 制作ext4根文件系统

前言 可以参考 ubuntu 20.04 qemu linux6.0.1 制作ext4根文件系统 因为需要验证 aarch64 平台下的 glib 库&#xff0c;所以重新搭建了 Linux qemu arm64 的 测试环境 这一篇&#xff0c;开始制作 rootfs 根文件系统&#xff0c;让qemu arm64 平台上的 Linux 系统跑起来 开…

一个springboot项目的jenkins持续集成配置

目录 1.项目基本情况 2.jenkins的下载 1) 安装jdk 2&#xff09;下载、启动和配置jenkins 3. 启动Jenkins 4. 安装Jenkins插件 5. 重启jenkins 6.jenkins工具的配置 1&#xff09; jdk的路径配置 7.创建springboot项目的持续集成任务 1) 新建项目 2&#xff09;代…

倒闭了

前两天在群里听到有人发消息&#xff0c;说是「有陪」倒闭了&#xff0c;然后我去看了相应的消息&#xff0c;看到了下面的图。 一些老的读者可能知道我之前有一段创业经历&#xff0c;这段创业经历就是有陪&#xff0c;我从恒大的时候就开始给有陪做事&#xff0c;那时候我一个…

stm32 滑膜观测器+PLL 锁相环 FOC 无感无刷电机控制

上一期为大家介绍了滑膜观测器正反切的应用案例&#xff0c;收到不少小伙伴的反馈是否有PLL的案例&#xff0c;大概看了一下网上的资料&#xff0c;讲理论的很多&#xff0c;能转化成源码的几乎没有。前半年工作和家里的事情都比较多&#xff0c;一拖再拖&#xff0c;终于在6月…

Attention U-Net:Learning Where to Look for the Pancreas论文总结和代码实现

论文&#xff1a; https://arxiv.org/abs/1804.03999 中文版&#xff1a;https://blog.csdn.net/hhw999/article/details/110134398 源码&#xff1a; https://github.com/ozan-oktay/Attention-Gated-Networks 目录 一、论文背景和出发点 二、创新点 三、Attention U-Net的…

【5G MAC】5G中传输块(TBS)大小的计算方式

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…

【学习日记2023.6.18】之 分布式缓存redis持久化_redis主从_reids哨兵_redis分片集群

文章目录 分布式缓存1. Redis持久化1.1 RDB持久化1.1.1 执行时机1.1.2 RDB原理1.1.3 小结 1.2 AOF持久化1.2.1 AOF原理1.2.2 AOF配置1.2.3 AOF文件重写 1.3 RDB与AOF对比 2 Redis主从2.1 搭建主从架构2.1.1 准备实例和配置2.1.2 启动2.1.3 开启主从关系2.1.4 测试 2.2 主从数据…