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

  除了前几篇文章介绍的弹出框类型外,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.mfbz.cn/a/31114.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Spring Security】的RememberMe功能流程与源码详解

文章目录 前言原理 基础版搭建初始化sql依赖引入配置类验证 源码分析 进阶版集成源码分析疑问1疑问2 鉴权 升级版集成初始化sql配置类验证 源码分析鉴权流程 扩展版 前言 之前我已经写过好几篇权限认证相关的文章了&#xff0c;有想复习的同学可以查看【身份权限认证合集】。今…

MIT 6.S081 Lab Four

MIT 6.S081 Lab Four 引言trapsRISC-V assembly (easy)代码解析 Backtrace(moderate)代码解析 Alarm(Hard)test0: invoke handler(调用处理程序)test1/test2(): resume interrupted code(恢复被中断的代码)代码解析issue解答 可选的挑战练习 引言 本文为 MIT 6.S081 2020 操作…

JDBC BasicDAO详解(通俗易懂)

目录 一、前言 二、BasicDAO的引入 1.为什么需要BasicDAO&#xff1f; 2.BasicDAO示意图 : 三、BasicDAO的分析 1.基本说明 : 2.简单设计 : 四、BasicDAO的实现 0.准备工作 : 1.工具类 : 2.JavaBean类 : 3.BasicDAO类 / StusDAO类 : 4.测试类 : 一、前言 第七节内容…

Jenkins+Docker 实现一键自动化部署项目!步骤齐全,少走坑路

大家好&#xff0c;我是互联网架构师&#xff01; 本文章实现最简单全面的Jenkinsdockerspringboot 一键自动部署项目&#xff0c;步骤齐全&#xff0c;少走坑路。 环境&#xff1a;centos7git(gitee) 简述实现步骤&#xff1a;在docker安装jenkins&#xff0c;配置jenkins基…

数据结构:二叉树经典例题(单选题)-->你真的掌握二叉树了吗?(第一弹)

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关二叉树的经典例题&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数…

Sentinel的限流和Gateway的限流差别?

Sentinel的限流与Gateway的限流有什么差别&#xff1f; 问题说明&#xff1a;考察对限流算法的掌握情况 限流算法常见的有三种实现&#xff1a;滑动时间窗口&#xff0c;令牌桶算法&#xff0c;漏桶算法。gateway则采用基于Redis实现的令牌桶算法。但是我们不会去用&#xff…

ubuntu常用命令

设置root密码 安装好ubuntu后谁也不知道root密码是多少&#xff0c;可以借助于passwd命令来设置root密码。 sudo passwd root 同理修改其他用户只需替换上方用户名即可 换源 备份原始文件 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 修改源文件 sudo vim /et…

数据链路层(MAC)、网络层(IP)、传输层(TCP/UDP)抓包分析

目录 OSI七层模型数据包逐层封装头部抓包分析数据包概况数据链路层抓包网络层抓包&#xff08;IP协议抓包&#xff09;UDP抓包数据负载抓包 Linux cooked-mode capture OSI七层模型 OSI模型&#xff08;OSI model&#xff09;&#xff0c;开放式系统互联通信参考模型&#xff…

台电x80HD 安装linux系统,可调电压电源供电,外网访问、3D打印klipper固件

一、系统安装 参照https://blog.csdn.net/gangtieren/article/details/102975027安装 安装过程遇到的问题&#xff1a; 1、试了 linux mint 21 、ubuntu20.04 、ubuntu22.04 都没有直接安装成功&#xff0c;u盘选择安装进入系统后一直黑屏&#xff0c;只有ubuntu18.04 选择后稍…

ChatGPT读PDF、生成思维导图的几种方案

大家好&#xff0c;我是可夫小子&#xff0c;《小白玩转ChatGPT》专栏作者&#xff0c;关注AIGC、读书和自媒体。 日常办公&#xff0c;我们离不开pdf文档读取&#xff0c;思维导图制作&#xff0c;那么ChatGPT能够给我们什么帮助呢&#xff1f; 通常的方法是&#xff1a;我们…

【大数据】大数据相关概念

文章目录 大数据&#xff1a;一种规模大到在获取、存储、管理、分析方面大大超出了传统数据库软件工具能力范围的数据集合&#xff0c;具有海量的数据规模、快速的数据流转、多样的数据类型以及价值密度四大特征。Hadoop&#xff1a;是一个能够对大量数据进行分布式处理的软件框…

华硕天选2ubuntu18.04升级内核后黑屏

https://piaoyun.cc/post/26957.html 1.开机&#xff0c;进入grub画面 2.按’‘‘e’’’ 进入编辑开机指令的模式,同样找到’‘‘quite splash’’,并在后面加上对应的字。 1.Intel 82852/82855 或8系列显示晶片&#xff1a;i915.modeset1或i915.modeset0 2.Nvidia&#xff…

Pytest教程__钩子方法setup、teardown、setup_class、teardown_class(8)

pytest跳过用例执行的用法与unittest跳过用例大致相同。 pytest跳过用例的方法如下&#xff1a; pytest.mark.skip(reason)&#xff1a;无条件用例。reason是跳过原因&#xff0c;下同。pytest.mark.skipIf(condition, reason)&#xff1a;condition为True时跳过用例。 pyte…

设计模式之单例模式

一.单例模式 1.1 定义 我们来解释一下什么是单例模式.在软件系统中有很多对象,他们在同一时刻只能被一个用户或者多个线程访问,如果被共享的word文档在同一时间内,只能由一个用户对其进行写操作. 换一种说法就是 在单例模式中&#xff0c;类自身负责创建自己的唯一实例&#…

从零开始 Spring Boot 47:缓存

从零开始 Spring Boot 47&#xff1a;缓存 图源&#xff1a;简书 (jianshu.com) Spring 提供一个简单但使用的缓存&#xff08;Cache&#xff09;机制&#xff0c;我们可以利用它来优化代码执行效率。 简单示例 老规矩&#xff0c;我们从一个简单示例开始&#xff1a; Serv…

夜不收见证:夫妻从内江到成都,从真诚到真相

他们从四川内江的一条小巷&#xff0c;走进了成都的大街小巷。那里的房屋挨挨挤挤&#xff0c;像是在讲述他们曾经的梦想和勇气。他们是那些在内江的土地上种下了友情种子的少年&#xff0c;他们在成都的大地上&#xff0c;硕果累累。 他们从初中的课桌前走到了成人的世界里&am…

特征选择:过滤法,嵌入法,包装法

特征选择时首先要去除冗余特征。 它是由其他其他的特征中推演出来的。比如&#xff0c;一个球的体积&#xff0c;那么半径这个特征就是冗余的&#xff0c;因为我们可以由球的体积推算半径。冗余特征在很多时候都是不起作用的 过滤法 过滤方法通常用作预处理步骤&#xff0c;特…

6、DuiLib控件消息响应处理

文章目录 1、DuiLib控件消息响应处理2、基本的消息响应处理 Notify3、仿 MFC 形式消息响应 DUI_DECLARE_MESSAGE_MAP4、事件委托 MakeDelegate5、消息捕获&#xff08;拦截&#xff09;原生消息 HandleMessage 1、DuiLib控件消息响应处理 <?xml version"1.0" en…

PromptBench:大型语言模型的对抗性基准测试

PromptBench是微软研究人员设计的一个用于测量大型语言模型(llm)对对抗性提示鲁棒性的基准测试。这个的工具是理解LLM的重要一步&#xff0c;随着这些模型在各种应用中越来越普遍&#xff0c;这个主题也变得越来越重要。 研究及其方法论 PromptBench采用多种对抗性文本攻击&am…

前端后端交互-ElementUI(日期选择器)

日期选择器 页面效果 页面效果 组件源码 <!-- daterange: 范围选择类型format: 绑定后表单中显示的格式value-format: 传递时显示的格式--> <template><el-date-picker v-model"rangeTime" type"daterange" range-separator"至" …
最新文章