几个常用的帮助文档地址
DEMO
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>LayerUI</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script> <script> layer.alert("只想简单的提示", {resize: false}); </script> </head> <body> </body> </html>
弹窗提示
layer.alert("只想简单的提示", {resize: false}); layer.alert("只想简单的提示", {resize: false}); layer.alert("改了标题、改了按钮文字、加了图标、确认按钮水平居中", {resize: false, title: "提示", btn: ["知道了"], btnAlign: "c", icon: 0}, index => { layer.close(index); }); layer.confirm("纳尼？", { resize: false, btn: ["按钮一", "按钮二", "按钮三"] /*可以无限个按钮*/, btn3: (index, layero) => { layer.close(index);/*按钮【按钮三】的回调*/ } }, (index, layero) => { layer.close(index);/*按钮【按钮一】的回调*/ }, index => {/*按钮【按钮二】的回调*/ });
确认窗口
layer.confirm("确定执行该操作吗？", {resize: false, title: "提示", btn: ["确定", "取消"], btnAlign: "c", icon: 3, shadeClose: true}, index => { layer.close(index); layer.msg("您点了确定"); }, () => { layer.msg("您点了取消"); }); layer.confirm("纳尼？", { resize: false, btn: ["按钮一", "按钮二", "按钮三"] /*可以无限个按钮*/, btn3: (index, layero) => {/*按钮【按钮三】的回调*/ } }, (index, layero) => {/*按钮【按钮一】的回调*/ }, index => {/*按钮【按钮二】的回调*/ });
弹窗中打开别人的网页
layer.open({content: "https://www.tencent.com/video/video20.mp4", area: ["800px", "450px"], type: 2, title: false, shadeClose: true});
弹出相册
layer.photos({ photos: { "data": [ {"alt": "图片名1", "src": "https://www.baidu.com/img/flexible/logo/pc/result.png"}, {"alt": "图片名2", "src": "https://www.baidu.com/img/flexible/logo/pc/result.png"} ] } }); //动态获取数据库里面的图片 $.getJSON("http://shuzhiqiang.com/xxx/api/img.json", data => { layer.photos({ photos: data, anim: 5, tab: (pic, index) => { console.log(pic, index); /*切换图片时触发回调函数获取当前图片的一些信息和弹窗索引*/ } }); }); /* img.json文件格式： { "data": [ { "alt": "图片名1", "src": "img/photo/1.jpg" }, { "alt": "图片名2", "src": "img/photo/2.jpg" } ] }*/
缩略图列表点击后弹出相册
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>LayerUI</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script> </head> <body> HTML示例 <div id="layer-photos-demo" class="layer-photos-demo"> <img layer-pid="图片id，可以不写" layer-src="https://shuzhiqiang.com/main/images/files/parallax-bg/img-1.jpg" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="图片名" > <img layer-pid="图片id，可以不写" layer-src="https://shuzhiqiang.com/main/images/files/parallax-bg/img-1.jpg" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="图片名" > </div> <script> layer.photos({ photos: "#layer-photos-demo", anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数） }); </script> </body> </html>
