From ec07a3ed23c2bf607c21ae8e0b7e582c5fbee379 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Fri, 14 Apr 2017 00:55:42 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0layer=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/lib/layer/Readme.md | 13 +++++++++++++ js/lib/layer/Release.md | 13 +++++++++++++ js/lib/layer/layer-base.js | 35 +++++++++++++++++++++++++++-------- js/lib/layer/skin/def.css | 2 +- 4 files changed, 54 insertions(+), 9 deletions(-) create mode 100644 js/lib/layer/Readme.md create mode 100644 js/lib/layer/Release.md diff --git a/js/lib/layer/Readme.md b/js/lib/layer/Readme.md new file mode 100644 index 0000000..eb0591b --- /dev/null +++ b/js/lib/layer/Readme.md @@ -0,0 +1,13 @@ +# layer弹窗组件 +> 以知名弹窗插件layer为参考,基于yua框架进行移植的一个弹窗组件。 + +## 常用方法 +> layer组件本身提供了几种常见的弹窗类型。 + +### layer.alert(msg[,conf]) ++ msg `` ++ conf `` | `` 可选 + +> 该方法为弹出一个普通的`alert`类型的弹窗, 功能类似于原生的`alert`方法,方法返回该弹窗的唯一ID, 该ID用于在其他地方对该弹窗的控制(如关闭)。 +> `msg`为要显示的提示文本, 支持html文本。 +> `conf`为可行参数, 可以一个对象或一个方法, 如果一个方法,则自动为确定和关闭按钮的回调。 \ No newline at end of file diff --git a/js/lib/layer/Release.md b/js/lib/layer/Release.md new file mode 100644 index 0000000..702fcc4 --- /dev/null +++ b/js/lib/layer/Release.md @@ -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版移植 \ No newline at end of file diff --git a/js/lib/layer/layer-base.js b/js/lib/layer/layer-base.js index 44e0cff..729209b 100644 --- a/js/lib/layer/layer-base.js +++ b/js/lib/layer/layer-base.js @@ -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); - - tmp.init.content = this.element.cloneNode(true); + var tmp = new __constructor().ready(init), + elem = 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(); diff --git a/js/lib/layer/skin/def.css b/js/lib/layer/skin/def.css index 5cbe97a..5d93f3a 100644 --- a/js/lib/layer/skin/def.css +++ b/js/lib/layer/skin/def.css @@ -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}