概要
layer是一款近年来备受青睐的web弹层组件,这完全得益于她全方位的解决方案。她致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,皆广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。
文档与演示 (所有效果都在这里)
愿景
layer致力于打造国内最盛行的弹层组件,为web开发提供强劲动力。
现状
因着数年的坚持维护,截至到2017年03月21日,已运用在超过30万家Web平台,其中不乏众多知名大型网站。目前layer已经成为国内乃至全世界最多人使用的Web弹层解决方案,并且她仍在与Layui一并高速发展。
相关
也支持手机版
https://layer.layui.com/mobile/
如何使用
先下载下来源码
下载地址
https://github.com/sentsin/layer
放入到自己的js中
D:\devlop\phpStudy\PHPTutorial\WWW\mall\static\js
导入一次 便可永久在js中使用
<script src="./static/js/jquery-1.10.2.min.js"></script>
<script src="./static/js/layer/layer.js"></script>
<script>
$(function () {
$('#test').click(function () {
//配置一个透明的询问框
layer.msg('大部分参数都是可以公用的<br>合理搭配,展示不一样的风格', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了', '哦']
});
});
</script>
表单验证错误提示
简写
layer.tips("商品名称应该再1-500字符之间",'#name',{time:2000,tips:2});
以下是项目中使用到的地方
<form action="publish.php" method="post" name="publish-form" id="publish-form" enctype="multipart/form-data">
<div class="additem">
<label id="for-name">商品名称</label><input type="text" name="name" id="name" placeholder="请输入商品名称">
</div>
<div class="additem">
<label id="for-price">商品价格</label><input type="text" name="price" id="price" placeholder="请输入商品价格"> 元
</div>
<div class="additem">
<!-- 使用accept html5属性 声明仅接受png gif jpeg格式的文件-->
<label id="for-file">商品缩略图</label><input type="file" accept="image/png,image/gif,image/jpeg,image/jpg" id="file" name="file">
</div>
<div class="additem textwrap">
<label class="ptop" id="for-des">商品简介</label><textarea id="des" name="des" placeholder="请输入商品简洁"></textarea>
</div>
<div class="additem textwrap">
<label class="ptop" id="for-content">商品详情</label>
<div class="container" style="margin-left: 120px">
<textarea id="content" name="content"></textarea>
</div>
</div>
<button type="submit">发布</button>
</form>
<script>
$(function () {
$('#publish-form').submit(function () {
var name=$('#name').val();
var price=$('#price').val();
var file=$('#file').val();
var content=$('#content').val();
var des=$('#des').val();
if(name.length<=0||name.length>500){
layer.tips("商品名称应该再1-500字符之间",'#name',{time:2000,tips:2});
$('#name').focus();
return false;
}
if(!/^[1-9]\d{0,8}$/.test(price)){
layer.tips("请输入最多9位正整数",'#price',{time:2000,tips:2});
$('#price').focus();
return false;
}
if(file==""||file.length<=0){
layer.tips("请选择图片",'#file',{time:2000,tip:2});
$('#file').focus();
return false;
}
if(des.length<=0||des.length>100){
layer.tips("商品简介应该再1-100字符之间",'#des',{time:2000,tips:2});
$('#des').focus();
return false;
}
if(content.length<=0){
layer.tips("请输入商品详情",'#container',{time:2000,tips:2});
$('#content').focus();
return false;
}
return true;
});
})
</script>