几个常用的帮助文档地址

https://layer.layui.com
https://www.layui.com/demo/form.html
https://www.layui.com/admin/std/dist/views

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>

关于一个非常nice的原生UI框架——layerUI相关推荐

android原生组件,XUI: 一个简洁而优雅的Android原生UI框架，解放你的双手！
XUI 一个简洁而又优雅的Android原生UI框架,解放你的双手!还不赶紧点击使用说明文档,体验一下吧! 涵盖绝大部分的UI组件:TextView.Button.EditText.ImageView ...
Android常用ui,XUI: 一个简洁而优雅的Android原生UI框架，解放你的双手！
XUI 一个简洁而又优雅的Android原生UI框架,解放你的双手!还不赶紧点击使用说明文档,体验一下吧! 涵盖绝大部分的UI组件:TextView.Button.EditText.ImageView ...
android炫酷叼ui,XUI: 一个简洁而优雅的Android原生UI框架，解放你的双手！
XUI 一个简洁而又优雅的Android原生UI框架,解放你的双手!还不赶紧点击使用说明文档,体验一下吧! 涵盖绝大部分的UI组件:TextView.Button.EditText.ImageView ...
android ui风格车载,XUI: 一个简洁而优雅的Android原生UI框架，解放你的双手！
XUI 一个简洁而又优雅的Android原生UI框架,解放你的双手!还不赶紧点击使用说明文档,体验一下吧! 涵盖绝大部分的UI组件:TextView.Button.EditText.ImageView ...
Android Virtualview：淘宝、天猫又开源了一个动态化、高性能的UI框架
转载 Carson_Ho Android Virtualview:淘宝.天猫又开源了一个动态化.高性能的UI框架前言目录 1. 为什么要向 Tangram模型加入 VirtualView 2. ...
Android Virtualview：淘宝、天猫又一个动态化、高性能的UI框架力作
Android Virtualview:淘宝.天猫又一个动态化.高性能的UI框架力作前言淘宝.天猫一直致力于解决页面动态化的问题在2017年的4月发布了v1.0解决方案:Tangram模型 ...
Android Virtualview：淘宝、天猫又开源了一个动态化、高性能的UI框架力作
前言淘宝.天猫一直致力于解决页面动态化的问题在2017年的4月发布了v1.0解决方案:Tangram模型及其对应的 Android库 vlayout,该解决方案在手机淘宝.天猫 Android ...
android引用ui,简介 - 如何引用 - 《XUI - Android 原生 UI 框架》 - 书栈网 · BookStack...
在决定使用XUI前,你必须明确的一点是,此框架给出的是一整套UI的整体解决方案,如果你只是想使用其中的几个控件,那大可不必引入如此庞大的一个UI库,Github上会有更好的组件库.如果你是想拥有一套可 ...
腾讯竟然又偷偷开源了一套Android原生UI框架！不吃透都对不起自己
起因事情是这样的. 4年前毕业那会,呆在公司的短视频项目,做视频.那会做得比抖音还早,但是由于短视频太烧钱了,项目被公司关掉了.当时需要开发横竖屏直播/异步视频的场景,就研究下了市场上的 app, ...

关于一个非常nice的原生UI框架——layerUI

弹窗提示

确认窗口

弹窗中打开别人的网页

弹出相册

缩略图列表点击后弹出相册

关于一个非常nice的原生UI框架——layerUI相关推荐

最新文章

热门文章