航歌 - 做最好的开发者知识平台

留言首页

当前位置：
首页
>
编程社区
>
其他
> layer - 简单好用的Web弹出层组件使用详解3（输入框、图片查看）

layer - 简单好用的Web弹出层组件使用详解3（输入框、图片查看）

2018-05-26 发布：hangge 阅读：1758

七、输入框（prompt）

输入提示框（prompt）弹出后我们可以在里面进行输入，点击确定后可以获取到输入的内容。prompt 提示框除了可以传入基础参数，还可以传入 prompt 专用的属性。

1，基本用法

layer.prompt(function(value, index, elem){
alert(value); //得到value
layer.close(index);
});

2，修改标题、输入框默认值、字符数限制

layer.prompt({
title: "请输入用户名", //提示框标题
value: 'hangge', //初始时的值，默认空字符
maxlength: 10, //可输入文本的最大长度，默认500
},function(value, index, elem){
alert(value); //得到value
layer.close(index);
});

3，密码输入框

layer.prompt({
formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
},function(value, index, elem){
alert(value); //得到value
layer.close(index);
});

4，多行文本输入框

layer.prompt({
formType: 2, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
area: ['400px', '100px'] //自定义文本域宽高
},function(value, index, elem){
alert(value); //得到value
layer.close(index);
});

八、相册层（photos）

相册层又称之为图片查看器，主要用于图片的展示。其获取展示图片的方式有如下两种。

1，传入 json 数据

（1）我们可以将整个相册的数据封装成一个 json 对象传入，显示效果如下：

整个页面变成黑色背景，同时居中显示相册中的一张图片。

鼠标移到图片上时，下方显示该图片的标题。同时两侧显示左右箭头，点击即可切换图片。

点击黑色背景，关闭相册弹出层。

（2）代码如下：

//相册的json数据
let json = {
"start": 0, //初始显示的图片序号，默认0
"data": [ //相册包含的图片，数组格式
{
"alt": "图片1标题",
"src": "images/img1.jpg", //原图地址
},
{
"alt": "图片2标题",
"src": "images/img2.jpg", //原图地址
}
]
}

//显示相册图片
layer.photos({
photos: json
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});

2，直接读取页面图片

我们也可也直接从页面中获取图片，只需将 photos 属性指向图片的父容器即可。比如下面样例，当我们点击页面上的缩略图时，会弹出显示对应的大图，具体效果同上。

<script>
window.onload = function() {
layer.photos({
photos: '#layer-photos-demo'
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
}
</script>

<div id="layer-photos-demo" class="layer-photos-demo">
<img layer-src="images/img1.jpg" src="images/thumb1.jpg" alt="图片1标题">
<img layer-src="images/img2.png" src="images/thumb2.jpg" alt="图片2标题">
</div>

上一篇layer - 简单好用的Web弹出层组件使用详解2（询问框、loading层、tip提示）下一篇layer - 简单好用的Web弹出层组件使用详解4（弹出自定义内容、iframe）

打赏支持

评论（0）

提交

文章类别

编程社区
SwiftFlex / FlashHTML5 / CSS3CordovaSpringBoot / CloudDocker / K8sReact / RN其他
奇文共赏

本类相关

JS - 文件上传组件WebUploader使用详解4（文件的断点续传）

Windows Server 2008 - 查看远程桌面登录日志

JS - 实现XML与JSON数据的相互转换（使用xml2json.js）

Python - 获取操作系统类型、名称、版本等信息的方法（附：python信息获取）

TIOBE - 2021年3月编程语言排行

Vue.js - 实现Luckysheet的本地引入使用

MySQL - 查询今天的数据（以及昨天、本月、上个月、今年...）

Linux - 离线安装telnet命令服务教程（CentOS系统为例）

Nginx+PHP7环境搭建教程（CentOS系统）

PHP - 使用file_put_contents()函数写文件（以及内容追加、换行）

移动版给我留言打赏支持

© copyright 2006-2021 航歌. All rights reserved. 苏ICP备14040777号