更新前端文件

This commit is contained in:
2019-07-06 16:59:35 +08:00
parent 777b452685
commit 79615defdb
1758 changed files with 315372 additions and 12014 deletions
@@ -0,0 +1,29 @@
{
"name": "layer",
"main": "src/layer.js",
"version": "3.1.3",
"homepage": "https://github.com/sentsin/layer",
"authors": [
"sentsin <xu@sentsin.com>"
],
"description": "弹窗组件",
"moduleType": [
"amd",
"globals"
],
"keywords": [
"layer",
"layui",
"dialog"
],
"license": "MIT",
"_release": "3.1.3",
"_resolution": {
"type": "version",
"tag": "3.1.3",
"commit": "f4053a639578e7b0f7098f81e1969a4e8c17e134"
},
"_source": "https://github.com/karsonzhang/fastadmin-layer.git",
"_target": "~3.1.2",
"_originalSource": "fastadmin-layer"
}
@@ -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/
@@ -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来设定不执行默认最小化。
* 修复在移动端使用iframe,IOS下无法滑动的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回调函数,用于切换图片时进行相关操作
* 相册层内部代码优化。
@@ -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.
@@ -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)
@@ -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"
}
File diff suppressed because one or more lines are too long
@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

@@ -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}
@@ -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]();
}
});
@@ -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"
]
}
@@ -0,0 +1,3 @@
## 注意
开发版源码随时可能会提交,因此生产环境更建议build目录中压缩后的layer.js。
File diff suppressed because it is too large Load Diff
@@ -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)
@@ -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);
@@ -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;}
Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

@@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

@@ -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;
}
@@ -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>