更新layer组件
parent
9848dd63bd
commit
ec07a3ed23
|
@ -0,0 +1,13 @@
|
|||
# layer弹窗组件
|
||||
> 以知名弹窗插件layer为参考,基于yua框架进行移植的一个弹窗组件。
|
||||
|
||||
## 常用方法
|
||||
> layer组件本身提供了几种常见的弹窗类型。
|
||||
|
||||
### layer.alert(msg[,conf])
|
||||
+ msg `<String>`
|
||||
+ conf `<Object>` | `<Function>` 可选
|
||||
|
||||
> 该方法为弹出一个普通的`alert`类型的弹窗, 功能类似于原生的`alert`方法,方法返回该弹窗的唯一ID, 该ID用于在其他地方对该弹窗的控制(如关闭)。
|
||||
> `msg`为要显示的提示文本, 支持html文本。
|
||||
> `conf`为可行参数, 可以一个对象或一个方法, 如果一个方法,则自动为确定和关闭按钮的回调。
|
|
@ -0,0 +1,13 @@
|
|||
v0.0.2-base / 2017-04-13
|
||||
==================
|
||||
+ 修复:layer方式创建实例时,漏掉自身的bug;
|
||||
+ 修复layer.open()方法打开已有实例时不返回id的bug;
|
||||
+ 修复layer.close()方法关闭实例时,未修改实例状态的bug;
|
||||
+ 修改特殊模式下的实例的最小宽度为10px;
|
||||
+ 优化:layer方式创建实例的逻辑处理;
|
||||
+ 优化layer.alert()方法参数的处理;
|
||||
|
||||
|
||||
v0.0.1-base / 2017-04-06
|
||||
==================
|
||||
+ 完成layer base版移植
|
|
@ -55,7 +55,8 @@ define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
|||
return
|
||||
}
|
||||
layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][1])
|
||||
unique = null
|
||||
layerObj[id].show = false
|
||||
|
||||
}catch(err){}
|
||||
}else{
|
||||
try {
|
||||
|
@ -96,7 +97,7 @@ define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
|||
__layer = {
|
||||
alert: function(msg, conf){
|
||||
if(typeof conf === 'function'){
|
||||
conf = {yes: conf}
|
||||
conf = {yes: conf, no: conf}
|
||||
}else if(typeof conf === 'object'){
|
||||
conf = conf
|
||||
}else{
|
||||
|
@ -212,7 +213,7 @@ define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
|||
}else{
|
||||
//只能显示一个实例
|
||||
if(layerObj[conf].show){
|
||||
return
|
||||
return conf
|
||||
}
|
||||
layerObj[conf].show = true
|
||||
|
||||
|
@ -225,12 +226,13 @@ define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
|||
|
||||
layerObj[conf].parentElem.appendChild(layerDom[conf][1])
|
||||
layerObj[conf].parentElem.replaceChild(layerDom[conf][1], layerObj[conf].wrap)
|
||||
return conf
|
||||
}
|
||||
}else{
|
||||
return new __constructor(conf).init.$id
|
||||
}
|
||||
},
|
||||
version: '0.0.1-base'
|
||||
version: '0.0.2-base'
|
||||
};
|
||||
|
||||
/*type: { // 弹窗类型对应的id值
|
||||
|
@ -486,7 +488,11 @@ define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
|||
yua.directive('layer', {
|
||||
priority: 1400,
|
||||
init: function(binding){
|
||||
if(!binding.param){
|
||||
if(!binding.param || binding.param !== 'tips'){
|
||||
|
||||
binding.param = '' //去掉param,保证之后的逻辑处理正常
|
||||
// 去掉:layer属性,避免二次扫描
|
||||
binding.element.removeAttribute(binding.name)
|
||||
binding.element.style.display = 'none'
|
||||
}
|
||||
},
|
||||
|
@ -498,6 +504,16 @@ define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
|||
var _this = this,
|
||||
init = Object.assign({}, this.element.dataset);
|
||||
|
||||
if(init.hasOwnProperty('area')){
|
||||
init.area = init.area.split(',')
|
||||
}
|
||||
if(init.hasOwnProperty('offset')){
|
||||
init.offset = init.offset.split(',')
|
||||
}
|
||||
if(init.hasOwnProperty('btns')){
|
||||
init.btns = init.btns.split(',')
|
||||
}
|
||||
|
||||
if(!this.param){
|
||||
init.type = 7;
|
||||
init.$id = '$wrap-' + val;
|
||||
|
@ -505,9 +521,12 @@ define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
|||
init.menubar = false;
|
||||
}
|
||||
|
||||
var tmp = new __constructor().ready(init);
|
||||
var tmp = new __constructor().ready(init),
|
||||
elem = this.element.cloneNode(true);
|
||||
|
||||
tmp.init.content = this.element.cloneNode(true);
|
||||
// 去掉隐藏之后,再放入content中
|
||||
elem.style.display = ''
|
||||
tmp.init.content = elem.outerHTML;
|
||||
|
||||
layerObj[tmp.init.$id] = {obj: tmp, parentElem: this.element.parentNode, wrap: this.element, show: false};
|
||||
layerDom[tmp.init.$id] = tmp.create();
|
||||
|
|
|
@ -78,7 +78,7 @@
|
|||
.do-layer-cover.type-6 {background:rgba(0,0,0,.3);}
|
||||
|
||||
/*special模式类型,调小宽高限制,内外边距取消*/
|
||||
.do-layer.type-unspecial {min-width:100px;background:transparent;}
|
||||
.do-layer.type-unspecial {min-width:10px;background:transparent;}
|
||||
.do-layer.type-unspecial .layer-content {min-height:60px;padding:0}
|
||||
.do-layer.type-unspecial .layer-content .detail {margin:0;padding:0}
|
||||
|
||||
|
|
Reference in New Issue