layui调用相册功能和点击按钮调用相册功能

//调用相册
<div id="layer-photos-demo" class="layer-photos-demo">< img layer-pid="image1" layer-src="data:image/1.png" src="data:image/1.png" alt="飞云之下" title="飞云之下" height="250">< img layer-pid="image2" layer-src="data:image/2.jpg" src="data:image/2.jpg" alt="林俊杰" title="林俊杰" height="250">< img layer-pid="image3" layer-src="data:image/3.png" src="data:image/3.png" alt="GAI" title="GAI" height="250">
</div>
<script>
//调用示例
function photos(){layer.photos({photos: '#layer-photos-demo',anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）});
}//点击调用相册//html
<div class="layui-form"><table class="layui-table" lay-filter="table2"><thead><tr><th lay-data="{field:'multipe_id',minWidth:80}">ID</th><th lay-data="{field:'auth_title',minWidth:200}">标题</th><th lay-data="{field:'pics_small',minWidth:500}">缩略图</th><th lay-data="{field:'sj',minWidth:400}">得票数据</th><th lay-data="{field:'operation',minWidth:190,fixed: 'right'}">操作</th></tr></thead><tbody><tr class="findimg"><td class="test">6666</td><td>练为战</td><td  class="layui-tab-content layui-show imgs" ><img src="https://ss-cwpanet-1.oss-cn-hangzhou.aliyuncs.com/uploads/images/20200809/29ae92f36443c7cf74084bf83c9eabea.jpg?x-oss-process=image/resize,w_600" alt="" width="50" height="30"  ><img src="https://ss-cwpanet-1.oss-cn-hangzhou.aliyuncs.com/uploads/images/20200809/05138c010ee2de85539edbd744a300d6.jpg?x-oss-process=image/resize,w_600" alt="" width="50" height="30"  ></td><td>5</td><td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal view_pic"  lay-event="edit">查看大图</button></td></tr></tbody></table>
</div>//js
<script>
layui.use(['upload', 'element','layer','table'], function() {var $ = layui.jquery,upload = layui.upload,layer = layui.layer;var table = layui.table;table.on('tool(table2)', function(obj){var imgArr=[];var img = $(obj.tr[0]).find("td[data-field='pics_small'] img");$.each(img,function(index,item){imgArr.push({'src':$(this).attr("src")})})// console.log(imgArr)if(obj.event === 'edit'){layer.photos({photos: {"data": imgArr ,} //格式见API文档手册页,anim: 4 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）  }); }});
});
</script>

效果

layui调用相册功能和点击按钮调用相册功能相关推荐

android点击地址调用地图,Android 实现点击按钮调用手机外部地图导航
//弹出Dialog 选择外部地图 private void setMap(){ final Dialog dia=new AlertDialog.Builder(mContext).create() ...
vue 点击文字input_vue input实现点击按钮文字增删功能示例
本文实例讲述了vue input实现点击按钮文字增删功能.分享给大家供大家参考,具体如下: content="width=device-width, user-scalable=no, in ...
html 复制文本按钮,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制标签中的文本到剪切板之前做过复制输入框的内容,原以为差不多,结果发现根本行不通尝试了各种办法,最后使了个障眼法,实现了下面的效果一.原理分析浏览器提供了 ...
js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容,原以为差不多,结果发现根本行不通尝试了各种办法,最后使了个障眼法,实现了下面的效果一.原理 ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
html5点击复制文本框内容,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制标签中的文本到剪切板之前做过复制输入框的内容,原以为差不多,结果发现根本行不通尝试了各种办法,最后使了个障眼法,实现了下面的效果一.原理分析浏览器提供了 ...
php点击按钮查询,管理界面点击按钮打开查询功能
业务场景(如下): 物料清单管理点击查看日志,打开物料清单日志查询功能. 实际效果(如下)(包括错误,异常): 点击查看日志后,打开查询功能时提示"无法获得功能菜单参数中查询元数据相关信息, ...
vue实现点击按钮调用摄像头扫码
vue在APP端点击[扫码签到]按钮实现调取摄像头扫码: 1.按钮页面: <template><div><button @click="scanCode&quo ...
html表单中按钮添加超链接,JS 实现点击按钮实现超链接功能
通过 JS,直接改变报表中相关参数的参数值,报表画面呈现参数值对应的内容. 2.1 准备数据集新建一个决策报表,新建数据集 ds1,SQL语句为:SELECT * FROM 销量 where 地区= ...
cef3实现点击按钮弹出页面_Cef功能开发经验总结
这是我开发Cef功能时对踩过的坑,进行的总结,话说Cef坑真的不少.好在踩完后用起来还是挺爽的.最终的代码可以下载网易云信PC Demo点我跳转资料准备这是我集成过程中查到的一些资料,包括了Cef ...

layui调用相册功能和点击按钮调用相册功能

layui调用相册功能和点击按钮调用相册功能

效果

layui调用相册功能和点击按钮调用相册功能相关推荐

最新文章

热门文章