Merge branch '2.x' into 2.x
|
@ -1,22 +0,0 @@
|
|||
1.8.5/
|
||||
*.iml
|
||||
.idea/
|
||||
.ipr
|
||||
.iws
|
||||
*~
|
||||
~*
|
||||
*.diff
|
||||
*.patch
|
||||
*.bak
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
.svn/
|
||||
*.swp
|
||||
.nojekyll
|
||||
.project
|
||||
.settings/
|
||||
node_modules/
|
||||
_site/
|
||||
.gitignore
|
||||
skin/moon/
|
||||
src/skin/moon/
|
|
@ -1,4 +1,4 @@
|
|||
# v2.4(2016.07.03)
|
||||
# 【2.4】2016.07.03
|
||||
* 兼容jQuery3.0
|
||||
* 优化tips,可支持配置参数fix(之前是强制fix: false),用于决定是固定的tips还是非固定的。
|
||||
* min回调可通过return false来设定不执行默认最小化。
|
||||
|
|
56
GruntFile.js
|
@ -1,56 +0,0 @@
|
|||
module.exports = function(grunt) {
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
|
||||
//压缩js - layer
|
||||
uglify: {
|
||||
options: {
|
||||
expand: true
|
||||
},
|
||||
'layer.js': {
|
||||
options: {
|
||||
banner: '/*! layer-v<%= pkg.version %> <%= pkg.description %> License LGPL <%= pkg.homepage %> By <%= pkg.author %> */\n;'
|
||||
},
|
||||
src: './src/layer.js',
|
||||
dest: './layer.js'
|
||||
},
|
||||
'layer.mobile.js': {
|
||||
options: {
|
||||
banner: '/*! layer mobile-v<%= pkg.mobile %> <%= pkg.description %>移动版 License LGPL <%= pkg.homepage %>mobile By <%= pkg.author %> */\n;'
|
||||
},
|
||||
src: './src/mobile/layer.js',
|
||||
dest: './mobile/layer.js'
|
||||
}
|
||||
},
|
||||
|
||||
//压缩css
|
||||
cssmin: {
|
||||
options : {
|
||||
compatibility : 'ie8', //设置兼容模式
|
||||
noAdvanced : true //取消高级特性
|
||||
}
|
||||
,layer: {
|
||||
files: [{
|
||||
expand: true,
|
||||
cwd: './src/skin',
|
||||
src: ['*.css', '!*.min.css'],
|
||||
dest: './skin'
|
||||
}, {
|
||||
expand: true,
|
||||
cwd: './src/mobile/need',
|
||||
src: ['*.css', '!*.min.css'],
|
||||
dest: './mobile/need'
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-cssmin');
|
||||
|
||||
grunt.registerTask('default', ['uglify', 'cssmin']);
|
||||
|
||||
|
||||
};
|
|
@ -11,8 +11,8 @@ layer是一款近年来口碑非常不错的web弹层组件,她具备全方位
|
|||
|
||||
## 现状
|
||||
从两年前初出茅庐,到后来成为小众组件,再发展到今天,已为数以万计的人所熟知。
|
||||
据不完全统计,截至到2015年09月01号,layer已服务于10万余家web平台。
|
||||
据不完全统计,截至到2016年07月03日,layer已服务于超过20万web平台。
|
||||
|
||||
|
||||
## 备注
|
||||
[官网](http://layer.layui.com/)、[更新日志](https://github.com/sentsin/layer/blob/2.x/CHANGELOG.md)、[社区交流](http://fly.layui.com)
|
||||
## 相关
|
||||
[官网](http://layer.layui.com/)、[社区交流](http://fly.layui.com)
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "layer",
|
||||
"main": "src/layer.js",
|
||||
"version": "2.2.0",
|
||||
"version": "2.4.0",
|
||||
"homepage": "https://github.com/sentsin/layer",
|
||||
"authors": [
|
||||
"sentsin <xu@sentsin.com>"
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
/*! layer mobile-v2.0.0 Web弹层组件 LGPL 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);
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 701 B After Width: | Height: | Size: 701 B |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
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,57 @@
|
|||
/**
|
||||
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('./build'));
|
||||
|
||||
return gulp.src('./src/layer.js').pipe(uglify())
|
||||
.pipe(header('/*! <%= pkg.name %>-v<%= pkg.version %> <%= pkg.description %> <%= pkg.license %> License <%= pkg.homepage %> By <%= pkg.author %> */\n ;', {pkg: pkg}))
|
||||
.pipe(gulp.dest('./build'));
|
||||
|
||||
}
|
||||
,mobile: function() {
|
||||
return gulp.src('./src/mobile/layer.js').pipe(uglify())
|
||||
.pipe(header('/*! <%= pkg.name %> mobile-v<%= pkg.mobile %> <%= pkg.description %> <%= pkg.license %> License <%= pkg.homepage %>mobile By <%= pkg.author %> */\n ;', {pkg: pkg}))
|
||||
.pipe(gulp.dest('./build/mobile'));
|
||||
}
|
||||
,other: function(){
|
||||
gulp.src('./src/**/*.{png,gif}').pipe(rename({}))
|
||||
.pipe(gulp.dest('./build'));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
gulp.task('clear', function(cb){ //清理
|
||||
return del(['./build/*'], cb);
|
||||
});
|
||||
gulp.task('layer', task.minjs); //压缩PC版本
|
||||
gulp.task('mobile', task.mincss); //压缩Mobile文件
|
||||
gulp.task('other', task.other); //移动一些配件
|
||||
|
||||
//全部
|
||||
gulp.task('default', ['clear'], function(){
|
||||
for(var key in task){
|
||||
task[key]();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
|
||||
## 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)
|
|
@ -1,2 +0,0 @@
|
|||
/*! layer mobile-v1.8 弹层组件移动版 License LGPL http://layer.layui.com/mobile By 贤心 */
|
||||
;!function(a){"use strict";var b=document,c="querySelectorAll",d="getElementsByClassName",e=function(a){return b[c](a)},f={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:!0},g={extend:function(a){var b=JSON.parse(JSON.stringify(f));for(var c in a)b[c]=a[c];return b},timer:{},end:{}};g.touch=function(a,b){var c;return/Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/.test(navigator.userAgent)?(a.addEventListener("touchmove",function(){c=!0},!1),void a.addEventListener("touchend",function(a){a.preventDefault(),c||b.call(this,a),c=!1},!1)):a.addEventListener("click",function(a){b.call(this,a)},!1)};var h=0,i=["layermbox"],j=function(a){var b=this;b.config=g.extend(a),b.view()};j.prototype.view=function(){var a=this,c=a.config,f=b.createElement("div");a.id=f.id=i[0]+h,f.setAttribute("class",i[0]+" "+i[0]+(c.type||0)),f.setAttribute("index",h);var g=function(){var a="object"==typeof c.title;return c.title?'<h3 style="'+(a?c.title[1]:"")+'">'+(a?c.title[0]:c.title)+'</h3><button class="layermend"></button>':""}(),j=function(){var a,b=(c.btn||[]).length;return 0!==b&&c.btn?(a='<span type="1">'+c.btn[0]+"</span>",2===b&&(a='<span type="0">'+c.btn[1]+"</span>"+a),'<div class="layermbtn">'+a+"</div>"):""}();if(c.fixed||(c.top=c.hasOwnProperty("top")?c.top:100,c.style=c.style||"",c.style+=" top:"+(b.body.scrollTop+c.top)+"px"),2===c.type&&(c.content='<i></i><i class="laymloadtwo"></i><i></i>'),f.innerHTML=(c.shade?"<div "+("string"==typeof c.shade?'style="'+c.shade+'"':"")+' class="laymshade"></div>':"")+'<div class="layermmain" '+(c.fixed?"":'style="position:static;"')+'><div class="section"><div class="layermchild '+(c.className?c.className:"")+" "+(c.type||c.shade?"":"layermborder ")+(c.anim?"layermanim":"")+'" '+(c.style?'style="'+c.style+'"':"")+">"+g+'<div class="layermcont">'+c.content+"</div>"+j+"</div></div></div>",!c.type||2===c.type){var k=b[d](i[0]+c.type),l=k.length;l>=1&&layer.close(k[0].getAttribute("index"))}document.body.appendChild(f);var m=a.elem=e("#"+a.id)[0];c.success&&c.success(m),a.index=h++,a.action(c,m)},j.prototype.action=function(a,b){var c=this;if(a.time&&(g.timer[c.index]=setTimeout(function(){layer.close(c.index)},1e3*a.time)),a.title){var e=b[d]("layermend")[0],f=function(){a.cancel&&a.cancel(),layer.close(c.index)};g.touch(e,f)}var h=function(){var b=this.getAttribute("type");0==b?(a.no&&a.no(),layer.close(c.index)):a.yes?a.yes(c.index):layer.close(c.index)};if(a.btn)for(var i=b[d]("layermbtn")[0].children,j=i.length,k=0;j>k;k++)g.touch(i[k],h);if(a.shade&&a.shadeClose){var l=b[d]("laymshade")[0];g.touch(l,function(){layer.close(c.index,a.end)})}a.end&&(g.end[c.index]=a.end)},a.layer={v:"1.8",index:h,open:function(a){var b=new j(a||{});return b.index},close:function(a){var c=e("#"+i[0]+a)[0];c&&(c.innerHTML="",b.body.removeChild(c),clearTimeout(g.timer[a]),delete g.timer[a],"function"==typeof g.end[a]&&g.end[a](),delete g.end[a])},closeAll:function(){for(var a=b[d](i[0]),c=0,e=a.length;e>c;c++)layer.close(0|a[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var a=document.scripts,c=a[a.length-1],d=c.src,e=d.substring(0,d.lastIndexOf("/")+1);c.getAttribute("merge")||document.head.appendChild(function(){var a=b.createElement("link");return a.href=e+"need/layer.css",a.type="text/css",a.rel="styleSheet",a.id="layermcss",a}())}()}(window);
|
|
@ -1 +0,0 @@
|
|||
.layermbox{position:relative;z-index:19891014}.layermmain,.laymshade{position:fixed;left:0;top:0;width:100%;height:100%}.layermbtn span,.layermchild{display:inline-block;position:relative}.laymshade{background-color:rgba(0,0,0,.5);pointer-events:auto}.layermmain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layermmain .section{display:table-cell;vertical-align:middle;text-align:center}.layermchild{text-align:left;background-color:#fff;font-size:14px;border-radius:3px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;-webkit-overflow-scrolling:touch;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.18s;animation-duration:.18s}.layermborder{border:1px solid #999}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layermanim{animation-name:bounceIn;-webkit-animation-name:bounceIn}.layermbox0 .layermchild{max-width:90%;min-width:150px}.layermbox1 .layermchild{border:none;border-radius:0}.layermbox2 .layermchild{width:auto;max-width:260px;min-width:40px;border:none;background:0 0;box-shadow:none;color:#fff}.layermchild h3{padding:0 45px 0 10px;height:50px;line-height:50px;font-size:16px;font-weight:400;border-radius:3px 3px 0 0;border-bottom:1px solid #EBEBEB}.layermbtn span,.layermchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layermcont{padding:20px 15px;line-height:22px;text-align:center}.layermbox1 .layermcont{padding:0;text-align:left}.layermbox2 .layermcont{text-align:center;padding:0;line-height:0}.layermbox2 .layermcont i{width:25px;height:25px;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.layermbox2 .layermcont i:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layermbox2 .layermcont i.laymloadtwo{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layermbox2 .layermcont>div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layermbtn{position:relative;height:40px;line-height:40px;font-size:0;text-align:center;border-top:1px solid #EBEBEB}.layermbtn span{width:50%;text-align:center;font-size:14px;cursor:pointer;border-radius:0 3px 0 0}.layermbtn span:first-child{height:39px;background-color:#fff;border-radius:0 0 0 3px}.layermbtn:before{content:'\20';position:absolute;width:1px;height:39px;left:50%;top:0;background-color:#EBEBEB}.layermend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layermend::after,.layermend::before{position:absolute;left:5px;top:15px;content:'';width:18px;height:1px;background-color:#999;transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layermend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
|
28
package.json
|
@ -1,23 +1,25 @@
|
|||
{
|
||||
"name": "layer",
|
||||
"version": "2.4",
|
||||
"mobile": "1.8",
|
||||
"description": "弹层组件",
|
||||
"main": "",
|
||||
"version": "2.4.0",
|
||||
"mobile": "2.0.0",
|
||||
"description": "Web弹层组件",
|
||||
"main": "src/layer.js",
|
||||
"license": "LGPL",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"run": "gulp"
|
||||
},
|
||||
"repository": {
|
||||
"type": "",
|
||||
"url": ""
|
||||
"type": "https",
|
||||
"url": "https://github.com/sentsin/layer.git"
|
||||
},
|
||||
"author": "贤心",
|
||||
"homepage": "http://layer.layui.com/",
|
||||
"devDependencies": {
|
||||
"grunt": "*",
|
||||
"grunt-contrib-uglify": "*",
|
||||
"grunt-contrib-cssmin": "*",
|
||||
"grunt-css": "*"
|
||||
|
||||
}
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -32,7 +32,7 @@ var $, win, ready = {
|
|||
var layer = {
|
||||
v: '2.4',
|
||||
ie6: !!window.ActiveXObject&&!window.XMLHttpRequest,
|
||||
index: 0,
|
||||
index: (window.layer && window.layer.v) ? 100000 : 0,
|
||||
path: ready.getPath,
|
||||
config: function(options, fn){
|
||||
var item = 0;
|
||||
|
@ -40,7 +40,7 @@ var layer = {
|
|||
layer.cache = ready.config = $.extend(ready.config, options);
|
||||
layer.path = ready.config.path || layer.path;
|
||||
typeof options.extend === 'string' && (options.extend = [options.extend]);
|
||||
layer.use('skin/layer.css', (options.extend && options.extend.length > 0) ? (function loop(){
|
||||
layer.use('skin/default/layer.css', (options.extend && options.extend.length > 0) ? (function loop(){
|
||||
var ext = options.extend;
|
||||
layer.use(ext[ext[item] ? item : item-1], item < ext.length ? function(){
|
||||
++item;
|
||||
|
@ -1071,7 +1071,7 @@ ready.run = function(){
|
|||
return layer;
|
||||
}) : function(){
|
||||
ready.run();
|
||||
layer.use('skin/layer.css');
|
||||
layer.use('skin/default/layer.css');
|
||||
}();
|
||||
|
||||
}(window);
|
|
@ -1,13 +1,14 @@
|
|||
/*!
|
||||
|
||||
@Name:layer mobile v1.8 弹层组件移动版
|
||||
@Name:layer mobile v2.0 弹层组件移动版
|
||||
@Author:贤心
|
||||
@Site:http://layer.layui.com/mobie/
|
||||
@License:LGPL
|
||||
|
||||
*/
|
||||
|
||||
;!function(win){
|
||||
;!function(win){
|
||||
|
||||
"use strict";
|
||||
|
||||
var doc = document, query = 'querySelectorAll', claname = 'getElementsByClassName', S = function(s){
|
||||
|
@ -16,11 +17,11 @@ var doc = document, query = 'querySelectorAll', claname = 'getElementsByClassNam
|
|||
|
||||
//默认配置
|
||||
var config = {
|
||||
type: 0,
|
||||
shade: true,
|
||||
shadeClose: true,
|
||||
fixed: true,
|
||||
anim: true
|
||||
type: 0
|
||||
,shade: true
|
||||
,shadeClose: true
|
||||
,fixed: true
|
||||
,anim: 'scale' //默认动画类型
|
||||
};
|
||||
|
||||
var ready = {
|
||||
|
@ -36,23 +37,12 @@ var ready = {
|
|||
|
||||
//点触事件
|
||||
ready.touch = function(elem, fn){
|
||||
var move;
|
||||
if(!/Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/.test(navigator.userAgent)){
|
||||
return elem.addEventListener('click', function(e){
|
||||
fn.call(this, e);
|
||||
}, false);
|
||||
}
|
||||
elem.addEventListener('touchmove', function(){
|
||||
move = true;
|
||||
elem.addEventListener('click', function(e){
|
||||
fn.call(this, e);
|
||||
}, false);
|
||||
elem.addEventListener('touchend', function(e){
|
||||
e.preventDefault();
|
||||
move || fn.call(this, e);
|
||||
move = false;
|
||||
}, false);
|
||||
};
|
||||
|
||||
var index = 0, classs = ['layermbox'], Layer = function(options){
|
||||
var index = 0, classs = ['layui-m-layer'], Layer = function(options){
|
||||
var that = this;
|
||||
that.config = ready.extend(options);
|
||||
that.view();
|
||||
|
@ -64,24 +54,27 @@ Layer.prototype.view = function(){
|
|||
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><button class="layermend"></button>'
|
||||
? '<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 type="1">'+ config.btn[0] +'</span>'
|
||||
btndom = '<span yes type="1">'+ config.btn[0] +'</span>'
|
||||
if(btns === 2){
|
||||
btndom = '<span type="0">'+ config.btn[1] +'</span>' + btndom;
|
||||
btndom = '<span no type="0">'+ config.btn[1] +'</span>' + btndom;
|
||||
}
|
||||
return '<div class="layermbtn">'+ btndom + '</div>';
|
||||
return '<div class="layui-m-layerbtn">'+ btndom + '</div>';
|
||||
}());
|
||||
|
||||
if(!config.fixed){
|
||||
|
@ -91,15 +84,18 @@ Layer.prototype.view = function(){
|
|||
}
|
||||
|
||||
if(config.type === 2){
|
||||
config.content = '<i></i><i class="laymloadtwo"></i><i></i>';
|
||||
config.content = '<i></i><i class="layui-m-layerload"></i><i></i><p>'+ (config.content||'') +'</p>';
|
||||
}
|
||||
|
||||
layerbox.innerHTML = (config.shade ? '<div '+ (typeof config.shade === 'string' ? 'style="'+ config.shade +'"' : '') +' class="laymshade"></div>' : '')
|
||||
+'<div class="layermmain" '+ (!config.fixed ? 'style="position:static;"' : '') +'>'
|
||||
+'<div class="section">'
|
||||
+'<div class="layermchild '+ (config.className ? config.className : '') +' '+ ((!config.type && !config.shade) ? 'layermborder ' : '') + (config.anim ? 'layermanim' : '') +'" ' + ( config.style ? 'style="'+config.style+'"' : '' ) +'>'
|
||||
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="layermcont">'+ config.content +'</div>'
|
||||
+'<div class="layui-m-layercont">'+ config.content +'</div>'
|
||||
+ button
|
||||
+'</div>'
|
||||
+'</div>'
|
||||
|
@ -130,15 +126,6 @@ Layer.prototype.action = function(config, elem){
|
|||
}, config.time*1000);
|
||||
}
|
||||
|
||||
//关闭按钮
|
||||
if(config.title){
|
||||
var end = elem[claname]('layermend')[0], endfn = function(){
|
||||
config.cancel && config.cancel();
|
||||
layer.close(that.index);
|
||||
};
|
||||
ready.touch(end, endfn);
|
||||
}
|
||||
|
||||
//确认取消
|
||||
var btn = function(){
|
||||
var type = this.getAttribute('type');
|
||||
|
@ -150,7 +137,7 @@ Layer.prototype.action = function(config, elem){
|
|||
}
|
||||
};
|
||||
if(config.btn){
|
||||
var btns = elem[claname]('layermbtn')[0].children, btnlen = btns.length;
|
||||
var btns = elem[claname]('layui-m-layerbtn')[0].children, btnlen = btns.length;
|
||||
for(var ii = 0; ii < btnlen; ii++){
|
||||
ready.touch(btns[ii], btn);
|
||||
}
|
||||
|
@ -158,7 +145,7 @@ Layer.prototype.action = function(config, elem){
|
|||
|
||||
//点遮罩关闭
|
||||
if(config.shade && config.shadeClose){
|
||||
var shade = elem[claname]('laymshade')[0];
|
||||
var shade = elem[claname]('layui-m-layershade')[0];
|
||||
ready.touch(shade, function(){
|
||||
layer.close(that.index, config.end);
|
||||
});
|
||||
|
@ -168,7 +155,7 @@ Layer.prototype.action = function(config, elem){
|
|||
};
|
||||
|
||||
win.layer = {
|
||||
v: '1.8',
|
||||
v: '2.0',
|
||||
index: index,
|
||||
|
||||
//核心方法
|
||||
|
@ -185,7 +172,7 @@ win.layer = {
|
|||
clearTimeout(ready.timer[index]);
|
||||
delete ready.timer[index];
|
||||
typeof ready.end[index] === 'function' && ready.end[index]();
|
||||
delete ready.end[index];
|
||||
delete ready.end[index];
|
||||
},
|
||||
|
||||
//关闭所有layer层
|
||||
|
@ -209,7 +196,7 @@ win.layer = {
|
|||
|
||||
document.head.appendChild(function(){
|
||||
var link = doc.createElement('link');
|
||||
link.href = path + 'need/layer.css';
|
||||
link.href = path + 'need/layer.css?2.0';
|
||||
link.type = 'text/css';
|
||||
link.rel = 'styleSheet'
|
||||
link.id = 'layermcss';
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
/* layer弹层移动版样式 */
|
||||
/* layer弹层移动版样式 */
|
||||
|
||||
.layermbox{position:relative; z-index:19891014;}
|
||||
.laymshade,
|
||||
|
|
|
@ -1,13 +1,12 @@
|
|||
/*!
|
||||
/**
|
||||
|
||||
@Name: layer's style
|
||||
@Name: layer
|
||||
@Author: 贤心
|
||||
@Blog: sentsin.com
|
||||
|
||||
*/
|
||||
**/
|
||||
|
||||
*html{background-image:url(about:blank); background-attachment:fixed;}
|
||||
html #layui_layer_skinlayercss{display:none; position: absolute; width:1989px;}
|
||||
html #layui_layer_skindefaultlayercss{display:none; position: absolute; width:1989px;}
|
||||
|
||||
/* common */
|
||||
.layui-layer-shade, .layui-layer{position:fixed; _position:absolute; pointer-events: auto;}
|
||||
|
@ -18,8 +17,8 @@ html #layui_layer_skinlayercss{display:none; position: absolute; width:1989px;}
|
|||
.layui-layer-content{position:relative;}
|
||||
.layui-layer-border{border:1px solid #B2B2B2; border:1px solid rgba(0,0,0,.3); box-shadow: 1px 1px 5px rgba(0,0,0,.2);}
|
||||
.layui-layer-moves{position:absolute; border:3px solid #666; border:3px solid rgba(0,0,0,.5); cursor:move; background-color:#fff; background-color:rgba(255,255,255,.3); filter:alpha(opacity=50);}
|
||||
.layui-layer-load{background:url(default/loading-0.gif) #fff center center no-repeat;}
|
||||
.layui-layer-ico{ background:url(default/icon.png) no-repeat;}
|
||||
.layui-layer-load{background:url(loading-0.gif) #fff 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;}
|
||||
|
@ -141,12 +140,13 @@ html #layui_layer_skinlayercss{display:none; position: absolute; width:1989px;}
|
|||
.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 .layui-layer-content{overflow:hidden;}
|
||||
.layui-layer-iframe .layui-layer-content{-webkit-overflow-scrolling: touch; overflow-y: auto;}
|
||||
.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(default/loading-0.gif) no-repeat;}
|
||||
.layui-layer-loading .layui-layer-loading1{width:37px; height:37px; background:url(default/loading-1.gif) no-repeat;}
|
||||
.layui-layer-loading .layui-layer-loading2, .layui-layer-ico16{width:32px; height:32px; background:url(default/loading-2.gif) no-repeat;}
|
||||
.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:5px 10px; font-size:12px; _float:left; border-radius:3px; box-shadow: 1px 1px 3px rgba(0,0,0,.3); background-color:#FF9900; color:#fff;}
|
||||
.layui-layer-tips .layui-layer-close{right:-2px; top:-1px;}
|
||||
|
@ -176,7 +176,7 @@ html #layui_layer_skinlayercss{display:none; position: absolute; width:1989px;}
|
|||
|
||||
*/
|
||||
|
||||
.layui-layer-iconext{background:url(default/icon-ext.png) no-repeat;}
|
||||
.layui-layer-iconext{background:url(icon-ext.png) no-repeat;}
|
||||
|
||||
/* prompt模式 */
|
||||
.layui-layer-prompt .layui-layer-input{display:block; width:220px; height:30px; margin:0 auto; line-height:30px; padding: 0 5px; border: 1px solid #ccc; box-shadow: 1px 1px 5px rgba(0,0,0,.1) inset; color:#333;}
|
|
@ -1,30 +1,30 @@
|
|||
<!doctype html>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>layer-更懂你的web弹窗解决方案</title>
|
||||
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
|
||||
<script src="../src/layer.js?v=1.9.0"></script>
|
||||
<title>layer-更懂你的web弹窗解决方案</title>
|
||||
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
|
||||
<script src="../build/layer.js"></script>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<pre>
|
||||
@Name:layer-v<script>document.write(layer.v)</script> 弹层组件说明
|
||||
@Author:贤心
|
||||
@Blog:<a href="http://sentsin.com" target="_blank">http://sentsin.com</a>
|
||||
@Site:<a href="http://sentsin.com/jquery/layer/?form=local" target="_blank">http://sentsin.com/jquery/layer</a>
|
||||
@Site:<a href="http://layer.layui.com/" target="_blank">http://layer.layui.com/</a>
|
||||
|
||||
|
||||
<strong>【注意事项】</strong>
|
||||
|
@ -37,26 +37,11 @@ pre{font-family:'微软雅黑'}
|
|||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<h2 style="padding-bottom:20px;">扩展模块:图片查看器(相册层)</h2>
|
||||
<div id="photosDemo" class="photos-demo">
|
||||
<!-- layer-src表示大图 layer-pid表示图片id src表示缩略图-->
|
||||
|
||||
<img layer-src="http://static.oschina.net/uploads/space/2014/0516/012728_nAh8_1168184.jpg" layer-pid="" src="http://static.oschina.net/uploads/space/2014/0516/012728_nAh8_1168184.jpg" alt="layer宣传图">
|
||||
<img layer-src="http://sentsin.qiniudn.com/sentsinmy5.jpg" layer-pid="" src="http://sentsin.qiniudn.com/sentsinmy5.jpg" alt="我入互联网这五年">
|
||||
<img layer-src="" layer-pid="" src="http://sentsin.qiniudn.com/sentsin_39101a660cf4671b7ec297a74cc652c74152104f.jpg" alt="微摄影">
|
||||
<img layer-src="http://sentsin.qiniudn.com/sentsinsan01.jpg" layer-pid="" src="http://sentsin.qiniudn.com/sentsinsan01.jpg" alt="三清山">
|
||||
<img layer-src="http://ww2.sinaimg.cn/mw1024/5db11ff4jw1ehcyirr6quj20q00ex42w.jpg" layer-pid="" src="http://ww2.sinaimg.cn/mw1024/5db11ff4jw1ehcyirr6quj20q00ex42w.jpg" alt="国足">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box" style="text-align:center">
|
||||
<a href="http://sentsin.com/jquery/layer/?form=local" target="_blank">更多示例</a>
|
||||
<a href="http://sentsin.com/jquery/layer/api.html?form=local" target="_blank">使用文档</a>
|
||||
<a href="http://say.sentsin.com/home-48.html?form=local" id="suggest">交流反馈</a>
|
||||
<a href="javascript:;" id="about">关于</a>
|
||||
<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>
|
||||
|
@ -65,31 +50,24 @@ pre{font-family:'微软雅黑'}
|
|||
|
||||
//页面一打开就执行,放入ready是为了layer所需配件(css、扩展模块)加载完毕
|
||||
layer.ready(function(){
|
||||
//官网欢迎页
|
||||
layer.open({
|
||||
type: 2,
|
||||
//skin: 'layui-layer-lan',
|
||||
title: 'layer弹层组件',
|
||||
fix: false,
|
||||
shadeClose: true,
|
||||
area: ['1100px', '600px'],
|
||||
content: 'http://sentsin.com/jquery/layer/?form=local',
|
||||
end: function(){
|
||||
layer.tips('试试相册模块?', '#photosDemo', {tips: 1})
|
||||
}
|
||||
});
|
||||
|
||||
//layer.msg('欢迎使用layer');
|
||||
|
||||
//使用相册
|
||||
layer.photos({
|
||||
photos: '#photosDemo'
|
||||
});
|
||||
//官网欢迎页
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: 'layer弹层组件官网',
|
||||
fix: false,
|
||||
maxmin: true,
|
||||
shadeClose: true,
|
||||
area: ['1100px', '600px'],
|
||||
content: 'http://sentsin.com/jquery/layer/?form=local',
|
||||
end: function(){
|
||||
layer.tips('Hi', '#about', {tips: 1})
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//关于
|
||||
$('#about').on('click', function(){
|
||||
layer.alert(layer.v + ' - 贤心出品 sentsin.com');
|
||||
layer.alert(layer.v + ' - 贤心出品 sentsin.com');
|
||||
});
|
||||
|
||||
}();
|
||||
|
|