github
/
RuoYi
mirror of https://gitee.com/y_project/RuoYi.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

实例演示弹层组件增加相册层示例

pull/289/head
Ricky 2021-04-30 14:04:25 +08:00
parent 1b4c35dbd7
commit e29357a612
1 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ruoyi-admin/src/main/resources/templates/demo/modal/layer.html
View File

@ -2,6 +2,10 @@
<html lang="zh"> <html lang="zh">
<head> <head>
<th:block th:include="include :: header('弹层组件')" /> <th:block th:include="include :: header('弹层组件')" />
<style>
/* 解决layer相册层弹出时导致页面自动滚动 */
html {height: auto;}
</style>
</head> </head>
<body class="gray-bg"> <body class="gray-bg">
<div class="wrapper wrapper-content fadeInRight"> <div class="wrapper wrapper-content fadeInRight">
@ -103,6 +107,7 @@
<button type="button" class="btn btn-primary" id="button-open-8">tab层</button> <button type="button" class="btn btn-primary" id="button-open-8">tab层</button>
<button type="button" class="btn btn-primary" id="button-open-9">prompt层</button> <button type="button" class="btn btn-primary" id="button-open-9">prompt层</button>
<button type="button" class="btn btn-primary" id="button-open-10">捕获页</button> <button type="button" class="btn btn-primary" id="button-open-10">捕获页</button>
<button type="button" class="btn btn-primary" id="button-open-16">相册层</button>
</div> </div>
</div> </div>
</div> </div>
@ -251,6 +256,33 @@
// 需要关闭窗口的url // 需要关闭窗口的url
$.modal.closeTab(prefix + "/form"); $.modal.closeTab(prefix + "/form");
}) })
$("#button-open-16").click(function(){
var json = {
"title": "若依相册", //相册标题
"id": 123, //相册id
"start": 0, //初始显示的图片序号，默认0
"data": [ //相册包含的图片，数组格式
{
"alt": "默认头像",
"pid": 1, //图片id
"src": "/img/profile.jpg", //原图地址
"thumb": "/img/profile.jpg" //缩略图地址
},
{
"alt": "打赏",
"pid": 2, //图片id
"src": "/img/pay.png", //原图地址
"thumb": "/img/pay.png" //缩略图地址
}
]
};
layer.photos({
photos: json,
closeBtn: 0, //右上角按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
})
</script> </script>
</body> </body>
</html> </html>