This commit is contained in:
2024-10-29 14:04:59 +08:00
commit 48bf3e6f33
2839 changed files with 762707 additions and 0 deletions

23
public/frontend/layui/layer/.gitignore vendored Executable file
View File

@@ -0,0 +1,23 @@
1.8.5/
*.iml
.idea/
.ipr
.iws
*~
~*
*.diff
*.patch
*.bak
.DS_Store
Thumbs.db
.svn/
*.swp
.nojekyll
.project
.settings/
node_modules/
_site/
.npmignore
release/
skin/moon/
src/skin/moon/

View File

@@ -0,0 +1,223 @@

# v3.1.1 2017.12.05
* 优化自动获取路径代码,以解决部分浏览器下的某些场景无法自动加载样式问题
---
# v3.1.0 2017.09.13
* 紧急修复在最新版 Chrome61.0.3163.79)下遮罩层出现的奇异花屏现象
* 修复 layer.js 未设置btnAlign时包裹按钮的 div.layui-layer-btn 出现一多余 class
* 对默认按钮颜色、Tips层、Prompt层、Tab层等进行了样式调整以便更显大气且更符合layui风格
* 增加maxHeight参数用于设定弹层的最大高度
* 去除 type:2 时如果content未填写而弹出 layer 官网的默认设置
---
# v3.0.3 2017.03.06
* 增加参数 isOutAnim用于控制是否显示关闭动画true 或者 false
* 撤销自动ready处理机制因为在初始时与Ajax同步等使用场景存在耦合等问题
* 修复Firefox下对默认层设置了高度按钮被溢出的bug
* photos层的出场动画不再是随机而是采用默认动画也可以通过参数 anim 来自定义)
* 去除photos层的默认关闭动画觉得觉得不闪眼的话也可以通过参数isOutAnim开启
---
# v3.0.2 2017.02.25
* 新增 resizing 回调,用于监听窗口的调整大小
* 增加自动ready处理机制即如果你页面一打开就执行弹层无需放入layer.ready中
* 对moveEnd回调返回一个参数为当前容器的DOM对象
* 添加一个amd条件,避免 define出错Merge pull request #42 from wangyateng/master
* 修复tab,photos,prompt弹层默认success回调被覆盖导致功能不正常的问题来自github用户 @waychan23 的友情提醒)
* 完善多按钮场景换行的间距(之前是紧贴在一起,略不雅观)
* 弹出图片层的动画时间改为800ms
* 修复按方向键切换图片层过快时重复弹出的bug
* 修复与animate.css可能存在的动画冲突
---
# v3.0 2016.11.07
* 新增拖动弹层右下角可调节弹层尺寸的功能由参数resize控制默认开启。对loading、tips层无效
* offset参数新增 t、r、b、l、lt、lb、rt、rb、的赋值可快捷实现上、右、下、左、左上角、左下角、右上角、右下角的边缘定位
* 新增btnAlign参数支持三个参数l/c/r分别用于控制按钮居左、居中、居右的快捷设置默认r即居右
* 点击最小化时,自动定位到页面左下角,在出现多个最小化时,会依次排列,这是一次较为重大的完善。
* 新增关闭层的过度动画(可通过 anim: -1 统一取消动画)
* 重写拖拽核心代码,性能大幅度提升
* layer.config核心调整
* layer.config中的extend参数只提供加载一个css皮肤文件详见文档
* 处理在head标签中执行layer弹层无效的情况
* 瘦身layer.ready方法
* 修改iframe层的loading动画
* 捕获页类型的弹层在关闭时会根据所捕获元素的初始display值进行不同处理即不再强制隐藏。
* 剔除moveType参数只提供默认的一种拖拽风格
* 剔除语义欠佳的fix参数改为fixed取代
* 剔除语义欠佳的shift参数改为anim取代不过仍然对shift参数兼容
* 完善tips层细节
* 将prompt层改成页面层结构即当你弹出prompt层时再弹出msg不会将prompt销毁。
* prompt层的textarea模式支持area参数来设定宽高
* layer.css大面积改善
* 降解IE6的fixed支持不过仍然对ie6兼容话说现在全浏览器兼容的组件已经不多了layer后续会整理出不兼容ie6/7的版本
* 修改图片超出屏幕后重新计算大小的算法Merge pull request from 390029659/master
* 修复iframe层在用于iPhone设备时无法触发滚动的Bug
---
# v2.4 2016.07.03
* 兼容jQuery3.0
* 优化tips可支持配置参数fix之前是强制fix: false用于决定是固定的tips还是非固定的。
* min回调可通过return false来设定不执行默认最小化。
* 修复在移动端使用iframeIOS下无法滑动的bug。
* 细节优化及样式微调
# 【v2.3】2016.05.18
* 通过对使用频率的调查将layer.ext.js拓展模块合并到了layer.js即不用再通过layer.config来加载调用。
* cancel回调不再对第二个按钮有效只作为右上角关闭按钮触发。并且除yes回调外所以按钮的回调都可以通过return false来设定不默认关闭。
* 修复相册层点击任意图片查看弹出的并非当前图片的bug。
* 修复相册层在移动端显示不佳的bug。
* 修复msg、alert等对话框类型的弹层在手机使用时未水平居中的bug。
# 【v2.2】2016.03.18
* 增加参数id用于控制弹层唯一标识。如不想重复弹出可设置该值。
* layer.tips允许出现遮罩即不对shade参数做限制。
* 对layer.photos方法直接弹出页面图片进行了事件委托修复了之前由于动态插入的img而无法执行弹出的bug并且修复了当图片信息改变时仍然弹出了之前的图片的bug
* layer.photos方法多处代码进行了优化
* 对layer.tab方法新增回调函数change用于监听选项卡的切换事件返回一个选项卡索引参数。
* 样式微调
# 【v2.1】2015.11.04
* 修复在使用seajs或者requirejs后layer.ext.js报layer未定义的错误。
* 修复弹出层后回车键无效的bug。
* 修复iframe层的success回调在ie8以下浏览器无效的bug
* 修复只有一张图片时并且该图片地址异常不断弹出提示的bug。
* 修复当设定moveEnd回调即便层关闭仍然触发该回调的bug
* 即便采用模块加载layer对象仍然保留全局原因是layer自有模块需要。
* 优化图标锯齿消的回调除了yes和cancel外还可用btn1/btn2。 btn2可解决取消遇右上角关闭共用cancel回调的问题。即如果你只需要接受取消的回调可以使用 btn2: function(){}
# 【v2.0】2015.09.01
* 全新的默认皮肤
* 修复按住Enter键时出现不断弹层的bug。
* 修复模块加载时layer仍然暴露给了全局的bug。
* 修复拖拽完毕回调moveEnd在层关闭后拖拽鼠标仍然触发该回调的bug。
* 确认和取消的回调除了yes和cancel外还可用btn1/btn2。 btn2可解决取消遇右上角关闭共用cancel回调的问题。即如果你只需要接受取消的回调可以使用 btn2: function(){}
### 拓展模块
* 修复通过script标签引入layer.ext.js时出现Cannot read property 'skin' of undefined的报错问题。虽然我们更推荐用layer.config()方式加载layer.ext.js
* 如果相册只有一张图片,则不触发上/下一张。
---
# 【v1.9.3】2015.05.23
* 修复全局设置皮肤时部分类型层未起作用的bug。
* 增加skin值layui-layer-rim用于给层加边框类似1.85的风格)
* 样式微调
### 拓展模块
* 修复相册层设定基础参数时只有首次有效的bug。
# 【v1.9.2】2015.05.08
* 增加关闭动画样式layui-layer-close
* 优化默认弹出动画
* 优化默认图标默认的icon支持缩减到0-6拓展皮肤可自己任意设定支持的数目
* 优化部分样式
* 机智地修复了一个隐藏得非常深的但是不是太重要的bug。
* 剔除了一些图片。
# 【v1.9.1】2015.04.29
* btn设定多个按钮时新增对应的回调支持只有yes和cancel回调,如btn: ['按钮一','按钮二','按钮三']按钮一和按钮二还是之前的yes和cancel按钮三则回调为 btn3: function(){},以此类推。
* 对cancel回调进行了微完善如果不想关闭return false即可如cancel: function(){return false},取消则不会关闭。
* 修复当设置了fix:false时,offset的设置无效的bug
* 为低版本IE回收iframe占用的内存从而修复偶尔无法获焦的bug
* 修复当设置了btn时最小化不能愉快地呈现的bug。
* 修复全局设置skin时某些层类型出现样式异常的bug。
* 修复area设置了百分比时maxmin参数无效的bug。
* 完善当采用script标签合并路径的方式引入layer加载了错误的css路径的问题。这种情况需在script标签上加一个自定义属性merge="true",然后通过layer.config({path: 'layer所在目录'})来完成初始化的配置
* 样式微调
# 【v1.9.0】2015.04.19
* 新增laye.open(options),抛弃了之前的$.layer(options)调用方法目的是与layer mobile保持统一。
* 新增layer.config(options)方法用于进行全局化配置。除了用于展现弹层的基础参数外还支持path用于模块化加载layer时设定目录以便加载所需配件如layer.config({path: '所在路径', extend: ''});
* 新增content参数用于统一传入内容。支持string类型和jquery dom对象。如果是type:2即iframe的url。
* 新增icon参数用于统一配置对话框和loading的icon类型。
* 新增cancel参数用于统一取消回调。
* 新增skin参数用于控制层的不同外观。
* 新增layer.ready(path, callback)用于页面加载时即调用弹层。如果通过layer.config配置了path此方法的path可以不填即直接layer.ready(callback);
* 新增tipsMore用于开启多个tips
* 新增scrollbar用于设定是否屏蔽浏览器滚动条
* 完善offset参数除了跟之前一样[Y坐标, X坐标],还支持传入'rd'表示右下角。另外还支持只传入Y坐标如offset: '120px'。默认'auto',即垂直水平居中。
* 完善自适应,只要设定了固定高度,任何层都会自适应出现滚动条
* 完善shift全新的CSS3动画模式支持传入0-6。
* 完善area支持传入宽度、[宽,高],默认'auto',表示自适应
* 完善time传入值改为毫秒比如2秒关闭time: 2000
* 完善use方法修复之前初始调用时部分浏览器一些不稳定因素
* 完善layer.full/layer.min方法只要传入index即可不用跟之前一样还要传入area和offset。。。
* layer.alert/confirm/msg/load/tips五种快捷引用重写更灵活更易使用。
* 剔除border参数因为它没有本质的作用自定义层样式可以通过新增的skin参数
* 剔除dialog的msgpage的html/url/dom统一采用content
* 剔除dialog和loading的type统一采用icon
* 剔除dialog中用于配置按钮数的btns因为可直接通过btn本身来获取。
* 剔除no和close回调统一采用cancel取代不过仍然对前两者兼容。
* 剔除layer.closeLoad()、layer.closeTips()方法统一用layer.closeAll('loading/tips')来对指定类型层进行关闭
* 剔除bgcolor参数因为自定义的样式一律采用skin参数控制
* 剔除tips一些列子元素只保留自身并且支持number和object形用于设定方向和显示箭头。
* 剔除layer.getIndex方法获取索引统一用返回值
* 剔除layer.autoArea方法因为已经采取更好的自适应方案。
* 默认不显示dialog图标需要显示配置dialog指定的type即可
* 很多不可见只可感受的细节改动
### 拓展模块
* layer.prompt/layer.tab/layer.photos重写代码更强健功能更强大详见Api。
总之总之…layer1.9.0有着太多的调整,爱她,就认真去感受她!么么哒
——贤心 2015/4/15
---
# 【v1.8.5】
* 新增对title样式的自定义控制
* 修复layer.prompt多行文本设置默认值无效的bug
# 【v1.8.4】
* 新增浏览器窗口尺寸改变时的自适应定位
* 新增属性shift用于配置动画弹出需要注意的是之前的layer.shift()方法将在layer1.9遗弃用shift属性取代
* 新增方法layer.title(name, index); 用于动态改变层的标题。
* 修改弹出层默认初始坐标为垂直左右居中。
* 开放多个tips可通过配置tips: {more: true}开启。
* 进一步完善tips的智能定位。
* 放弃layer.ready方法用jQuery的ready取代。
* 进一步优化内部代码
### 拓展模块
* layer.prompt支持给表单传入默认值如layer.prompt({val:'默认'}); 新增yes回调函数第二个参数为索引、第三个参数为表单元素。
* 相册层新增tab回调函数用于切换图片时进行相关操作
* 相册层内部代码优化。

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2016 layui
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,15 @@
## 概要
layer是一款近年来备受青睐的web弹层组件这完全得益于她全方位的解决方案。她致力于服务各个水平段的开发人员您的页面会轻松地拥有丰富友好的操作体验。在与同类组件的比较中layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能且格外注重性能的提升、易用和实用性正因如此越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,皆广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。
[文档与演示](http://layer.layui.com/)
## 愿景
layer致力于打造国内最盛行的弹层组件为web开发提供强劲动力。
## 现状
因着数年的坚持维护截至到2017年03月21日已运用在超过30万家Web平台其中不乏众多知名大型网站。目前layer已经成为国内乃至全世界最多人使用的Web弹层解决方案并且她仍在与Layui一并高速发展。
## 相关
[官网](http://layer.layui.com/)、[社区](http://fly.layui.com)

View File

@@ -0,0 +1,20 @@
{
"name": "layer",
"main": "src/layer.js",
"version": "3.1.0",
"homepage": "https://github.com/sentsin/layer",
"authors": [
"sentsin <xu@sentsin.com>"
],
"description": "弹窗组件",
"moduleType": [
"amd",
"globals"
],
"keywords": [
"layer",
"layui",
"dialog"
],
"license": "MIT"
}

2
public/frontend/layui/layer/dist/layer.js vendored Executable file

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,2 @@
/*! layer mobile-v2.0.0 Web弹层组件 MIT License http://layer.layui.com/mobile By 贤心 */
;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 701 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@@ -0,0 +1 @@
html #layui_layer_skinmoonstylecss{display:none;position:absolute;width:1989px}body .layer-ext-moon[type=dialog]{min-width:320px}body .layer-ext-moon-msg[type=dialog]{min-width:200px}body .layer-ext-moon .layui-layer-title{background:#f6f6f6;color:#212a31;font-size:16px;font-weight:700;height:46px;line-height:46px;border-bottom:1px solid #D5D5D5}body .layer-ext-moon .layui-layer-content .layui-layer-ico{height:32px;width:32px;top:18.5px}body .layer-ext-moon .layui-layer-ico0{background:url(default.png) -96px 0 no-repeat}body .layer-ext-moon .layui-layer-ico1{background:url(default.png) -224px 0 no-repeat}body .layer-ext-moon .layui-layer-ico2{background:url(default.png) -192px 0 no-repeat}body .layer-ext-moon .layui-layer-ico3{background:url(default.png) -160px 0 no-repeat}body .layer-ext-moon .layui-layer-ico4{background:url(default.png) -320px 0 no-repeat}body .layer-ext-moon .layui-layer-ico5{background:url(default.png) -288px 0 no-repeat}body .layer-ext-moon .layui-layer-ico6{background:url(default.png) -256px 0}body .layer-ext-moon .layui-layer-ico7{background:url(default.png) -128px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin{top:15px;right:15px}body .layer-ext-moon .layui-layer-setwin a{width:16px;height:16px}body .layer-ext-moon .layui-layer-setwin .layui-layer-min cite:hover{background-color:#56abe4}body .layer-ext-moon .layui-layer-setwin .layui-layer-max{background:url(default.png) -80px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin .layui-layer-max:hover{background:url(default.png) -64px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin .layui-layer-maxmin{background:url(default.png) -32px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin .layui-layer-maxmin:hover{background:url(default.png) -16px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin .layui-layer-close1,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2{background:url(default.png)}body .layer-ext-moon .layui-layer-setwin .layui-layer-close1:hover,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2:hover{background:url(default.png) -48px 0}body .layer-ext-moon .layui-layer-padding{padding-top:24px}body .layer-ext-moon .layui-layer-btn{text-align:center;padding-top:15px;padding-bottom:15px;background:#f0f4f7;border-top:1px #c7c7c7 solid}body .layer-ext-moon .layui-layer-btn a{font-size:12px;font-weight:400;margin:0 7px;padding:6px 20px;color:#fff;border:1px solid #0064b6;background:no-repeat #0071ce;border-radius:3px;display:inline-block;height:20px;line-height:20px;text-align:center;vertical-align:middle;text-decoration:none;outline:0}body .layer-ext-moon .layui-layer-btn .layui-layer-btn0{background:#0071ce}body .layer-ext-moon .layui-layer-btn .layui-layer-btn1{background:#fff;color:#404a58;border:1px solid #c0c4cd;border-radius:3px}body .layer-ext-moon .layui-layer-btn .layui-layer-btn2{background:#f60;color:#fff;border:1px solid #f60;border-radius:3px}body .layer-ext-moon .layui-layer-btn .layui-layer-btn3{background:red;color:#fff;border:1px solid red;border-radius:3px}body .layer-ext-moon .layui-layer-title span.layui-layer-tabnow{height:47px}

View File

@@ -0,0 +1,74 @@
/**
layer构建
*/
var pkg = require('./package.json');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');
var header = require('gulp-header');
var del = require('del');
var task = {
layer: function() {
gulp.src('./src/**/*.css')
.pipe(minify({
compatibility: 'ie7'
}))
.pipe(gulp.dest('./dist'));
return gulp.src('./src/layer.js').pipe(uglify())
.pipe(header('/*! <%= pkg.realname %>-v<%= pkg.version %> <%= pkg.description %> <%= pkg.license %> License <%= pkg.homepage %> By <%= pkg.author %> */\n ;', {pkg: pkg}))
.pipe(gulp.dest('./dist'));
}
,mobile: function() {
return gulp.src('./src/mobile/layer.js').pipe(uglify())
.pipe(header('/*! <%= pkg.realname %> mobile-v<%= pkg.mobile %> <%= pkg.description %> <%= pkg.license %> License <%= pkg.homepage %>mobile By <%= pkg.author %> */\n ;', {pkg: pkg}))
.pipe(gulp.dest('./dist/mobile'));
}
,other: function(){
gulp.src('./src/**/*.{png,gif}').pipe(rename({}))
.pipe(gulp.dest('./dist'));
}
};
gulp.task('clear', function(cb){ //清理
return del(['./dist/*'], cb);
});
gulp.task('layer', task.minjs); //压缩PC版本
gulp.task('mobile', task.mincss); //压缩Mobile文件
gulp.task('other', task.other); //移动一些配件
//打包发行版
var releaseDir = './release/zip/layer-v' + pkg.version;
gulp.task('clearZip', function(cb){ //清理
return del(['./release/zip/*'], cb);
});
gulp.task('r', ['clearZip'], function(){
gulp.src('./release/doc/**/*')
.pipe(gulp.dest(releaseDir))
return gulp.src([
'./dist/**/*'
,'!./dist/**/moon'
,'!./dist/**/moon/*'
])
.pipe(gulp.dest(releaseDir + '/layer'))
});
//全部
gulp.task('default', ['clear'], function(){
for(var key in task){
task[key]();
}
});

View File

@@ -0,0 +1,41 @@
{
"name": "layui-layer",
"realname": "layer",
"version": "3.1.1",
"mobile": "2.0.0",
"description": "Web弹层组件",
"main": "src/layer.js",
"license": "MIT",
"scripts": {
"run": "gulp"
},
"repository": {
"type": "https",
"url": "git+https://github.com/sentsin/layer.git"
},
"author": "贤心",
"homepage": "http://layer.layui.com/",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^1.5.4",
"gulp-rename": "^1.2.2",
"gulp-header": "^1.8.8",
"del": "^2.2.2"
},
"bugs": {
"url": "https://github.com/sentsin/layer/issues"
},
"directories": {
"test": "test"
},
"dependencies": {},
"keywords": [
"layer",
"dialog",
"tips",
"alert",
"confirm",
"window"
]
}

View File

@@ -0,0 +1,3 @@
## 注意
开发版源码随时可能会提交因此生产环境更建议build目录中压缩后的layer.js。

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,14 @@

## layer mobile
layer mobile是为移动设备手机、平板等webkit内核浏览器/webview量身定做的弹层支撑采用Native JavaScript编写完全独立于PC版的layer您需要按照场景选择使用。
[文档与演示](http://sentsin.com/layui/layer/)
1. 无需依赖任何库只加载layer.m.js即可
2. 小巧玲珑,性能卓越、柔情似水…
3. 具备无以伦比的自适应功能
4. 灵活的皮肤自定义支撑,充分确保弹层风格多样化
5. 丰富、科学的接口,让弹弹弹层无所不能
## 备注
[官网](http://sentsin.com/layui/layer/)、[有问必答](http://say.sentsin.com/home-48.html)

View File

@@ -0,0 +1,208 @@
/*!
@Namelayer mobile v2.0 弹层组件移动版
@Author贤心
@Sitehttp://layer.layui.com/mobie/
@LicenseLGPL
*/
;!function(win){
"use strict";
var doc = document, query = 'querySelectorAll', claname = 'getElementsByClassName', S = function(s){
return doc[query](s);
};
//默认配置
var config = {
type: 0
,shade: true
,shadeClose: true
,fixed: true
,anim: 'scale' //默认动画类型
};
var ready = {
extend: function(obj){
var newobj = JSON.parse(JSON.stringify(config));
for(var i in obj){
newobj[i] = obj[i];
}
return newobj;
},
timer: {}, end: {}
};
//点触事件
ready.touch = function(elem, fn){
elem.addEventListener('click', function(e){
fn.call(this, e);
}, false);
};
var index = 0, classs = ['layui-m-layer'], Layer = function(options){
var that = this;
that.config = ready.extend(options);
that.view();
};
Layer.prototype.view = function(){
var that = this, config = that.config, layerbox = doc.createElement('div');
that.id = layerbox.id = classs[0] + index;
layerbox.setAttribute('class', classs[0] + ' ' + classs[0]+(config.type || 0));
layerbox.setAttribute('index', index);
//标题区域
var title = (function(){
var titype = typeof config.title === 'object';
return config.title
? '<h3 style="'+ (titype ? config.title[1] : '') +'">'+ (titype ? config.title[0] : config.title) +'</h3>'
: '';
}());
//按钮区域
var button = (function(){
typeof config.btn === 'string' && (config.btn = [config.btn]);
var btns = (config.btn || []).length, btndom;
if(btns === 0 || !config.btn){
return '';
}
btndom = '<span yes type="1">'+ config.btn[0] +'</span>'
if(btns === 2){
btndom = '<span no type="0">'+ config.btn[1] +'</span>' + btndom;
}
return '<div class="layui-m-layerbtn">'+ btndom + '</div>';
}());
if(!config.fixed){
config.top = config.hasOwnProperty('top') ? config.top : 100;
config.style = config.style || '';
config.style += ' top:'+ ( doc.body.scrollTop + config.top) + 'px';
}
if(config.type === 2){
config.content = '<i></i><i class="layui-m-layerload"></i><i></i><p>'+ (config.content||'') +'</p>';
}
if(config.skin) config.anim = 'up';
if(config.skin === 'msg') config.shade = false;
layerbox.innerHTML = (config.shade ? '<div '+ (typeof config.shade === 'string' ? 'style="'+ config.shade +'"' : '') +' class="layui-m-layershade"></div>' : '')
+'<div class="layui-m-layermain" '+ (!config.fixed ? 'style="position:static;"' : '') +'>'
+'<div class="layui-m-layersection">'
+'<div class="layui-m-layerchild '+ (config.skin ? 'layui-m-layer-' + config.skin + ' ' : '') + (config.className ? config.className : '') + ' ' + (config.anim ? 'layui-m-anim-' + config.anim : '') +'" ' + ( config.style ? 'style="'+config.style+'"' : '' ) +'>'
+ title
+'<div class="layui-m-layercont">'+ config.content +'</div>'
+ button
+'</div>'
+'</div>'
+'</div>';
if(!config.type || config.type === 2){
var dialogs = doc[claname](classs[0] + config.type), dialen = dialogs.length;
if(dialen >= 1){
layer.close(dialogs[0].getAttribute('index'))
}
}
document.body.appendChild(layerbox);
var elem = that.elem = S('#'+that.id)[0];
config.success && config.success(elem);
that.index = index++;
that.action(config, elem);
};
Layer.prototype.action = function(config, elem){
var that = this;
//自动关闭
if(config.time){
ready.timer[that.index] = setTimeout(function(){
layer.close(that.index);
}, config.time*1000);
}
//确认取消
var btn = function(){
var type = this.getAttribute('type');
if(type == 0){
config.no && config.no();
layer.close(that.index);
} else {
config.yes ? config.yes(that.index) : layer.close(that.index);
}
};
if(config.btn){
var btns = elem[claname]('layui-m-layerbtn')[0].children, btnlen = btns.length;
for(var ii = 0; ii < btnlen; ii++){
ready.touch(btns[ii], btn);
}
}
//点遮罩关闭
if(config.shade && config.shadeClose){
var shade = elem[claname]('layui-m-layershade')[0];
ready.touch(shade, function(){
layer.close(that.index, config.end);
});
}
config.end && (ready.end[that.index] = config.end);
};
win.layer = {
v: '2.0',
index: index,
//核心方法
open: function(options){
var o = new Layer(options || {});
return o.index;
},
close: function(index){
var ibox = S('#'+classs[0]+index)[0];
if(!ibox) return;
ibox.innerHTML = '';
doc.body.removeChild(ibox);
clearTimeout(ready.timer[index]);
delete ready.timer[index];
typeof ready.end[index] === 'function' && ready.end[index]();
delete ready.end[index];
},
//关闭所有layer层
closeAll: function(){
var boxs = doc[claname](classs[0]);
for(var i = 0, len = boxs.length; i < len; i++){
layer.close((boxs[0].getAttribute('index')|0));
}
}
};
'function' == typeof define ? define(function() {
return layer;
}) : function(){
var js = document.scripts, script = js[js.length - 1], jsPath = script.src;
var path = jsPath.substring(0, jsPath.lastIndexOf("/") + 1);
//如果合并方式则需要单独引入layer.css
if(script.getAttribute('merge')) return;
document.head.appendChild(function(){
var link = doc.createElement('link');
link.href = path + 'need/layer.css?2.0';
link.type = 'text/css';
link.rel = 'styleSheet'
link.id = 'layermcss';
return link;
}());
}();
}(window);

View File

@@ -0,0 +1,87 @@

/*
layer mobile
*/
.layui-m-layer{position:relative; z-index: 19891014;}
.layui-m-layer *{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
.layui-m-layershade,
.layui-m-layermain{position:fixed; left:0; top:0; width:100%; height:100%;}
.layui-m-layershade{background-color:rgba(0,0,0, .7); pointer-events:auto;}
.layui-m-layermain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;}
.layui-m-layermain .layui-m-layersection{display:table-cell; vertical-align:middle; text-align:center;}
.layui-m-layerchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); pointer-events:auto; -webkit-overflow-scrolling: touch;}
.layui-m-layerchild{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .2s; animation-duration: .2s;}
/* 弹出动画 */
@-webkit-keyframes layui-m-anim-scale { /* 默认 */
0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
}
@keyframes layui-m-anim-scale { /* 默认 */
0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
}
.layui-m-anim-scale{animation-name: layui-m-anim-scale; -webkit-animation-name: layui-m-anim-scale;}
@-webkit-keyframes layui-m-anim-up{
0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)}
100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
}
@keyframes layui-m-anim-up{
0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)}
100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
}
.layui-m-anim-up{-webkit-animation-name: layui-m-anim-up;animation-name: layui-m-anim-up}
.layui-m-layer0 .layui-m-layerchild{width: 90%; max-width: 640px;}
.layui-m-layer1 .layui-m-layerchild{border:none; border-radius:0;}
.layui-m-layer2 .layui-m-layerchild{width:auto; max-width:260px; min-width:40px; border:none; background: none; box-shadow: none; color:#fff;}
.layui-m-layerchild h3{padding: 0 10px; height: 60px; line-height: 60px; font-size:16px; font-weight: 400; border-radius: 5px 5px 0 0; text-align: center;}
.layui-m-layerchild h3,
.layui-m-layerbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.layui-m-layercont{padding: 50px 30px; line-height: 22px; text-align:center;}
.layui-m-layer1 .layui-m-layercont{padding:0; text-align:left;}
.layui-m-layer2 .layui-m-layercont{text-align:center; padding: 0; line-height: 0;}
.layui-m-layer2 .layui-m-layercont i{width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;}
.layui-m-layer2 .layui-m-layercont p{margin-top: 20px;}
/* loading */
@-webkit-keyframes layui-m-anim-loading{
0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)}
40%{transform:scale(1); -webkit-transform:scale(1)}
}
@keyframes layui-m-anim-loading{
0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)}
40%{transform:scale(1); -webkit-transform:scale(1)}
}
.layui-m-layer2 .layui-m-layercont i{-webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out; animation: layui-m-anim-loading 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;}
.layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay: -.16s; animation-delay: -.16s;}
.layui-m-layer2 .layui-m-layercont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;}
.layui-m-layerbtn{display: box; display: -moz-box; display: -webkit-box; width: 100%; position:relative; height: 50px; line-height: 50px; font-size: 0; text-align:center; border-top:1px solid #D0D0D0; background-color: #F2F2F2; border-radius: 0 0 5px 5px;}
.layui-m-layerbtn span{position:relative; display: block; -moz-box-flex: 1; box-flex: 1; -webkit-box-flex: 1; text-align:center; font-size:14px; border-radius: 0 0 5px 5px; cursor:pointer;}
.layui-m-layerbtn span[yes]{color: #40AFFE;}
.layui-m-layerbtn span[no]{border-right: 1px solid #D0D0D0; border-radius: 0 0 0 5px;}
.layui-m-layerbtn span:active{background-color: #F6F6F6;}
.layui-m-layerend{position:absolute; right:7px; top:10px; width:30px; height:30px; border: 0; font-weight:400; background: transparent; cursor: pointer; -webkit-appearance: none; font-size:30px;}
.layui-m-layerend::before, .layui-m-layerend::after{position:absolute; left:5px; top:15px; content:''; width:18px; height:1px; background-color:#999; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius: 3px;}
.layui-m-layerend::after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
/* 底部对话框风格 */
body .layui-m-layer .layui-m-layer-footer{position: fixed; width: 95%; max-width: 100%; margin: 0 auto; left:0; right: 0; bottom: 10px; background: none;}
.layui-m-layer-footer .layui-m-layercont{padding: 20px; border-radius: 5px 5px 0 0; background-color: rgba(255,255,255,.8);}
.layui-m-layer-footer .layui-m-layerbtn{display: block; height: auto; background: none; border-top: none;}
.layui-m-layer-footer .layui-m-layerbtn span{background-color: rgba(255,255,255,.8);}
.layui-m-layer-footer .layui-m-layerbtn span[no]{color: #FD482C; border-top: 1px solid #c2c2c2; border-radius: 0 0 5px 5px;}
.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top: 10px; border-radius: 5px;}
/* 通用提示 */
body .layui-m-layer .layui-m-layer-msg{width: auto; max-width: 90%; margin: 0 auto; bottom: -150px; background-color: rgba(0,0,0,.7); color: #fff;}
.layui-m-layer-msg .layui-m-layercont{padding: 10px 20px;}

View File

@@ -0,0 +1,181 @@
/**
@Name: layer
@Author: 贤心
**/
/* *html{background-image: url(about:blank); background-attachment: fixed;} */
html #layuicss-layer{display: none; position: absolute; width: 1989px;}
/* common */
.layui-layer-shade, .layui-layer{position:fixed; _position:absolute; pointer-events: auto;}
.layui-layer-shade{top:0; left:0; width:100%; height:100%; _height:expression(document.body.offsetHeight+"px");}
.layui-layer{-webkit-overflow-scrolling: touch;}
.layui-layer{top:150px; left: 0; margin:0; padding:0; background-color:#fff; -webkit-background-clip: content; border-radius: 2px; box-shadow: 1px 1px 50px rgba(0,0,0,.3);}
.layui-layer-close{position:absolute;}
.layui-layer-content{position:relative;}
.layui-layer-border{border: 1px solid #B2B2B2; border: 1px solid rgba(0,0,0,.1); box-shadow: 1px 1px 5px rgba(0,0,0,.2);}
.layui-layer-load{background:url(loading-1.gif) #eee center center no-repeat;}
.layui-layer-ico{ background:url(icon.png) no-repeat;}
.layui-layer-dialog .layui-layer-ico,
.layui-layer-setwin a,
.layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;}
.layui-layer-move{display: none; position: fixed; *position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; cursor: move; opacity: 0; filter:alpha(opacity=0); background-color: #fff; z-index: 2147483647;}
.layui-layer-resize{position: absolute; width: 15px; height: 15px; right: 0; bottom: 0; cursor: se-resize;}
/* 动画 */
.layer-anim{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.3s; animation-duration:.3s;}
@-webkit-keyframes layer-bounceIn { /* 默认 */
0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
}
@keyframes layer-bounceIn {
0% {opacity: 0; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5)}
100% {opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1)}
}
.layer-anim-00{-webkit-animation-name: layer-bounceIn;animation-name: layer-bounceIn}
@-webkit-keyframes layer-zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{-webkit-animation-name:layer-zoomInDown;animation-name:layer-zoomInDown}
@-webkit-keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.layer-anim-02{-webkit-animation-name:layer-fadeInUpBig;animation-name:layer-fadeInUpBig}
@-webkit-keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-03{-webkit-animation-name:layer-zoomInLeft;animation-name:layer-zoomInLeft}
@-webkit-keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}@keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}.layer-anim-04{-webkit-animation-name:layer-rollIn;animation-name:layer-rollIn}
@keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:layer-fadeIn;animation-name:layer-fadeIn}
@-webkit-keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:layer-shake;animation-name:layer-shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
/* 标题栏 */
.layui-layer-title{padding:0 80px 0 20px; height:42px; line-height:42px; border-bottom:1px solid #eee; font-size:14px; color:#333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: #F8F8F8; border-radius: 2px 2px 0 0;}
.layui-layer-setwin{position:absolute; right:15px; *right:0; top:15px; font-size:0; line-height: initial;}
.layui-layer-setwin a{position:relative; width: 16px; height:16px; margin-left:10px; font-size:12px; _overflow:hidden;}
.layui-layer-setwin .layui-layer-min cite{position:absolute; width:14px; height:2px; left:0; top:50%; margin-top:-1px; background-color:#2E2D3C; cursor:pointer; _overflow:hidden;}
.layui-layer-setwin .layui-layer-min:hover cite{background-color:#2D93CA; }
.layui-layer-setwin .layui-layer-max{background-position:-32px -40px;}
.layui-layer-setwin .layui-layer-max:hover{background-position:-16px -40px;}
.layui-layer-setwin .layui-layer-maxmin{background-position:-65px -40px;}
.layui-layer-setwin .layui-layer-maxmin:hover{background-position:-49px -40px;}
.layui-layer-setwin .layui-layer-close1{background-position: 1px -40px; cursor: pointer;}
.layui-layer-setwin .layui-layer-close1:hover{opacity:0.7;}
.layui-layer-setwin .layui-layer-close2{position:absolute; right:-28px; top:-28px; width:30px; height:30px; margin-left:0; background-position:-149px -31px; *right:-18px; _display:none;}
.layui-layer-setwin .layui-layer-close2:hover{ background-position:-180px -31px;}
/* 按钮栏 */
.layui-layer-btn{text-align: right; padding: 0 15px 12px; pointer-events: auto; user-select: none; -webkit-user-select: none;}
.layui-layer-btn a{height: 28px; line-height: 28px; margin: 5px 5px 0; padding: 0 15px; border: 1px solid #dedede; background-color:#fff; color: #333; border-radius: 2px; font-weight:400; cursor:pointer; text-decoration: none;}
.layui-layer-btn a:hover{opacity: 0.9; text-decoration: none;}
.layui-layer-btn a:active{opacity: 0.8;}
.layui-layer-btn .layui-layer-btn0{border-color: #1E9FFF; background-color: #1E9FFF; color:#fff;}
.layui-layer-btn-l{text-align: left;}
.layui-layer-btn-c{text-align: center;}
/* 定制化 */
.layui-layer-dialog{min-width:260px;}
.layui-layer-dialog .layui-layer-content{position: relative; padding:20px; line-height:24px; word-break: break-all; overflow:hidden; font-size:14px; overflow-x: hidden; overflow-y:auto;}
.layui-layer-dialog .layui-layer-content .layui-layer-ico{position:absolute; top:16px; left:15px; _left:-40px; width:30px; height:30px;}
.layui-layer-ico1{background-position:-30px 0 }
.layui-layer-ico2{background-position:-60px 0;}
.layui-layer-ico3{background-position:-90px 0;}
.layui-layer-ico4{background-position:-120px 0;}
.layui-layer-ico5{background-position:-150px 0;}
.layui-layer-ico6{background-position:-180px 0;}
.layui-layer-rim{border:6px solid #8D8D8D; border:6px solid rgba(0,0,0,.3); border-radius:5px; box-shadow: none;}
.layui-layer-msg{min-width:180px; border:1px solid #D3D4D3; box-shadow: none;}
.layui-layer-hui{min-width:100px; background-color: #000; filter:alpha(opacity=60); background-color: rgba(0,0,0,0.6); color: #fff; border:none;}
.layui-layer-hui .layui-layer-content{padding:12px 25px; text-align:center;}
.layui-layer-dialog .layui-layer-padding{padding: 20px 20px 20px 55px; text-align: left;}
.layui-layer-page .layui-layer-content{position:relative; overflow:auto;}
.layui-layer-page .layui-layer-btn,.layui-layer-iframe .layui-layer-btn{padding-top:10px;}
.layui-layer-nobg{background:none;}
.layui-layer-iframe iframe{display: block; width: 100%;}
.layui-layer-loading{border-radius:100%; background:none; box-shadow:none; border:none;}
.layui-layer-loading .layui-layer-content{width:60px; height:24px; background:url(loading-0.gif) no-repeat;}
.layui-layer-loading .layui-layer-loading1{width:37px; height:37px; background:url(loading-1.gif) no-repeat;}
.layui-layer-loading .layui-layer-loading2, .layui-layer-ico16{width:32px; height:32px; background:url(loading-2.gif) no-repeat;}
.layui-layer-tips{background: none; box-shadow:none; border:none;}
.layui-layer-tips .layui-layer-content{position: relative; line-height: 22px; min-width: 12px; padding: 8px 15px; font-size: 12px; _float:left; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); background-color: #000; color: #fff;}
.layui-layer-tips .layui-layer-close{right:-2px; top:-1px;}
.layui-layer-tips i.layui-layer-TipsG{ position:absolute; width:0; height:0; border-width:8px; border-color:transparent; border-style:dashed; *overflow:hidden;}
.layui-layer-tips i.layui-layer-TipsT, .layui-layer-tips i.layui-layer-TipsB{left:5px; border-right-style:solid; border-right-color: #000;}
.layui-layer-tips i.layui-layer-TipsT{bottom:-8px;}
.layui-layer-tips i.layui-layer-TipsB{top:-8px;}
.layui-layer-tips i.layui-layer-TipsR, .layui-layer-tips i.layui-layer-TipsL{top: 5px; border-bottom-style:solid; border-bottom-color: #000;}
.layui-layer-tips i.layui-layer-TipsR{left:-8px;}
.layui-layer-tips i.layui-layer-TipsL{right:-8px;}
/* skin */
.layui-layer-lan[type="dialog"]{min-width:280px;}
.layui-layer-lan .layui-layer-title{background:#4476A7; color:#fff; border: none;}
.layui-layer-lan .layui-layer-btn{padding: 5px 10px 10px; text-align: right; border-top:1px solid #E9E7E7}
.layui-layer-lan .layui-layer-btn a{background: #fff; border-color: #E9E7E7; color: #333;}
.layui-layer-lan .layui-layer-btn .layui-layer-btn1{background:#C9C5C5;}
.layui-layer-molv .layui-layer-title{background: #009f95; color:#fff; border: none;}
.layui-layer-molv .layui-layer-btn a{background: #009f95; border-color: #009f95;}
.layui-layer-molv .layui-layer-btn .layui-layer-btn1{background:#92B8B1;}
/**
@Name: layer拓展样式
*/
.layui-layer-iconext{background:url(icon-ext.png) no-repeat;}
/* prompt模式 */
.layui-layer-prompt .layui-layer-input{display: block; width: 230px; height: 36px; margin: 0 auto; line-height: 30px; padding-left: 10px; border: 1px solid #e6e6e6; color: #333;}
.layui-layer-prompt textarea.layui-layer-input{width: 300px; height: 100px; line-height: 20px; padding: 6px 10px;}
.layui-layer-prompt .layui-layer-content{padding: 20px;}
.layui-layer-prompt .layui-layer-btn{padding-top: 0;}
/* tab模式 */
.layui-layer-tab{box-shadow:1px 1px 50px rgba(0,0,0,.4);}
.layui-layer-tab .layui-layer-title{padding-left:0; overflow: visible;}
.layui-layer-tab .layui-layer-title span{position:relative; float:left; min-width:80px; max-width:260px; padding:0 20px; text-align:center; cursor:default; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer;}
.layui-layer-tab .layui-layer-title span.layui-this{height: 43px; border-left: 1px solid #eee; border-right: 1px solid #eee; background-color: #fff; z-index: 10;}
.layui-layer-tab .layui-layer-title span:first-child{border-left:none;}
.layui-layer-tabmain{line-height:24px; clear:both;}
.layui-layer-tabmain .layui-layer-tabli{display:none;}
.layui-layer-tabmain .layui-layer-tabli.layui-this{display: block;}
/* photo模式 */
.layui-layer-photos{-webkit-animation-duration: .8s; animation-duration: .8s;}
.layui-layer-photos .layui-layer-content{overflow:hidden; text-align: center;}
.layui-layer-photos .layui-layer-phimg img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;}
.layui-layer-imguide,.layui-layer-imgbar{display:none;}
.layui-layer-imgprev, .layui-layer-imgnext{position:absolute; top:50%; width:27px; _width:44px; height:44px; margin-top:-22px; outline:none;blr:expression(this.onFocus=this.blur());}
.layui-layer-imgprev{left:10px; background-position:-5px -5px; _background-position:-70px -5px;}
.layui-layer-imgprev:hover{background-position:-33px -5px; _background-position:-120px -5px;}
.layui-layer-imgnext{right:10px; _right:8px; background-position:-5px -50px; _background-position:-70px -50px;}
.layui-layer-imgnext:hover{background-position:-33px -50px; _background-position:-120px -50px;}
.layui-layer-imgbar{position:absolute; left:0; bottom:0; width:100%; height:32px; line-height:32px; background-color:rgba(0,0,0,.8); background-color:#000\9; filter:Alpha(opacity=80); color:#fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;}
.layui-layer-imgtit{/*position:absolute; left:20px;*/}
.layui-layer-imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; font-size:12px;}
.layui-layer-imgtit a{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#fff;}
.layui-layer-imgtit a:hover{color:#fff; text-decoration:underline;}
.layui-layer-imgtit em{padding-left:10px; font-style: normal;}
/* 关闭动画 */
@-webkit-keyframes layer-bounceOut {
100% {opacity: 0; -webkit-transform: scale(.7); transform: scale(.7)}
30% {-webkit-transform: scale(1.05); transform: scale(1.05)}
0% {-webkit-transform: scale(1); transform: scale(1);}
}
@keyframes layer-bounceOut {
100% {opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7);}
30% {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}
0% {-webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1);}
}
.layer-anim-close{-webkit-animation-name: layer-bounceOut; animation-name: layer-bounceOut; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.2s; animation-duration:.2s;}
@media screen and (max-width: 1100px) {
.layui-layer-iframe{overflow-y: auto; -webkit-overflow-scrolling: touch;}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 701 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@@ -0,0 +1,140 @@
/*
* layer皮肤
*
*/
html #layui_layer_skinmoonstylecss {
display: none;
position: absolute;
width: 1989px;
}
body .layer-ext-moon[type="dialog"] {
min-width: 320px;
}
body .layer-ext-moon-msg[type="dialog"]{min-width:200px;}
body .layer-ext-moon .layui-layer-title {
background: #f6f6f6;
color: #212a31;
font-size: 16px;
font-weight: bold;
height: 46px;
line-height: 46px;
border-bottom: 1px solid #D5D5D5;
}
body .layer-ext-moon .layui-layer-content .layui-layer-ico {
height: 32px;
width: 32px;
top:18.5px;
}
body .layer-ext-moon .layui-layer-ico0 {
background: url(default.png) no-repeat -96px 0;
;
}
body .layer-ext-moon .layui-layer-ico1 {
background: url(default.png) no-repeat -224px 0;
;
}
body .layer-ext-moon .layui-layer-ico2 {
background: url(default.png) no-repeat -192px 0;
}
body .layer-ext-moon .layui-layer-ico3 {
background: url(default.png) no-repeat -160px 0;
}
body .layer-ext-moon .layui-layer-ico4 {
background: url(default.png) no-repeat -320px 0;
}
body .layer-ext-moon .layui-layer-ico5 {
background: url(default.png) no-repeat -288px 0;
}
body .layer-ext-moon .layui-layer-ico6 {
background: url(default.png) -256px 0;
}
body .layer-ext-moon .layui-layer-ico7 {
background: url(default.png) no-repeat -128px 0;
}
body .layer-ext-moon .layui-layer-setwin {
top: 15px;
right: 15px;
}
body .layer-ext-moon .layui-layer-setwin a {
width: 16px;
height: 16px;
}
body .layer-ext-moon .layui-layer-setwin .layui-layer-min cite:hover {
background-color: #56abe4;
}
body .layer-ext-moon .layui-layer-setwin .layui-layer-max {
background: url(default.png) no-repeat -80px 0;
}
body .layer-ext-moon .layui-layer-setwin .layui-layer-max:hover {
background: url(default.png) no-repeat -64px 0;
}
body .layer-ext-moon .layui-layer-setwin .layui-layer-maxmin {
background: url(default.png) no-repeat -32px 0;
}
body .layer-ext-moon .layui-layer-setwin .layui-layer-maxmin:hover {
background: url(default.png) no-repeat -16px 0;
}
body .layer-ext-moon .layui-layer-setwin .layui-layer-close1,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2 {
background: url(default.png) 0 0;
}
body .layer-ext-moon .layui-layer-setwin .layui-layer-close1:hover,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2:hover {
background: url(default.png) -48px 0;
}
body .layer-ext-moon .layui-layer-padding{padding-top: 24px;}
body .layer-ext-moon .layui-layer-btn {
text-align: center;
padding-top: 15px;
padding-bottom:15px;
background: #f0f4f7;
border-top: 1px #c7c7c7 solid;
}
body .layer-ext-moon .layui-layer-btn a {
font-size: 12px;
font-weight: normal;
margin: 0 3px;
margin-right: 7px;
margin-left: 7px;
padding: 6px 20px;
color: #fff;
border: 1px solid #0064b6;
background: #0071ce;
border-radius: 3px;
display: inline-block;
height: 20px;
line-height: 20px;
text-align: center;
vertical-align: middle;
background-repeat: no-repeat;
text-decoration: none;
outline: none;
}
body .layer-ext-moon .layui-layer-btn .layui-layer-btn0 {
background: #0071ce;
}
body .layer-ext-moon .layui-layer-btn .layui-layer-btn1 {
background: #fff;
color: #404a58;
border: 1px solid #c0c4cd;
border-radius: 3px;
}
body .layer-ext-moon .layui-layer-btn .layui-layer-btn2 {
background: #f60;
color: #fff;
border: 1px solid #f60;
border-radius: 3px;
}
body .layer-ext-moon .layui-layer-btn .layui-layer-btn3 {
background: #f00;
color: #fff;
border: 1px solid #f00;
border-radius: 3px;
}
body .layer-ext-moon .layui-layer-title span.layui-layer-tabnow{
height:47px;
}

View File

@@ -0,0 +1,77 @@

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer-更懂你的web弹窗解决方案</title>
<style>
html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
a,a:hover{ text-decoration:none;}
pre{font-family:'微软雅黑'}
.box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}
.box a{padding-right:15px;}
#about_hide{display:none}
.layer_text{background-color:#fff; padding:20px;}
.layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
.button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}
.photos-demo img{width:200px;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="../dist/layer.js"></script>
</head>
<body>
<div class="box">
<pre>
@Namelayer-v<script>document.write(layer.v)</script> 弹层组件说明
@Author贤心
@Site<a href="http://layer.layui.com/" target="_blank">http://layer.layui.com/</a>
<strong>【注意事项】</strong>
一、使用时请把文件夹layer整个放置在您站点的任何一个目录只需引入layer.js即可除jQuery外其它文件无需再引入。
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径您可以通过layer.config()来配置详见官网API页
三、jquery需1.8+
四、更多使用说明与演示请参见layer官网。
五、使用时请务必保留来源请勿用于违反我国法律法规的web平台。
六、layer遵循MIT开源协议将永久性提供无偿服务。
</pre>
</div>
<div class="box" style="text-align:center">
<a href="http://layer.layui.com/" target="_blank">更多示例</a>
<a href="http://www.layui.com/doc/modules/layer.html" target="_blank">使用文档</a>
<a href="http://fly.layui.com/" id="suggest">交流反馈</a>
<a href="javascript:;" id="about">关于</a>
</div>
<script>
;!function(){
//页面一打开就执行放入ready是为了layer所需配件css、扩展模块加载完毕
layer.ready(function(){
layer.open({
type: 2,
title: '欢迎页',
maxmin: true,
area: ['800px', '500px'],
content: 'http://layer.layui.com/test/welcome.html',
end: function(){
layer.tips('Hi', '#about', {tips: 1})
}
});
});
//关于
$('#about').on('click', function(){
layer.alert(layer.v + ' - 贤心出品 sentsin.com');
});
}();
</script>
</body>
</html>