完成layer组件;优化yua加载;添加codemirror组件;优化drag组件;

css/base.css

@@ -10,13 +10,13 @@
  * 表示状态的应该用do-st-*命名 
  * 表示功能的应该用do-fn-*命名
  * 表示页面模块的应该用do-mod-modname 命名
- * 表示应用的应该用do-uiname命名, 它的子元素应该全部包在 .do-uiname这个根类下
+ * 表示UI组件的应该用do-uiname命名, 它的子元素应该全部包在 .do-uiname这个根类下
  * 如 .do-layer .body { ... }
  * 
  * 样式规则的出现顺序
  * 1 display float position overflow z-index 表示定位/布局的属性
  * 2 width height margin padding border 表示盒子模型的属性
- * 3 line-heightcursor font-size vertical-align text-align user-select outline ....排版相关的属性
+ * 3 line-height font-size vertical-align text-align user-select outline ....排版相关的属性
  * 4 color background opacity cursor ...表示装饰相关的属性
  * 5 content list-style quotes ... 内容生成相关的属性
  * 

js/lib/drag/drag.js

@@ -35,8 +35,8 @@ define(['yua'], function(){
             // 拖拽结束,且释放鼠标
             binding.dragged = getBindingCallback(binding.element, 'data-dragged', binding.vmodels)
 
-            //获取是否允许溢出可视区
+            //默认允许溢出可视区
-            binding.overflow = !!binding.element.dataset.overflow
+            binding.overflow = true
 
             //方向,x轴, y轴, xy轴
             binding.axis = 'xy'
@@ -49,15 +49,11 @@ define(['yua'], function(){
             binding.limit = false
             if(!!binding.element.dataset.limit) {
                 binding.limit = binding.element.dataset.limit
+                //这里,只要不为空,除parent外,其他值都默认为window, 故"可溢出"为false
+                binding.overflow = false
                 delete binding.element.dataset.limit
             }
 
-            // 如果不限制,则允许溢出
-            if(binding.limit === false) {
-                binding.overflow = true
-            }
-
-            delete binding.element.dataset.overflow
             delete binding.element.dataset.beforedrag
             delete binding.element.dataset.dragging
             delete binding.element.dataset.dragged
@@ -68,7 +64,7 @@ define(['yua'], function(){
                 $drag = yua(this.element),
                 $doc = yua(document),
                 $target = null,
-                parent = null;
+                parentElem = null;
 
             // val值不为空时, 获取真正的拖动元素
             // 仅从父级上找
@@ -82,7 +78,7 @@ define(['yua'], function(){
             $target = yua(target);
             // 限制范围为parent时,获取父级元素
             if(this.limit === 'parent'){
-                parent = target.parentNode
+                parentElem = target.parentNode
             }
 
 
@@ -129,16 +125,16 @@ define(['yua'], function(){
                 var limit = [0, wh - th, 0, ww - tw]
 
                 if(_this.limit === 'parent') {
-                    var pgcs = getComputedStyle(parent),
+                    var pgcs = getComputedStyle(parentElem),
                         pcst = pgcs.transform.replace(/matrix\((.*)\)/, '$1'),
-                        poffset = yua(parent).offset();
+                        poffset = yua(parentElem).offset();
 
                     pcst = pcst !== 'none' ? pcst.split(', ') : [1,0,0,1,0,0]
 
                     var pox = poffset.left - pcst[4] - bsl,
                         poy = poffset.top - pcst[5] - bst;
 
-                    limit = [poy, poy + parent.clientHeight - th, pox, pox + parent.clientWidth - tw]
+                    limit = [poy, poy + parentElem.clientHeight - th, pox, pox + parentElem.clientWidth - tw]
                 }
 
                 var mvfn = $doc.bind('mousemove', function(ev){

js/lib/layer/layer-base.js

@@ -0,0 +1,578 @@
+/**
+ * 
+ * @authors yutent (yutent@doui.cc)
+ * @date    2016-09-21 01:36:29
+ *
+ */
+
+"use strict";
+
+
+define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
+
+    if(window.layer){
+        return window.layer
+    }
+    var layerDom = {},
+        layerObj = {},
+        unique = null, //储存当前打开的1/2/3类型的弹窗
+        lid = 0,
+        defconf = {
+            type: 1, // 弹窗类型
+            skin: 'def', //默认主题
+            icon: 1, //图标类型
+            background: '#fff',
+            shade: true, //遮罩
+            shadeClose: false, //遮罩点击关闭弹窗
+            radius: '0px', //弹窗圆角半径
+            area: ['auto', 'auto'],
+            title: '', //弹窗主标题(在工具栏上的)
+            menubar: true, //是否显示菜单栏
+            content: '', // 弹窗的内容
+            fixed: false, //是否固定不可拖拽
+            offset: null, //弹窗出来时的坐标, 为数组,可有4个值,依次是 上右下左
+            btns: ['确定', '取消'], //弹窗的2个按钮的文字
+            yes: close, //确定按钮对应的回调
+            no: close, //取消按钮对应的回调
+            success: null //弹窗初始化完成时的回调
+        };
+
+    function uuid(){
+        return 'layer-' + (++lid)
+    }
+
+
+    function close(id){
+        if(typeof id !== 'string' && typeof id !== 'number'){
+            return console.error(new Error('要关闭的layer实例不存在'))
+        }
+        if(/^\$wrap\-/.test(id) || layerObj['$wrap-' + id]){
+
+            try {
+                id = (layerObj['$wrap-' + id] ? '$wrap-' : '') + id;
+                //未显示过,忽略
+                if(!layerObj[id].show){
+                    return
+                }
+                layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][1])
+                unique = null
+            }catch(err){}
+        }else{
+            try {
+                document.body.removeChild(layerDom[id][1])
+                document.body.removeChild(layerDom[id][0])
+                unique = null
+            }catch(err){}
+
+            delete layerDom[id]
+            delete yua.vmodels[id]
+        }
+        
+    }
+
+    function reapeat(str, num){
+        var idx = 0,
+            result = ''
+        while(idx < num){
+            result += str
+            idx++
+        }
+        return result
+    }
+
+    function fixOffset(val){
+        if(!val && val !== 0){
+            return 'auto'
+        }else{
+            return val
+        }
+    }
+
+    var __constructor = function(conf){
+            if(conf){
+                this.ready(conf).append().show()
+            }
+        },
+        __layer = {
+            alert: function(msg, conf){
+                if(typeof conf === 'function'){
+                    conf = {yes: conf}
+                }else if(typeof conf === 'object'){
+                    conf = conf
+                }else{
+                    conf = {}
+                }
+                conf.icon = 6
+                conf.content = msg
+                return __layer.open(conf)
+            },
+            confirm: function(msg, conf){
+                if(typeof conf === 'function'){
+                    conf = {yes: conf}
+                }else if(typeof conf === 'object'){
+                    conf = conf
+                }else{
+                    conf = {}
+                }
+                conf.type = 2
+                conf.icon = 8
+                conf.content = msg
+                return __layer.open(conf)
+            },
+            msg: function(msg, conf){
+                if(typeof conf !== 'object'){
+                    var tmp = conf
+                    conf = {timeout: 2500}
+                    if(typeof tmp === 'number'){
+                        conf.icon = tmp
+                    }
+                }
+
+                if(!conf.hasOwnProperty('timeout')){
+                    conf.timeout = 2500
+                }
+
+                conf.specialMode = true;//特殊模式
+                conf.content = '<p class="msg-box">' + msg + '</p>'
+                conf.type = 7
+                conf.fixed = true
+                conf.shade = false
+                conf.menubar = false
+                conf.radius = '5px'
+                return __layer.open(conf)
+            },
+            loading: function(style, time, cb){
+                style = style >>> 0
+
+                if(typeof time === 'function'){
+                    cb = time;
+                    time = 0
+                } else{
+                    time = time >>> 0
+                    if(typeof cb !== 'function'){
+                        cb = yua.noop
+                    }
+                }
+                return __layer.open({type: 6, load: style, yes: cb, timeout: time, menubar: false, background: 'none', fixed: true})
+            },
+            tips: function(msg, elem, conf){
+                if(!(elem instanceof HTMLElement)){
+                    return console.error(new Error('tips类型必须指定一个目标容器'))
+                }
+                if(typeof conf !== 'object'){
+                    var tmp = conf
+                    conf = {timeout: 2500}
+                    if(typeof tmp === 'number'){
+                        conf.icon = tmp
+                    }
+                }
+                if(!conf.hasOwnProperty('timeout')){
+                    conf.timeout = 2500
+                }
+                if(!conf.background){
+                    conf.background = 'rgba(0,0,0,.5)'
+                }
+                if(!conf.color){
+                    conf.color = '#fff'
+                }
+                conf.$elem = elem
+                conf.content = msg
+                conf.type = 5;
+                conf.icon = 0;
+                conf.fixed = true;
+                conf.shade = false;
+                conf.menubar = false;
+                return __layer.open(conf)
+            },
+            prompt: function(msg, callback){
+                if(typeof callback !== 'function'){
+                    return console.error('argument [callback] requires a function, but ' + (typeof callback) + ' given')
+                }
+                var conf = {
+                        type: 3,
+                        icon: 7,
+                        prompt: '',
+                        title: msg,
+                        content: '<input class="prompt-value" :duplex="prompt" />',
+                        yes: function(id){
+                            callback(id, yua.vmodels[id].prompt)
+                        }
+                    }
+                return __layer.open(conf)
+            },
+            use: function(skin, callback){
+                require(['css!./skin/' + skin], callback)
+            },
+            close: close,
+            open: function(conf){
+                if(typeof conf === 'string'){
+                    conf = '$wrap-' + conf
+                    if(!layerObj[conf]){
+                        throw new Error('layer实例不存在')
+                    }else{
+                        //只能显示一个实例
+                        if(layerObj[conf].show){
+                            return
+                        }
+                        layerObj[conf].show = true
+
+                        if(!yua.vmodels[conf]){
+                            yua.define(layerObj[conf].obj.init)
+                        }
+                        
+                        yua.scan(layerDom[conf][1])
+                        layerObj[conf].obj.show()
+
+                        layerObj[conf].parentElem.appendChild(layerDom[conf][1])
+                        layerObj[conf].parentElem.replaceChild(layerDom[conf][1], layerObj[conf].wrap)
+                    }
+                }else{
+                    return new __constructor(conf).init.$id
+                }
+            },
+            version: '0.0.1-base'
+        };
+
+    /*type: { // 弹窗类型对应的id值
+        1: 'alert',
+        2: 'confirm',
+        3: 'prompt',
+        4: 'iframe',
+        5: 'tips',
+        6: 'loading',
+        7: 'msg',
+    }*/
+    __constructor.prototype = {
+        dot: { //loading的子元素数量
+            0: 4,
+            1: 9,
+            2: 2,
+            3: 3,
+            4: 2,
+            5: 5,
+            6: 5,
+            7: 5
+        },
+        timeout: null,
+        create: function(){
+            var layBox = document.createElement('div'),
+                coverBox = document.createElement('div');
+
+            coverBox.className = 'do-layer-cover type-' + this.init.type
+            // 允许点击遮罩关闭弹层时, 添加控制器
+            if(this.init.shadeClose){
+                coverBox.setAttribute(':controller', this.cInit.$id)
+                coverBox.setAttribute(':click', 'close(\'' + this.init.$id + '\')')
+            }
+            
+            layBox.className = 'do-layer skin-'
+                + this.init.skin
+                + (this.init.type === 5 && ' active' || '')
+                + ' type-'
+                + ((!this.init.specialMode && this.init.type === 7) ? 'unspecial' : this.init.type);
+
+            //暂时隐藏,避免修正定位时,能看到闪一下
+            layBox.style.visibility = 'hidden'
+            layBox.style.borderRadius = this.init.radius
+      
+            layBox.setAttribute(':controller', this.init.$id)
+
+            //没有菜单栏, 且未禁止拖拽,则加上可拖拽属性
+            if(!this.init.menubar && !this.init.fixed){
+                layBox.setAttribute(':drag', '')
+                layBox.setAttribute('data-limit', 'window')
+            }
+
+            //弹窗的宽高
+            var boxcss = ''
+            if(this.init.area[0] !== 'auto'){
+                boxcss += 'width: ' + this.init.area[0] + ';'
+            }
+            if(this.init.area[1] !== 'auto'){
+                boxcss += 'height: ' + this.init.area[1] + ';'
+            }
+
+            layBox.innerHTML = this.getMenubar()
+                + '<div class="layer-content do-fn-cl '
+                    + (this.init.icon === 0 && 'none-icon' || '')
+                    + '" style="'
+                    + boxcss
+                    + '">'
+                + this.getCont()
+                + '</div>'
+                + this.getBtns()
+                + (this.init.type === 5 && '<i class="arrow" style="border-top-color: '
+                    + this.init.background
+                    + '"></i>' || '')
+                
+            return [this.init.shade ? coverBox : null, layBox]
+        },
+        getCont: function(){
+            if(this.init.type === 6){
+                return this.getLoading(this.init.load)
+            }else{
+                return this.getIcon()
+                    + '<div class="detail" :html="content"></div>'
+            }
+        },
+        getLoading: function(style){
+            return '<div class="do-ui-load load-style-'
+                    + style
+                    + '">'
+                + '<span class="dot-box">'
+                    + reapeat('<i></i>', this.dot[style])
+                + '</span>'
+                + '</div>'
+        },
+        //获取窗口导航条
+        getMenubar: function(){
+            var html = ''
+            if(this.init.menubar){
+                html += '<div class="layer-title do-fn-noselect" ';
+                //可拖拽
+                if(!this.init.fixed){
+                    html += ':drag="do-layer" data-limit="window" '
+                }
+                
+                html += '>{{title}}'
+                    + '<a class="action-close deficon" :click="no(\'' + this.init.$id + '\')"></a>'
+                    + '</div>'
+            }
+            return html
+        },
+        //获取窗口内容的图标
+        getIcon: function(){
+            if(this.init.icon === 0){
+                return ''
+            }
+            if(this.init.type < 4 || this.init.type === 5 || this.init.specialMode){
+                return '<span class="deficon icon-' + this.init.icon + '"></span>'
+            }
+            return ''
+        },
+        // 获取窗口按钮
+        getBtns: function(){
+            if(this.init.type > 3){
+                return ''
+            }else{
+                var html = '<div class="layer-btns do-fn-noselect">';
+                if(this.init.type > 1){
+                    html += '<a href="javascript:;" class="action-no" '
+                        + ':click="no(\'' + this.init.$id + '\')" '
+                        + ':text="btns[1]"></a>'
+                    + '<a href="javascript:;" class="action-yes" '
+                        + ':click="yes(\'' + this.init.$id + '\')" '
+                        + ':text="btns[0]"></a>'
+                }else{
+                    html += '<a href="javascript:;" class="action-yes" '
+                        + ':click="yes(\'' + this.init.$id + '\')" '
+                        + ':text="btns[0]"></a>'
+                }
+                html += '</div>'
+
+                return html
+            }
+        },
+        append: function(){
+            //如果有已经打开的弹窗,则关闭
+            if(unique){
+                __layer.close(unique)
+            }
+            if(this.init.type < 4){
+                unique = this.init.$id
+            }
+            layerDom[this.init.$id] = this.create()
+            if(layerDom[this.init.$id][0]){
+                document.body.appendChild(layerDom[this.init.$id][0])
+                //仅在允许点击遮罩时,初始化控制器,减少资源消耗
+                if(this.init.shadeClose){
+                    yua.define(this.cInit)
+                    yua.scan(layerDom[this.init.$id][0])
+                }
+            }
+
+            document.body.appendChild(layerDom[this.init.$id][1])
+            yua.define(this.init)
+            yua.scan(layerDom[this.init.$id][1])
+            return this
+        },
+        show: function(){
+            var _this = this;
+            
+            setTimeout(function(){
+                var style = {visibility: '', background: _this.init.background},
+                    css = getComputedStyle(layerDom[_this.init.$id][1]);
+
+                if(_this.init.type === 5){
+                    style.color = _this.init.color
+
+                    var $elem = yua(_this.init.$elem),
+                        ew = $elem.innerWidth(),
+                        ol = $elem.offset().left - document.body.scrollLeft,
+                        ot = $elem.offset().top - document.body.scrollTop;
+
+                    style.left = ol + (ew * 0.7)
+                    style.top = ot - parseInt(css.height) - 8
+
+                }else{
+                    if(_this.init.offset){
+                        style.top = fixOffset(_this.init.offset[0])
+                        style.right = fixOffset(_this.init.offset[1])
+                        style.bottom = fixOffset(_this.init.offset[2])
+                        style.left = fixOffset(_this.init.offset[3])
+                    }else{
+                        style = yua.mix(style, {
+                            marginLeft: -parseInt(css.width) / 2,
+                            marginTop: -parseInt(css.height) / 2,
+                        })
+                    }
+                }
+                
+                yua(layerDom[_this.init.$id][1]).css(style)
+
+            }, 4)
+  
+
+            if(this.init.success && typeof this.init.success === 'function'){
+                //弹窗成功的回调
+                this.init.success(this.init.$id)
+            }
+            // loading类型,回调需要自动触发
+            if(this.init.type > 3) {
+                //大于0自动触发超时关闭
+                if(this.init.timeout > 0){
+                    clearTimeout(this.timeout)
+                    this.timeout = setTimeout(function(){
+
+                        clearTimeout(_this.timeout)
+                        __layer.close(_this.init.$id)
+
+                        // 为loading类型时,自动关闭同时触发回调
+                        if(_this.init.type === 6){
+                            _this.init.yes(_this.init.$id)
+                        }
+
+                    }, this.init.timeout)
+
+                } else if(this.init.type === 6) {
+                    // loading类型, 非自动关闭时, 主动触发回调
+                    this.init.yes(this.init.$id)
+                }
+                
+            }
+
+        },
+        ready: function(conf){
+            this.init = yua.mix({}, defconf, conf)
+            if(!this.init.$id){
+                this.init.$id = uuid();
+            }
+            if(this.init.icon > 17){
+                this.icon.icon = 17
+            }
+            //base版没有iframe类型
+            if(this.init.type === 4){
+                this.icon.type = 7
+            }
+            this.cInit = {
+                $id: this.init.$id + '-c',
+                close: this.init.shadeClose ? close : yua.noop
+            };
+            return this
+        }
+    }
+
+
+    yua.directive('layer', {
+        priority: 1400,
+        init: function(binding){
+            if(!binding.param){
+                binding.element.style.display = 'none'
+            }
+        },
+        update: function(val){
+            if(!val){
+                return console.error(new Error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr) + '"]')
+            }
+
+            var _this = this,
+                init = Object.assign({}, this.element.dataset);
+
+            if(!this.param){
+                init.type = 7;
+                init.$id = '$wrap-' + val;
+                if(!init.hasOwnProperty('menubar')){
+                    init.menubar = false;
+                }
+
+                var tmp = new __constructor().ready(init);
+
+                tmp.init.content = this.element.cloneNode(true);
+
+                layerObj[tmp.init.$id] = {obj: tmp, parentElem: this.element.parentNode, wrap: this.element, show: false};
+                layerDom[tmp.init.$id] = tmp.create();
+            }else if(this.param === 'tips'){
+                var $elem = yua(this.element),
+                    ew = $elem.innerWidth(),
+                    ol = $elem.offset().left - document.body.scrollLeft,
+                    ot = $elem.offset().top - document.body.scrollTop,
+                    tipsBox = document.createElement('div'),
+                    tipsArrow = document.createElement('i'),
+                    tipsCont = document.createElement('div');
+
+
+                tipsBox.className = 'do-layer skin-def type-5'
+                tipsBox.style.left = ol + (ew * 0.7) + 'px'
+                if(init.background){
+                    tipsBox.style.background = init.background
+                    tipsArrow.style.borderTopColor = init.background
+                }
+                if(init.color){
+                    tipsBox.style.color = init.color
+                }
+                tipsCont.className = 'layer-content'
+                tipsCont.textContent = val
+                tipsArrow.className = 'arrow'
+                tipsBox.appendChild(tipsCont)
+                tipsBox.appendChild(tipsArrow)
+
+
+
+                yua(document).bind('scroll', function(){
+                    ol = $elem.offset().left - document.body.scrollLeft;
+                    ot = $elem.offset().top - document.body.scrollTop;
+
+                    tipsBox.style.left = ol + (ew * 0.7) + 'px'
+                    tipsBox.style.top = (ot - tipsBox.offsetHeight - 8) + 'px'
+                })
+
+                $elem.bind('mouseenter', function(ev){
+                    _this.element.parentNode.appendChild(tipsBox)
+                    clearTimeout(_this.showTime)
+                    clearTimeout(_this.hideTime)
+                    _this.showTime = setTimeout(function(){
+                        tipsBox.style.top = (ot - tipsBox.offsetHeight - 8) + 'px'
+                        tipsBox.classList.add('active')
+                        
+                    }, 4)
+                    
+                })
+                $elem.bind('mouseleave', function(){
+                    _this.hideTime = setTimeout(function(){
+                        clearTimeout(_this.hideTime)
+                        try{
+                            _this.element.parentNode.removeChild(tipsBox)
+                        }catch(err){}
+                    }, 150)
+                })
+            }
+        }
+    })
+
+
+
+    window.layer = __layer
+
+    return __layer
+
+})

js/lib/layer/layer-full.js

@@ -0,0 +1,578 @@
+/**
+ * 
+ * @authors yutent (yutent@doui.cc)
+ * @date    2016-09-21 01:36:29
+ *
+ */
+
+"use strict";
+
+
+define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
+
+
+    var layerDom = {},
+        layerObj = {},
+        unique = null, //储存当前打开的1/2/3类型的弹窗
+        lid = 0,
+        defconf = {
+            type: 1, // 弹窗类型
+            skin: 'def', //默认主题
+            icon: 1, //图标类型
+            background: '#fff',
+            shade: true, //遮罩
+            shadeClose: false, //遮罩点击关闭弹窗
+            radius: '0px', //弹窗圆角半径
+            area: ['auto', 'auto'],
+            title: '', //弹窗主标题(在工具栏上的)
+            menubar: true, //是否显示菜单栏
+            content: '', // 弹窗的内容
+            fixed: false, //是否固定不可拖拽
+            offset: null, //弹窗出来时的坐标, 为数组,可有4个值,依次是 上右下左
+            btns: ['确定', '取消'], //弹窗的2个按钮的文字
+            yes: close, //确定按钮对应的回调
+            no: close, //取消按钮对应的回调
+            success: null //弹窗初始化完成时的回调
+        };
+
+    function uuid(){
+        return 'layer-' + (++lid)
+    }
+
+
+    function close(id){
+        if(typeof id !== 'string' && typeof id !== 'number'){
+            return console.error(new Error('要关闭的layer实例不存在'))
+        }
+        if(/^\$wrap\-/.test(id) || layerObj['$wrap-' + id]){
+
+            try {
+                id = (layerObj['$wrap-' + id] ? '$wrap-' : '') + id;
+                //未显示过,忽略
+                if(!layerObj[id].show){
+                    return
+                }
+                layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][1])
+                unique = null
+            }catch(err){}
+        }else{
+            try {
+                document.body.removeChild(layerDom[id][1])
+                document.body.removeChild(layerDom[id][0])
+                unique = null
+            }catch(err){}
+
+            delete layerDom[id]
+            delete yua.vmodels[id]
+        }
+        
+    }
+
+    function reapeat(str, num){
+        var idx = 0,
+            result = ''
+        while(idx < num){
+            result += str
+            idx++
+        }
+        return result
+    }
+
+    function fixOffset(val){
+        if(!val && val !== 0){
+            return 'auto'
+        }else{
+            return val
+        }
+    }
+
+    var __constructor = function(conf){
+            if(conf){
+                this.ready(conf).append().show()
+            }
+        },
+        __layer = {
+            alert: function(msg, conf){
+                if(typeof conf === 'function'){
+                    conf = {yes: conf}
+                }else if(typeof conf === 'object'){
+                    conf = conf
+                }else{
+                    conf = {}
+                }
+                conf.icon = 6
+                conf.content = msg
+                return __layer.open(conf)
+            },
+            confirm: function(msg, conf){
+                if(typeof conf === 'function'){
+                    conf = {yes: conf}
+                }else if(typeof conf === 'object'){
+                    conf = conf
+                }else{
+                    conf = {}
+                }
+                conf.type = 2
+                conf.icon = 8
+                conf.content = msg
+                return __layer.open(conf)
+            },
+            msg: function(msg, conf){
+                if(typeof conf !== 'object'){
+                    var tmp = conf
+                    conf = {timeout: 2500}
+                    if(typeof tmp === 'number'){
+                        conf.icon = tmp
+                    }
+                }
+
+                if(!conf.hasOwnProperty('timeout')){
+                    conf.timeout = 2500
+                }
+
+                conf.specialMode = true;//特殊模式
+                conf.content = '<p class="msg-box">' + msg + '</p>'
+                conf.type = 7
+                conf.fixed = true
+                conf.shade = false
+                conf.menubar = false
+                conf.radius = '5px'
+                return __layer.open(conf)
+            },
+            loading: function(style, time, cb){
+                style = style >>> 0
+
+                if(typeof time === 'function'){
+                    cb = time;
+                    time = 0
+                } else{
+                    time = time >>> 0
+                    if(typeof cb !== 'function'){
+                        cb = yua.noop
+                    }
+                }
+                return __layer.open({type: 6, load: style, yes: cb, timeout: time, menubar: false, background: 'none', fixed: true})
+            },
+            tips: function(msg, elem, conf){
+                if(!(elem instanceof HTMLElement)){
+                    return console.error(new Error('tips类型必须指定一个目标容器'))
+                }
+                if(typeof conf !== 'object'){
+                    var tmp = conf
+                    conf = {timeout: 2500}
+                    if(typeof tmp === 'number'){
+                        conf.icon = tmp
+                    }
+                }
+                if(!conf.hasOwnProperty('timeout')){
+                    conf.timeout = 2500
+                }
+                if(!conf.background){
+                    conf.background = 'rgba(0,0,0,.5)'
+                }
+                if(!conf.color){
+                    conf.color = '#fff'
+                }
+                conf.$elem = elem
+                conf.content = msg
+                conf.type = 5;
+                conf.icon = 0;
+                conf.fixed = true;
+                conf.shade = false;
+                conf.menubar = false;
+                return __layer.open(conf)
+            },
+            prompt: function(msg, callback){
+                if(typeof callback !== 'function'){
+                    return console.error('argument [callback] requires a function, but ' + (typeof callback) + ' given')
+                }
+                var conf = {
+                        type: 3,
+                        icon: 7,
+                        prompt: '',
+                        title: msg,
+                        content: '<input class="prompt-value" :duplex="prompt" />',
+                        yes: function(id){
+                            callback(id, yua.vmodels[id].prompt)
+                        }
+                    }
+                return __layer.open(conf)
+            },
+            use: function(skin, callback){
+                require(['css!./skin/' + skin], callback)
+            },
+            close: close,
+            open: function(conf){
+                if(typeof conf === 'string'){
+                    conf = '$wrap-' + conf
+                    if(!layerObj[conf]){
+                        throw new Error('layer实例不存在')
+                    }else{
+                        //只能显示一个实例
+                        if(layerObj[conf].show){
+                            return
+                        }
+                        layerObj[conf].show = true
+
+                        if(!yua.vmodels[conf]){
+                            yua.define(layerObj[conf].obj.init)
+                        }
+                        
+                        yua.scan(layerDom[conf][1])
+                        layerObj[conf].obj.show()
+
+                        layerObj[conf].parentElem.appendChild(layerDom[conf][1])
+                        layerObj[conf].parentElem.replaceChild(layerDom[conf][1], layerObj[conf].wrap)
+                    }
+                }else{
+                    return new __constructor(conf).init.$id
+                }
+            },
+            version: '0.0.1-base'
+        };
+
+    /*type: { // 弹窗类型对应的id值
+        1: 'alert',
+        2: 'confirm',
+        3: 'prompt',
+        4: 'iframe',
+        5: 'tips',
+        6: 'loading',
+        7: 'msg',
+    }*/
+    __constructor.prototype = {
+        dot: { //loading的子元素数量
+            0: 4,
+            1: 9,
+            2: 2,
+            3: 3,
+            4: 2,
+            5: 5,
+            6: 5,
+            7: 5
+        },
+        timeout: null,
+        create: function(){
+            var layBox = document.createElement('div'),
+                coverBox = document.createElement('div');
+
+            coverBox.className = 'do-layer-cover type-' + this.init.type
+            // 允许点击遮罩关闭弹层时, 添加控制器
+            if(this.init.shadeClose){
+                coverBox.setAttribute(':controller', this.cInit.$id)
+                coverBox.setAttribute(':click', 'close(\'' + this.init.$id + '\')')
+            }
+            
+            layBox.className = 'do-layer skin-'
+                + this.init.skin
+                + (this.init.type === 5 && ' active' || '')
+                + ' type-'
+                + ((!this.init.specialMode && this.init.type === 7) ? 'unspecial' : this.init.type);
+
+            //暂时隐藏,避免修正定位时,能看到闪一下
+            layBox.style.visibility = 'hidden'
+            layBox.style.borderRadius = this.init.radius
+      
+            layBox.setAttribute(':controller', this.init.$id)
+
+            //没有菜单栏, 且未禁止拖拽,则加上可拖拽属性
+            if(!this.init.menubar && !this.init.fixed){
+                layBox.setAttribute(':drag', '')
+                layBox.setAttribute('data-limit', 'window')
+            }
+
+            //弹窗的宽高
+            var boxcss = ''
+            if(this.init.area[0] !== 'auto'){
+                boxcss += 'width: ' + this.init.area[0] + ';'
+            }
+            if(this.init.area[1] !== 'auto'){
+                boxcss += 'height: ' + this.init.area[1] + ';'
+            }
+
+            layBox.innerHTML = this.getMenubar()
+                + '<div class="layer-content do-fn-cl '
+                    + (this.init.icon === 0 && 'none-icon' || '')
+                    + '" style="'
+                    + boxcss
+                    + '">'
+                + this.getCont()
+                + '</div>'
+                + this.getBtns()
+                + (this.init.type === 5 && '<i class="arrow" style="border-top-color: '
+                    + this.init.background
+                    + '"></i>' || '')
+                
+            return [this.init.shade ? coverBox : null, layBox]
+        },
+        getCont: function(){
+            if(this.init.type === 6){
+                return this.getLoading(this.init.load)
+            }else{
+                return this.getIcon()
+                    + '<div class="detail" :html="content"></div>'
+            }
+        },
+        getLoading: function(style){
+            return '<div class="do-ui-load load-style-'
+                    + style
+                    + '">'
+                + '<span class="dot-box">'
+                    + reapeat('<i></i>', this.dot[style])
+                + '</span>'
+                + '</div>'
+        },
+        //获取窗口导航条
+        getMenubar: function(){
+            var html = ''
+            if(this.init.menubar){
+                html += '<div class="layer-title do-fn-noselect" ';
+                //可拖拽
+                if(!this.init.fixed){
+                    html += ':drag="do-layer" data-limit="window" '
+                }
+                
+                html += '>{{title}}'
+                    + '<a class="action-close deficon" :click="no(\'' + this.init.$id + '\')"></a>'
+                    + '</div>'
+            }
+            return html
+        },
+        //获取窗口内容的图标
+        getIcon: function(){
+            if(this.init.icon === 0){
+                return ''
+            }
+            if(this.init.type < 4 || this.init.type === 5 || this.init.specialMode){
+                return '<span class="deficon icon-' + this.init.icon + '"></span>'
+            }
+            return ''
+        },
+        // 获取窗口按钮
+        getBtns: function(){
+            if(this.init.type > 3){
+                return ''
+            }else{
+                var html = '<div class="layer-btns do-fn-noselect">';
+                if(this.init.type > 1){
+                    html += '<a href="javascript:;" class="action-no" '
+                        + ':click="no(\'' + this.init.$id + '\')" '
+                        + ':text="btns[1]"></a>'
+                    + '<a href="javascript:;" class="action-yes" '
+                        + ':click="yes(\'' + this.init.$id + '\')" '
+                        + ':text="btns[0]"></a>'
+                }else{
+                    html += '<a href="javascript:;" class="action-yes" '
+                        + ':click="yes(\'' + this.init.$id + '\')" '
+                        + ':text="btns[0]"></a>'
+                }
+                html += '</div>'
+
+                return html
+            }
+        },
+        append: function(){
+            //如果有已经打开的弹窗,则关闭
+            if(unique){
+                __layer.close(unique)
+            }
+            if(this.init.type < 4){
+                unique = this.init.$id
+            }
+            layerDom[this.init.$id] = this.create()
+            if(layerDom[this.init.$id][0]){
+                document.body.appendChild(layerDom[this.init.$id][0])
+                //仅在允许点击遮罩时,初始化控制器,减少资源消耗
+                if(this.init.shadeClose){
+                    yua.define(this.cInit)
+                    yua.scan(layerDom[this.init.$id][0])
+                }
+            }
+
+            document.body.appendChild(layerDom[this.init.$id][1])
+            yua.define(this.init)
+            yua.scan(layerDom[this.init.$id][1])
+            return this
+        },
+        show: function(){
+            var _this = this;
+            
+            setTimeout(function(){
+                var style = {visibility: '', background: _this.init.background},
+                    css = getComputedStyle(layerDom[_this.init.$id][1]);
+
+                if(_this.init.type === 5){
+                    style.color = _this.init.color
+
+                    var $elem = yua(_this.init.$elem),
+                        ew = $elem.innerWidth(),
+                        ol = $elem.offset().left - document.body.scrollLeft,
+                        ot = $elem.offset().top - document.body.scrollTop;
+
+                    style.left = ol + (ew * 0.7)
+                    style.top = ot - parseInt(css.height) - 8
+
+                }else{
+                    if(_this.init.offset){
+                        style.top = fixOffset(_this.init.offset[0])
+                        style.right = fixOffset(_this.init.offset[1])
+                        style.bottom = fixOffset(_this.init.offset[2])
+                        style.left = fixOffset(_this.init.offset[3])
+                    }else{
+                        style = yua.mix(style, {
+                            marginLeft: -parseInt(css.width) / 2,
+                            marginTop: -parseInt(css.height) / 2,
+                        })
+                    }
+                }
+                
+                yua(layerDom[_this.init.$id][1]).css(style)
+
+            }, 4)
+  
+
+            if(this.init.success && typeof this.init.success === 'function'){
+                //弹窗成功的回调
+                this.init.success(this.init.$id)
+            }
+            // loading类型,回调需要自动触发
+            if(this.init.type > 3) {
+                //大于0自动触发超时关闭
+                if(this.init.timeout > 0){
+                    clearTimeout(this.timeout)
+                    this.timeout = setTimeout(function(){
+
+                        clearTimeout(_this.timeout)
+                        __layer.close(_this.init.$id)
+
+                        // 为loading类型时,自动关闭同时触发回调
+                        if(_this.init.type === 6){
+                            _this.init.yes(_this.init.$id)
+                        }
+
+                    }, this.init.timeout)
+
+                } else if(this.init.type === 6) {
+                    // loading类型, 非自动关闭时, 主动触发回调
+                    this.init.yes(this.init.$id)
+                }
+                
+            }
+
+        },
+        ready: function(conf){
+            this.init = yua.mix({}, defconf, conf)
+            if(!this.init.$id){
+                this.init.$id = uuid();
+            }
+            if(this.init.icon > 17){
+                this.icon.icon = 17
+            }
+            //base版没有iframe类型
+            if(this.init.type === 4){
+                this.icon.type = 7
+            }
+            this.cInit = {
+                $id: this.init.$id + '-c',
+                close: this.init.shadeClose ? close : yua.noop
+            };
+            return this
+        }
+    }
+
+
+    yua.directive('layer', {
+        priority: 1400,
+        init: function(binding){
+            if(!binding.param){
+                binding.element.style.display = 'none'
+            }
+        },
+        update: function(val){
+            if(!val){
+                return console.error(new Error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr) + '"]')
+            }
+
+            var _this = this,
+                init = Object.assign({}, this.element.dataset);
+
+            if(!this.param){
+                init.type = 7;
+                init.$id = '$wrap-' + val;
+                if(!init.hasOwnProperty('menubar')){
+                    init.menubar = false;
+                }
+
+                var tmp = new __constructor().ready(init);
+
+                tmp.init.content = this.element.cloneNode(true);
+
+                layerObj[tmp.init.$id] = {obj: tmp, parentElem: this.element.parentNode, wrap: this.element, show: false};
+                layerDom[tmp.init.$id] = tmp.create();
+            }else if(this.param === 'tips'){
+                var $elem = yua(this.element),
+                    ew = $elem.innerWidth(),
+                    ol = $elem.offset().left - document.body.scrollLeft,
+                    ot = $elem.offset().top - document.body.scrollTop,
+                    tipsBox = document.createElement('div'),
+                    tipsArrow = document.createElement('i'),
+                    tipsCont = document.createElement('div');
+
+
+                tipsBox.className = 'do-layer skin-def type-5'
+                tipsBox.style.left = ol + (ew * 0.7) + 'px'
+                if(init.background){
+                    tipsBox.style.background = init.background
+                    tipsArrow.style.borderTopColor = init.background
+                }
+                if(init.color){
+                    tipsBox.style.color = init.color
+                }
+                tipsCont.className = 'layer-content'
+                tipsCont.textContent = val
+                tipsArrow.className = 'arrow'
+                tipsBox.appendChild(tipsCont)
+                tipsBox.appendChild(tipsArrow)
+
+
+
+                yua(document).bind('scroll', function(){
+                    ol = $elem.offset().left - document.body.scrollLeft;
+                    ot = $elem.offset().top - document.body.scrollTop;
+
+                    tipsBox.style.left = ol + (ew * 0.7) + 'px'
+                    tipsBox.style.top = (ot - tipsBox.offsetHeight - 8) + 'px'
+                })
+
+                $elem.bind('mouseenter', function(ev){
+                    _this.element.parentNode.appendChild(tipsBox)
+                    clearTimeout(_this.showTime)
+                    clearTimeout(_this.hideTime)
+                    _this.showTime = setTimeout(function(){
+                        tipsBox.style.top = (ot - tipsBox.offsetHeight - 8) + 'px'
+                        tipsBox.classList.add('active')
+                        
+                    }, 4)
+                    
+                })
+                $elem.bind('mouseleave', function(){
+                    _this.hideTime = setTimeout(function(){
+                        clearTimeout(_this.hideTime)
+                        try{
+                            _this.element.parentNode.removeChild(tipsBox)
+                        }catch(err){}
+                    }, 150)
+                })
+            }
+        }
+    })
+
+
+
+    if(!window.layer)
+        window.layer = __layer
+
+
+    return __layer
+
+})

js/lib/layer/layer-mobile.js

@@ -0,0 +1,578 @@
+/**
+ * 
+ * @authors yutent (yutent@doui.cc)
+ * @date    2016-09-21 01:36:29
+ *
+ */
+
+"use strict";
+
+
+define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
+
+
+    var layerDom = {},
+        layerObj = {},
+        unique = null, //储存当前打开的1/2/3类型的弹窗
+        lid = 0,
+        defconf = {
+            type: 1, // 弹窗类型
+            skin: 'def', //默认主题
+            icon: 1, //图标类型
+            background: '#fff',
+            shade: true, //遮罩
+            shadeClose: false, //遮罩点击关闭弹窗
+            radius: '0px', //弹窗圆角半径
+            area: ['auto', 'auto'],
+            title: '', //弹窗主标题(在工具栏上的)
+            menubar: true, //是否显示菜单栏
+            content: '', // 弹窗的内容
+            fixed: false, //是否固定不可拖拽
+            offset: null, //弹窗出来时的坐标, 为数组,可有4个值,依次是 上右下左
+            btns: ['确定', '取消'], //弹窗的2个按钮的文字
+            yes: close, //确定按钮对应的回调
+            no: close, //取消按钮对应的回调
+            success: null //弹窗初始化完成时的回调
+        };
+
+    function uuid(){
+        return 'layer-' + (++lid)
+    }
+
+
+    function close(id){
+        if(typeof id !== 'string' && typeof id !== 'number'){
+            return console.error(new Error('要关闭的layer实例不存在'))
+        }
+        if(/^\$wrap\-/.test(id) || layerObj['$wrap-' + id]){
+
+            try {
+                id = (layerObj['$wrap-' + id] ? '$wrap-' : '') + id;
+                //未显示过,忽略
+                if(!layerObj[id].show){
+                    return
+                }
+                layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][1])
+                unique = null
+            }catch(err){}
+        }else{
+            try {
+                document.body.removeChild(layerDom[id][1])
+                document.body.removeChild(layerDom[id][0])
+                unique = null
+            }catch(err){}
+
+            delete layerDom[id]
+            delete yua.vmodels[id]
+        }
+        
+    }
+
+    function reapeat(str, num){
+        var idx = 0,
+            result = ''
+        while(idx < num){
+            result += str
+            idx++
+        }
+        return result
+    }
+
+    function fixOffset(val){
+        if(!val && val !== 0){
+            return 'auto'
+        }else{
+            return val
+        }
+    }
+
+    var __constructor = function(conf){
+            if(conf){
+                this.ready(conf).append().show()
+            }
+        },
+        __layer = {
+            alert: function(msg, conf){
+                if(typeof conf === 'function'){
+                    conf = {yes: conf}
+                }else if(typeof conf === 'object'){
+                    conf = conf
+                }else{
+                    conf = {}
+                }
+                conf.icon = 6
+                conf.content = msg
+                return __layer.open(conf)
+            },
+            confirm: function(msg, conf){
+                if(typeof conf === 'function'){
+                    conf = {yes: conf}
+                }else if(typeof conf === 'object'){
+                    conf = conf
+                }else{
+                    conf = {}
+                }
+                conf.type = 2
+                conf.icon = 8
+                conf.content = msg
+                return __layer.open(conf)
+            },
+            msg: function(msg, conf){
+                if(typeof conf !== 'object'){
+                    var tmp = conf
+                    conf = {timeout: 2500}
+                    if(typeof tmp === 'number'){
+                        conf.icon = tmp
+                    }
+                }
+
+                if(!conf.hasOwnProperty('timeout')){
+                    conf.timeout = 2500
+                }
+
+                conf.specialMode = true;//特殊模式
+                conf.content = '<p class="msg-box">' + msg + '</p>'
+                conf.type = 7
+                conf.fixed = true
+                conf.shade = false
+                conf.menubar = false
+                conf.radius = '5px'
+                return __layer.open(conf)
+            },
+            loading: function(style, time, cb){
+                style = style >>> 0
+
+                if(typeof time === 'function'){
+                    cb = time;
+                    time = 0
+                } else{
+                    time = time >>> 0
+                    if(typeof cb !== 'function'){
+                        cb = yua.noop
+                    }
+                }
+                return __layer.open({type: 6, load: style, yes: cb, timeout: time, menubar: false, background: 'none', fixed: true})
+            },
+            tips: function(msg, elem, conf){
+                if(!(elem instanceof HTMLElement)){
+                    return console.error(new Error('tips类型必须指定一个目标容器'))
+                }
+                if(typeof conf !== 'object'){
+                    var tmp = conf
+                    conf = {timeout: 2500}
+                    if(typeof tmp === 'number'){
+                        conf.icon = tmp
+                    }
+                }
+                if(!conf.hasOwnProperty('timeout')){
+                    conf.timeout = 2500
+                }
+                if(!conf.background){
+                    conf.background = 'rgba(0,0,0,.5)'
+                }
+                if(!conf.color){
+                    conf.color = '#fff'
+                }
+                conf.$elem = elem
+                conf.content = msg
+                conf.type = 5;
+                conf.icon = 0;
+                conf.fixed = true;
+                conf.shade = false;
+                conf.menubar = false;
+                return __layer.open(conf)
+            },
+            prompt: function(msg, callback){
+                if(typeof callback !== 'function'){
+                    return console.error('argument [callback] requires a function, but ' + (typeof callback) + ' given')
+                }
+                var conf = {
+                        type: 3,
+                        icon: 7,
+                        prompt: '',
+                        title: msg,
+                        content: '<input class="prompt-value" :duplex="prompt" />',
+                        yes: function(id){
+                            callback(id, yua.vmodels[id].prompt)
+                        }
+                    }
+                return __layer.open(conf)
+            },
+            use: function(skin, callback){
+                require(['css!./skin/' + skin], callback)
+            },
+            close: close,
+            open: function(conf){
+                if(typeof conf === 'string'){
+                    conf = '$wrap-' + conf
+                    if(!layerObj[conf]){
+                        throw new Error('layer实例不存在')
+                    }else{
+                        //只能显示一个实例
+                        if(layerObj[conf].show){
+                            return
+                        }
+                        layerObj[conf].show = true
+
+                        if(!yua.vmodels[conf]){
+                            yua.define(layerObj[conf].obj.init)
+                        }
+                        
+                        yua.scan(layerDom[conf][1])
+                        layerObj[conf].obj.show()
+
+                        layerObj[conf].parentElem.appendChild(layerDom[conf][1])
+                        layerObj[conf].parentElem.replaceChild(layerDom[conf][1], layerObj[conf].wrap)
+                    }
+                }else{
+                    return new __constructor(conf).init.$id
+                }
+            },
+            version: '0.0.1-base'
+        };
+
+    /*type: { // 弹窗类型对应的id值
+        1: 'alert',
+        2: 'confirm',
+        3: 'prompt',
+        4: 'iframe',
+        5: 'tips',
+        6: 'loading',
+        7: 'msg',
+    }*/
+    __constructor.prototype = {
+        dot: { //loading的子元素数量
+            0: 4,
+            1: 9,
+            2: 2,
+            3: 3,
+            4: 2,
+            5: 5,
+            6: 5,
+            7: 5
+        },
+        timeout: null,
+        create: function(){
+            var layBox = document.createElement('div'),
+                coverBox = document.createElement('div');
+
+            coverBox.className = 'do-layer-cover type-' + this.init.type
+            // 允许点击遮罩关闭弹层时, 添加控制器
+            if(this.init.shadeClose){
+                coverBox.setAttribute(':controller', this.cInit.$id)
+                coverBox.setAttribute(':click', 'close(\'' + this.init.$id + '\')')
+            }
+            
+            layBox.className = 'do-layer skin-'
+                + this.init.skin
+                + (this.init.type === 5 && ' active' || '')
+                + ' type-'
+                + ((!this.init.specialMode && this.init.type === 7) ? 'unspecial' : this.init.type);
+
+            //暂时隐藏,避免修正定位时,能看到闪一下
+            layBox.style.visibility = 'hidden'
+            layBox.style.borderRadius = this.init.radius
+      
+            layBox.setAttribute(':controller', this.init.$id)
+
+            //没有菜单栏, 且未禁止拖拽,则加上可拖拽属性
+            if(!this.init.menubar && !this.init.fixed){
+                layBox.setAttribute(':drag', '')
+                layBox.setAttribute('data-limit', 'window')
+            }
+
+            //弹窗的宽高
+            var boxcss = ''
+            if(this.init.area[0] !== 'auto'){
+                boxcss += 'width: ' + this.init.area[0] + ';'
+            }
+            if(this.init.area[1] !== 'auto'){
+                boxcss += 'height: ' + this.init.area[1] + ';'
+            }
+
+            layBox.innerHTML = this.getMenubar()
+                + '<div class="layer-content do-fn-cl '
+                    + (this.init.icon === 0 && 'none-icon' || '')
+                    + '" style="'
+                    + boxcss
+                    + '">'
+                + this.getCont()
+                + '</div>'
+                + this.getBtns()
+                + (this.init.type === 5 && '<i class="arrow" style="border-top-color: '
+                    + this.init.background
+                    + '"></i>' || '')
+                
+            return [this.init.shade ? coverBox : null, layBox]
+        },
+        getCont: function(){
+            if(this.init.type === 6){
+                return this.getLoading(this.init.load)
+            }else{
+                return this.getIcon()
+                    + '<div class="detail" :html="content"></div>'
+            }
+        },
+        getLoading: function(style){
+            return '<div class="do-ui-load load-style-'
+                    + style
+                    + '">'
+                + '<span class="dot-box">'
+                    + reapeat('<i></i>', this.dot[style])
+                + '</span>'
+                + '</div>'
+        },
+        //获取窗口导航条
+        getMenubar: function(){
+            var html = ''
+            if(this.init.menubar){
+                html += '<div class="layer-title do-fn-noselect" ';
+                //可拖拽
+                if(!this.init.fixed){
+                    html += ':drag="do-layer" data-limit="window" '
+                }
+                
+                html += '>{{title}}'
+                    + '<a class="action-close deficon" :click="no(\'' + this.init.$id + '\')"></a>'
+                    + '</div>'
+            }
+            return html
+        },
+        //获取窗口内容的图标
+        getIcon: function(){
+            if(this.init.icon === 0){
+                return ''
+            }
+            if(this.init.type < 4 || this.init.type === 5 || this.init.specialMode){
+                return '<span class="deficon icon-' + this.init.icon + '"></span>'
+            }
+            return ''
+        },
+        // 获取窗口按钮
+        getBtns: function(){
+            if(this.init.type > 3){
+                return ''
+            }else{
+                var html = '<div class="layer-btns do-fn-noselect">';
+                if(this.init.type > 1){
+                    html += '<a href="javascript:;" class="action-no" '
+                        + ':click="no(\'' + this.init.$id + '\')" '
+                        + ':text="btns[1]"></a>'
+                    + '<a href="javascript:;" class="action-yes" '
+                        + ':click="yes(\'' + this.init.$id + '\')" '
+                        + ':text="btns[0]"></a>'
+                }else{
+                    html += '<a href="javascript:;" class="action-yes" '
+                        + ':click="yes(\'' + this.init.$id + '\')" '
+                        + ':text="btns[0]"></a>'
+                }
+                html += '</div>'
+
+                return html
+            }
+        },
+        append: function(){
+            //如果有已经打开的弹窗,则关闭
+            if(unique){
+                __layer.close(unique)
+            }
+            if(this.init.type < 4){
+                unique = this.init.$id
+            }
+            layerDom[this.init.$id] = this.create()
+            if(layerDom[this.init.$id][0]){
+                document.body.appendChild(layerDom[this.init.$id][0])
+                //仅在允许点击遮罩时,初始化控制器,减少资源消耗
+                if(this.init.shadeClose){
+                    yua.define(this.cInit)
+                    yua.scan(layerDom[this.init.$id][0])
+                }
+            }
+
+            document.body.appendChild(layerDom[this.init.$id][1])
+            yua.define(this.init)
+            yua.scan(layerDom[this.init.$id][1])
+            return this
+        },
+        show: function(){
+            var _this = this;
+            
+            setTimeout(function(){
+                var style = {visibility: '', background: _this.init.background},
+                    css = getComputedStyle(layerDom[_this.init.$id][1]);
+
+                if(_this.init.type === 5){
+                    style.color = _this.init.color
+
+                    var $elem = yua(_this.init.$elem),
+                        ew = $elem.innerWidth(),
+                        ol = $elem.offset().left - document.body.scrollLeft,
+                        ot = $elem.offset().top - document.body.scrollTop;
+
+                    style.left = ol + (ew * 0.7)
+                    style.top = ot - parseInt(css.height) - 8
+
+                }else{
+                    if(_this.init.offset){
+                        style.top = fixOffset(_this.init.offset[0])
+                        style.right = fixOffset(_this.init.offset[1])
+                        style.bottom = fixOffset(_this.init.offset[2])
+                        style.left = fixOffset(_this.init.offset[3])
+                    }else{
+                        style = yua.mix(style, {
+                            marginLeft: -parseInt(css.width) / 2,
+                            marginTop: -parseInt(css.height) / 2,
+                        })
+                    }
+                }
+                
+                yua(layerDom[_this.init.$id][1]).css(style)
+
+            }, 4)
+  
+
+            if(this.init.success && typeof this.init.success === 'function'){
+                //弹窗成功的回调
+                this.init.success(this.init.$id)
+            }
+            // loading类型,回调需要自动触发
+            if(this.init.type > 3) {
+                //大于0自动触发超时关闭
+                if(this.init.timeout > 0){
+                    clearTimeout(this.timeout)
+                    this.timeout = setTimeout(function(){
+
+                        clearTimeout(_this.timeout)
+                        __layer.close(_this.init.$id)
+
+                        // 为loading类型时,自动关闭同时触发回调
+                        if(_this.init.type === 6){
+                            _this.init.yes(_this.init.$id)
+                        }
+
+                    }, this.init.timeout)
+
+                } else if(this.init.type === 6) {
+                    // loading类型, 非自动关闭时, 主动触发回调
+                    this.init.yes(this.init.$id)
+                }
+                
+            }
+
+        },
+        ready: function(conf){
+            this.init = yua.mix({}, defconf, conf)
+            if(!this.init.$id){
+                this.init.$id = uuid();
+            }
+            if(this.init.icon > 17){
+                this.icon.icon = 17
+            }
+            //base版没有iframe类型
+            if(this.init.type === 4){
+                this.icon.type = 7
+            }
+            this.cInit = {
+                $id: this.init.$id + '-c',
+                close: this.init.shadeClose ? close : yua.noop
+            };
+            return this
+        }
+    }
+
+
+    yua.directive('layer', {
+        priority: 1400,
+        init: function(binding){
+            if(!binding.param){
+                binding.element.style.display = 'none'
+            }
+        },
+        update: function(val){
+            if(!val){
+                return console.error(new Error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr) + '"]')
+            }
+
+            var _this = this,
+                init = Object.assign({}, this.element.dataset);
+
+            if(!this.param){
+                init.type = 7;
+                init.$id = '$wrap-' + val;
+                if(!init.hasOwnProperty('menubar')){
+                    init.menubar = false;
+                }
+
+                var tmp = new __constructor().ready(init);
+
+                tmp.init.content = this.element.cloneNode(true);
+
+                layerObj[tmp.init.$id] = {obj: tmp, parentElem: this.element.parentNode, wrap: this.element, show: false};
+                layerDom[tmp.init.$id] = tmp.create();
+            }else if(this.param === 'tips'){
+                var $elem = yua(this.element),
+                    ew = $elem.innerWidth(),
+                    ol = $elem.offset().left - document.body.scrollLeft,
+                    ot = $elem.offset().top - document.body.scrollTop,
+                    tipsBox = document.createElement('div'),
+                    tipsArrow = document.createElement('i'),
+                    tipsCont = document.createElement('div');
+
+
+                tipsBox.className = 'do-layer skin-def type-5'
+                tipsBox.style.left = ol + (ew * 0.7) + 'px'
+                if(init.background){
+                    tipsBox.style.background = init.background
+                    tipsArrow.style.borderTopColor = init.background
+                }
+                if(init.color){
+                    tipsBox.style.color = init.color
+                }
+                tipsCont.className = 'layer-content'
+                tipsCont.textContent = val
+                tipsArrow.className = 'arrow'
+                tipsBox.appendChild(tipsCont)
+                tipsBox.appendChild(tipsArrow)
+
+
+
+                yua(document).bind('scroll', function(){
+                    ol = $elem.offset().left - document.body.scrollLeft;
+                    ot = $elem.offset().top - document.body.scrollTop;
+
+                    tipsBox.style.left = ol + (ew * 0.7) + 'px'
+                    tipsBox.style.top = (ot - tipsBox.offsetHeight - 8) + 'px'
+                })
+
+                $elem.bind('mouseenter', function(ev){
+                    _this.element.parentNode.appendChild(tipsBox)
+                    clearTimeout(_this.showTime)
+                    clearTimeout(_this.hideTime)
+                    _this.showTime = setTimeout(function(){
+                        tipsBox.style.top = (ot - tipsBox.offsetHeight - 8) + 'px'
+                        tipsBox.classList.add('active')
+                        
+                    }, 4)
+                    
+                })
+                $elem.bind('mouseleave', function(){
+                    _this.hideTime = setTimeout(function(){
+                        clearTimeout(_this.hideTime)
+                        try{
+                            _this.element.parentNode.removeChild(tipsBox)
+                        }catch(err){}
+                    }, 150)
+                })
+            }
+        }
+    })
+
+
+
+    if(!window.layer)
+        window.layer = __layer
+
+
+    return __layer
+
+})

js/lib/layer/layer.js

@@ -1,135 +0,0 @@
-/**
- * 
- * @authors yutent (yutent@doui.cc)
- * @date    2016-09-21 01:36:29
- *
- */
-
-"use strict";
-
-
-define(['avalon', 'css!./skin/def'], function(av){
-
-    
-
-    var prep = {
-            type: {
-                1: 'alert',
-                2: 'confirm',
-                3: 'msg',
-                4: 'loading',
-                5: 'iframe',
-                6: 'tips',
-                7: 'prompt'
-            },
-            init: {
-                type: 1,
-                shade: true,
-                shadeClose: false,
-                move: '.do-ui-layer-move',
-                title: '温馨提示',
-                content: '',
-                offset: {x: '300px', y: '200px'},
-                btns: ['确定', '取消'],
-                yes: av.noop,
-                no: av.noop,
-                success: av.noop
-            }
-        }
-
-    function uuid(type){
-        type = type || 1
-        return prep.type[type] + Math.round(Date.now()/1000).toString(16) + Math.random().toString(16).slice(2, 6)
-    }
-
-
-
-    var layer = {
-            alert: function(msg, conf){
-                conf = conf || {}
-                return layer.open(av.mix({content: msg}, conf))
-            },
-            confirm: function(msg, conf){
-                conf = conf || {}
-                return layer.open(av.mix({content: msg}, conf))
-            },
-            msg: function(msg, conf){
-                av.log(msg)
-            },
-            loading: function(msg, conf){
-                av.log(msg)
-            },
-            iframe: function(url, conf){
-                av.log(url)
-            },
-            tips: function(msg, conf){
-                av.log(msg)
-            },
-            prompt: function(callback){
-                av.log('23456')
-            },
-            use: function(conf, callback){
-                require(['css!./skin/' + conf.skin], callback)
-            }
-        }
-
-
-        var FN = function(conf){
-                this.ready(conf)
-            }
-
-
-        FN.prototype = {
-            init: {},
-            create: function(){
-                var layBox = document.createElement('div')
-                layBox.className = 'do-ui-layer skin-def'
-                layBox.style.left = this.init.offset.x
-                layBox.style.top = this.init.offset.y
-                layBox.setAttribute('ms-controller', this.init.$id)
-                layBox.innerHTML = '<div class="layer-title">{{title}}<a class="layer-min deficon"></a><a class="layer-close deficon"></a></div>' + 
-                '<div class="layer-content">' +
-                '<span class="deficon icon-1"></span>' +
-                '<div class="detail" ms-html="content"></div>' + 
-                '</div>' + 
-                '<div class="layer-btns">' + 
-                    '<a href="javascript:;" class="layer-yes" ms-text="btns[0]"></a>' + 
-                    '<a href="javascript:;" class="layer-no" ms-text="btns[1]"></a>' + 
-                '</div>'
-                return layBox
-            },
-            show: function(){
-
-                var layBox = this.create()
-                document.body.appendChild(layBox)
-                
-                av.define(this.init)
-                av.scan(layBox)
-            },
-            ready: function(conf){
-                this.init = av.mix({$id: uuid()}, prep.init, conf)
-                this.show()
-            },
-            close: function(){
-
-            }
-        }
-
-
-
-
-        layer.open = function(conf){
-            av.log(conf)
-            return new FN(conf).init
-        }
-
-
-    if(!window.layer)
-        window.layer = layer
-
-
-
-    return layer
-
-
-})

js/lib/layer/skin/def.css

@@ -6,44 +6,229 @@
  * 
  */
 
-.do-ui-layer, .do-ui-layer * {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
+.do-fn-cl { *zoom: 1; }
-.do-ui-layer a {text-decoration:none;}
+.do-fn-cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;} 
+.do-layer, .do-layer * {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
+.do-layer a {text-decoration:none;}
 
 @font-face {font-family: "deficon";
-  src: url('def.eot?t=1474609176'); /* IE9*/
+  src: url('def.eot'); /* IE9*/
-  src: url('def.woff?t=1474609176') format('woff'), /* chrome, firefox */
+  src: url('def.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('def.ttf?t=1474609176') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 }
 
-.do-ui-layer-shade {position:fixed;left:0;top:0;z-index:65534;width:100%;height:100%;background:rgba(255,255,255,.05);}
+.do-layer-cover {position:fixed;left:0;top:0;z-index:65534;width:100%;height:100%;background:rgba(255,255,255,.05);}
-.do-ui-layer {position:fixed;left:50%;top:230px;z-index:65535;width:auto;height:auto;}
+.do-layer {position:fixed;left:50%;top:50%;z-index:65535;width:auto;height:auto;}
+.do-layer:active {z-index:65536;}
 
 
-.do-ui-layer.skin-def {min-width:300px;background:#fff;color:#666;font-size:13px;box-shadow:0 0 10px rgba(0,0,0,.3);}
+/*默认皮肤样式*/
-.do-ui-layer.skin-def .deficon {display: inline-block;font-family:"deficon" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
+.do-layer.skin-def {color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,.3);}
-.do-ui-layer.skin-def .icon-1:before {content:"\e605";color:#11b330;}
+.do-layer.skin-def .deficon {display: inline-block;font-family:"deficon" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
-.do-ui-layer.skin-def .icon-2:before {content:"\e602";color:#f30;}
+.do-layer.skin-def .icon-1:before {content:"\e6f1";color:#11b330;}/*discover*/
-.do-ui-layer.skin-def .icon-3:before {content:"\e603";color:#f30;}
+.do-layer.skin-def .icon-2:before {content:"\e6fa";color:#f30;}/*position*/
-.do-ui-layer.skin-def .icon-4:before {content:"\e604";color:#f30;}
+.do-layer.skin-def .icon-3:before {content:"\e6f0";color:#f30;}/*del*/
-.do-ui-layer.skin-def .icon-5:before {content:"\e608";color:#09f;}
+.do-layer.skin-def .icon-4:before {content:"\e604";color:#f30;}/*fire*/
-.do-ui-layer.skin-def .icon-6:before {content:"\e609";color:#ee0}
+.do-layer.skin-def .icon-5:before {content:"\e6f9";color:#09f;}/*pilot*/
-.do-ui-layer.skin-def .icon-7:before {content:"\e60a";color:#63e2c2}
+.do-layer.skin-def .icon-6:before {content:"\e700";color:#f7b824}/*message*/
-.do-ui-layer.skin-def .icon-8:before {content:"\e606";color:#ee0}
+.do-layer.skin-def .icon-7:before {content:"\e6fc";color:#63e2c2}/*talk*/
-.do-ui-layer.skin-def .icon-9:before {content:"\e607";color:#f30;}
+.do-layer.skin-def .icon-8:before {content:"\e6f6";color:#f7b824}/*warn*/
+.do-layer.skin-def .icon-9:before {content:"\e6fb";color:#f60;}/*star*/
+.do-layer.skin-def .icon-10:before {content:"\e6f8";color:#48d0f7;}/*happy*/
+.do-layer.skin-def .icon-11:before {content:"\e6fd";color:#f90;}/*sad*/
+.do-layer.skin-def .icon-12:before {content:"\e631";color:#09a;}/*share*/
+.do-layer.skin-def .icon-13:before {content:"\e6f3";color:#f60;}/*search*/
+.do-layer.skin-def .icon-14:before {content:"\e6f4";color:#09a;}/*user*/
+.do-layer.skin-def .icon-15:before {content:"\e701";color:#f30;}/*minus*/
+.do-layer.skin-def .icon-16:before {content:"\e703";color:#f7b824;}/*wait*/
+.do-layer.skin-def .icon-17:before {content:"\e704";color:#11b330;}/*right*/
 
 
 
-.do-ui-layer.skin-def .layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:#f3f3f3;font-size:14px;color:#454545;}
+.do-layer.skin-def .layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:#f3f3f3;font-size:14px;color:#454545;}
-.do-ui-layer.skin-def .layer-min,.do-ui-layer.skin-def .layer-close {position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;}
+.do-layer.skin-def .action-min,.do-layer.skin-def .action-close {position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:#666;}
-.do-ui-layer.skin-def .layer-min {right:40px;}
+.do-layer.skin-def .action-min {right:40px;}
-.do-ui-layer.skin-def .layer-close {right:10px;}
+.do-layer.skin-def .action-close {right:10px;}
-.do-ui-layer.skin-def .layer-close:hover,.do-ui-layer.skin-def .layer-min:hover {border: 1px solid #ddd;line-height: 18px;}
+.do-layer.skin-def .action-close:hover,.do-layer.skin-def .action-min:hover {border: 1px solid #ddd;line-height: 18px;color:#049789;}
-.do-ui-layer.skin-def .layer-min:before {content:"\e600";}
+.do-layer.skin-def .action-min:before {content:"\e600";}
-.do-ui-layer.skin-def .layer-close:before {content:"\e601";}
+.do-layer.skin-def .action-close:before {content:"\e659";}
 
-.do-ui-layer.skin-def .layer-content {width:100%;height:auto;min-height:100px;padding:10px;}
+.do-layer.skin-def .layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;}
-.do-ui-layer.skin-def .layer-content .deficon {float:left;width:60px;height:100%;line-height:50px;font-size:40px;text-align:center;}
+.do-layer.skin-def .layer-content .deficon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:40px;text-align:center;}
-.do-ui-layer.skin-def .layer-content .detail {float:left;width:auto;height:100%;margin-top:10px;padding:5px 15px;word-break:break-all;word-wrap: break-word;}
+.do-layer.skin-def .layer-content .detail {width:auto;height:100%;margin:auto auto auto 60px;padding:5px 15px;word-break:break-all;word-wrap: break-word;}
+.do-layer.skin-def .layer-content.none-icon .detail {margin:0 auto;}
+.do-layer.skin-def .layer-content .detail .prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;}
+.do-layer.skin-def .layer-content .detail .msg-box {line-height:30px;}
+
+
+.do-layer.skin-def .layer-btns {width:100%;height:40px;padding:0 5px;line-height:28px;font-size:14px;color:#454545;text-align:right;}
+.do-layer.skin-def .layer-btns a {display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;line-height:28px;border:1px solid #ddd;color:#454545;text-align:center;background:#f3f3f3;}
+
+.do-layer.type-5 {visibility:hidden;min-width:75px;max-width:600px;line-height:1.5;color:#fff;background:rgba(0,0,0,.5);opacity:0;box-shadow:none;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;}
+.do-layer.type-5.active {visibility:visible;opacity:1;}
+.do-layer.type-5 i.arrow {position:absolute;left:5px;bottom:-14px;width:0;height:0;border:6px solid transparent;border-top:8px solid rgba(0,0,0,.5);content: ""}
+.do-layer.type-5 .layer-content .detail {margin:0;padding:0}
+
+
+/******** 额外的弹窗类型样式 ******/
+.do-layer.type-1,.do-layer.type-2,.do-layer.type-3 {max-width:600px;min-width:230px;}
+.do-layer.type-1 .layer-content,.do-layer.type-2 .layer-content,.do-layer.type-3 .layer-content{max-width:600px;}
+
+/*loading类型,背景色要去掉, 并且遮罩颜色改为黑色半透明*/
+.do-layer.type-6 {box-shadow:none;background:transparent;}
+.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 .layer-content {min-height:60px;padding:0}
+.do-layer.type-unspecial .layer-content .detail {margin:0;padding:0}
+
+/*--------几种loading动画-------*/
+.do-ui-load {position:relative;width:100px;height:100px;margin:auto;}
+
+/* style 0 */
+.do-ui-load.load-style-0 .dot-box {position:absolute;display:block;width:70%;height:70%;margin:15%;-webkit-animation: circle 2s infinite linear;animation: circle 2s infinite linear;}
+.do-ui-load.load-style-0 .dot-box i {position:absolute;display:block;width:40%;height:40%;border-radius:50%;background:#03998c;-webkit-animation: fadein 2s infinite linear;animation: fadein 2s infinite linear;-webkit-transform: scale(.5);transform: scale(.5);opacity:.3}
+.do-ui-load.load-style-0 .dot-box i:nth-child(1) {left:2.5%;top:2.5%;}
+.do-ui-load.load-style-0 .dot-box i:nth-child(2) {right:2.5%;top:2.5%;-webkit-animation-delay:.4s;animation-delay:.4s;}
+.do-ui-load.load-style-0 .dot-box i:nth-child(3) {left:2.5%;bottom:2.5%;-webkit-animation-delay:.8s;animation-delay:.8s;}
+.do-ui-load.load-style-0 .dot-box i:nth-child(4) {right:2.5%;bottom:2.5%;-webkit-animation-delay:1.2s;animation-delay:1.2s;}
+
+/* style 1 */
+.do-ui-load.load-style-1 .dot-box {position:absolute;display:block;width:90%;height:90%;margin:5%;}
+.do-ui-load.load-style-1 .dot-box i {float:left;display:block;width:30px;height:30px;background:#03998c;-webkit-animation: grid 1.5s infinite linear;animation: grid 1.5s infinite linear;}
+.do-ui-load.load-style-1 .dot-box i:nth-child(4),
+.do-ui-load.load-style-1 .dot-box i:nth-child(8) {-webkit-animation-delay:.2s;animation-delay:.2s;}
+.do-ui-load.load-style-1 .dot-box i:nth-child(1),
+.do-ui-load.load-style-1 .dot-box i:nth-child(5),
+.do-ui-load.load-style-1 .dot-box i:nth-child(9) {-webkit-animation-delay:.3s;animation-delay:.3s;}
+
+.do-ui-load.load-style-1 .dot-box i:nth-child(2),
+.do-ui-load.load-style-1 .dot-box i:nth-child(6) {-webkit-animation-delay:.4s;animation-delay:.4s;}
+
+.do-ui-load.load-style-1 .dot-box i:nth-child(3) {-webkit-animation-delay:.5s;animation-delay:.5s;}
+
+
+/* style 2 */
+.do-ui-load.load-style-2 .dot-box {position:absolute;display:block;width:90%;height:90%;margin:5%;-webkit-animation: circle 2s infinite linear;animation: circle 2s infinite linear;}
+.do-ui-load.load-style-2 .dot-box i {position:absolute;display:block;width:40px;height:40px;background:#03998c;border-radius:50%;-webkit-animation: bounce 1.5s infinite linear;animation: bounce 1.5s infinite linear;-webkit-transform: scale(.1);transform: scale(.1);}
+.do-ui-load.load-style-2 .dot-box i:nth-child(1) {left:5px;top:0;}
+.do-ui-load.load-style-2 .dot-box i:nth-child(2) {right:5px;top:0;-webkit-animation-delay:.5s;animation-delay:.5s;}
+
+
+/* style 3 */
+.do-ui-load.load-style-3 .dot-box {position:absolute;display:block;width:100%;height:100%;}
+.do-ui-load.load-style-3 .dot-box i {position:absolute;display:block;width:100%;height:100%;border-top:5px solid #ff0;border-radius:50%;-webkit-animation: circle .9s infinite ease-in-out;animation: circle .9s infinite ease-in-out;}
+.do-ui-load.load-style-3 .dot-box i:nth-child(1) {border-color:#03998c;}
+.do-ui-load.load-style-3 .dot-box i:nth-child(2) {border-color:#f30;-webkit-animation-delay:.3s;animation-delay:.3s;}
+.do-ui-load.load-style-3 .dot-box i:nth-child(3) {-webkit-animation-delay:.6s;animation-delay:.6s;}
+
+
+/* style 4 */
+.do-ui-load.load-style-4 .dot-box {position:absolute;display:block;width:100%;height:100%;-webkit-animation: circle 1s infinite linear;animation: circle 1s infinite linear;}
+.do-ui-load.load-style-4 .dot-box i {position:absolute;display:block;width:100%;height:100%;border-radius:50%;}
+.do-ui-load.load-style-4 .dot-box i:nth-child(1) {border-top: 50px solid #fff;}
+.do-ui-load.load-style-4 .dot-box i:nth-child(2) {border-bottom: 50px solid #000;}
+.do-ui-load.load-style-4 .dot-box i:nth-child(1)::before {position:absolute;top:-50%;width:50%;height:50%;border-top: 25px solid #000;border-radius:50%;content:""}
+.do-ui-load.load-style-4 .dot-box i:nth-child(1)::after {position:absolute;top:-20%;left:20%;width:10px;height:10px;border-radius:50%;background:#fff;content:""}
+.do-ui-load.load-style-4 .dot-box i:nth-child(2)::before {position:absolute;bottom:-50%;right:0;width:50%;height:50%;border-bottom: 25px solid #fff;border-radius:50%;content:""}
+.do-ui-load.load-style-4 .dot-box i:nth-child(2)::after {position:absolute;bottom:-20%;right:20%;width:10px;height:10px;border-radius:50%;background:#000;content:""}
+
+
+/* style 5 */
+.do-ui-load.load-style-5 {width:100px;height:50px;}
+.do-ui-load.load-style-5 .dot-box {position:absolute;display:block;width:100%;height:100%;}
+.do-ui-load.load-style-5 .dot-box i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:#03998c;-webkit-animation: bounce2 1s infinite ease-in-out;animation: bounce2 1s infinite ease-in-out;-webkit-transform:scaleY(.6);transform:scaleY(.6);}
+.do-ui-load.load-style-5 .dot-box i:nth-child(2) {-webkit-animation-delay:.1s;animation-delay:.1s;}
+.do-ui-load.load-style-5 .dot-box i:nth-child(3) {-webkit-animation-delay:.2s;animation-delay:.2s;}
+.do-ui-load.load-style-5 .dot-box i:nth-child(4) {-webkit-animation-delay:.3s;animation-delay:.3s;}
+.do-ui-load.load-style-5 .dot-box i:nth-child(5) {-webkit-animation-delay:.4s;animation-delay:.4s;}
+
+/* style 6 */
+.do-ui-load.load-style-6 {width:300px;height:50px;}
+.do-ui-load.load-style-6 .dot-box {position:absolute;display:block;width:100%;height:100%;}
+.do-ui-load.load-style-6 .dot-box i {position:absolute;display:block;width:10px;height:10px;background:#03998c;-webkit-animation: spring 3s infinite ease-in-out;animation: spring 3s infinite ease-in-out;}
+.do-ui-load.load-style-6 .dot-box i:nth-child(2) {-webkit-animation-delay:.2s;animation-delay:.1s;}
+.do-ui-load.load-style-6 .dot-box i:nth-child(3) {-webkit-animation-delay:.4s;animation-delay:.2s;}
+.do-ui-load.load-style-6 .dot-box i:nth-child(4) {-webkit-animation-delay:.6s;animation-delay:.3s;}
+.do-ui-load.load-style-6 .dot-box i:nth-child(5) {-webkit-animation-delay:.8s;animation-delay:.4s;}
+
+/* style 7 */
+.do-ui-load.load-style-7 .dot-box {position:absolute;display:block;width:60%;height:60%;margin:20%;}
+.do-ui-load.load-style-7 .dot-box i {position:absolute;display:block;width:60px;height:60px;-webkit-animation: circle3 2s infinite ease-in-out;animation: circle3 2s infinite ease-in-out;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
+.do-ui-load.load-style-7 .dot-box i::before {display:block;width:8px;height:8px;background:#03998c;border-radius:50%;content:""}
+.do-ui-load.load-style-7 .dot-box i:nth-child(2) {-webkit-animation-delay:.1s;animation-delay:.1s;}
+.do-ui-load.load-style-7 .dot-box i:nth-child(3) {-webkit-animation-delay:.2s;animation-delay:.2s;}
+.do-ui-load.load-style-7 .dot-box i:nth-child(4) {-webkit-animation-delay:.3s;animation-delay:.3s;}
+.do-ui-load.load-style-7 .dot-box i:nth-child(5) {-webkit-animation-delay:.4s;animation-delay:.4s;}
+
+
+
+@-webkit-keyframes circle {
+    to {-webkit-transform: rotate(360deg);}
+}
+@keyframes circle {
+    to {transform: rotate(360deg)}
+}
+@-webkit-keyframes circle2 {
+    to {-webkit-transform: rotate(-360deg);}
+}
+@keyframes circle2 {
+    to {transform: rotate(-360deg)}
+}
+@-webkit-keyframes circle3 {
+    70%,to {-webkit-transform: rotate(405deg);}
+}
+@keyframes circle3 {
+    70%,to {transform: rotate(405deg);}
+}
+
+@-webkit-keyframes fadein {
+    
+    50% {-webkit-transform: scale(1);opacity:1}
+    to {-webkit-transform: scale(.5);opacity:.3}
+}
+@keyframes fadein {
+    
+    50% {transform: scale(1);opacity:1}
+    to {transform: scale(.5);opacity:.3}
+}
+
+@-webkit-keyframes grid {
+    
+    36% {-webkit-transform: scale(.1);opacity:.3}
+    60% {-webkit-transform: scale(1);opacity:1}
+}
+@keyframes grid {
+    
+    36% {transform: scale(.1);opacity:.3}
+    60% {transform: scale(1);opacity:1}
+}
+
+@-webkit-keyframes bounce {
+    70% {-webkit-transform: scale(1);}
+    to {-webkit-transform: scale(.1);}
+}
+@keyframes bounce {
+    70% {transform: scale(1);}
+    to {transform: scale(.1);}
+}
+
+
+@-webkit-keyframes bounce2 {
+    25% {-webkit-transform: scaleY(1.3);}
+    50% {-webkit-transform: scaleY(.6);}
+}
+@keyframes bounce2 {
+    25% {transform: scaleY(1.3);}
+    50% {transform: scaleY(.6);}
+}
+
+@-webkit-keyframes spring {
+    30%,50% {-webkit-transform: translateX(200px);}
+    80%,to {-webkit-transform: translateX(0);}
+}
+@keyframes spring {
+    30%,50%{transform: translateX(200px);}
+    80%,to {transform: translateX(0);}
+}
 
-.do-ui-layer.skin-def .layer-btns {width:100%;height:40px;padding:0 5px;line-height:28px;font-size:14px;color:#454545;text-align:right;}
-.do-ui-layer.skin-def .layer-btns a {display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;line-height:28px;border:1px solid #ddd;color:#454545;text-align:center;background:#f3f3f3;}

js/yua-touch.js

@@ -35,7 +35,7 @@ var expose = Date.now()
 //http://stackoverflow.com/questions/7290086/javascript-use-strict-and-nicks-find-global-function
 var DOC = window.document
 var head = DOC.head //HEAD元素
-head.insertAdjacentHTML("afterBegin", '<yua :skip class="yua-hide"><style id="yua-style">.yua-hide{ display: none!important } .do-rule-tips {position:absolute;display:table;z-index:10240;min-width:75px;height:30px;padding:7px 8px;line-height:16px;color:#333;background:#f9ca05;white-space:pre;} .do-rule-tips:before {position:absolute;left:5px;bottom:-8px;width:0;height:0;border:8px solid transparent;border-left:8px solid #f9ca05;content: " "}</style></yua>')
+head.insertAdjacentHTML("afterBegin", '<yua :skip class="yua-hide"><style id="yua-style">.yua-hide{ display: none!important } .do-rule-tips {position:absolute;z-index:65535;min-width:75px;height:30px;padding:7px 8px;line-height:16px;color:#333;background:#f9ca05;white-space:pre;} .do-rule-tips::before {position:absolute;left:5px;bottom:-8px;width:0;height:0;border:8px solid transparent;border-left:8px solid #f9ca05;content: " "}</style></yua>')
 var ifGroup = head.firstChild
 
 function log() {
@@ -5748,6 +5748,10 @@ new function () {// jshint ignore:line
                 return a
             }
         })
+        //补上协议, 避免引入依赖时判断不正确
+        if(/^\/\//.test(name)){
+            name = location.protocol + name
+        }
         var req = yua.mix({
             query: query,
             ext: ext,
@@ -5840,7 +5844,7 @@ new function () {// jshint ignore:line
                 if (url) {
                     if (!uniq[url]) {
                         deps.push(url)
-                        uniq[url] = "yua" //去重
+                        uniq[url] = !0//去重
                     }
                 }
             })

js/yua.js

@@ -35,7 +35,7 @@ var expose = Date.now()
 //http://stackoverflow.com/questions/7290086/javascript-use-strict-and-nicks-find-global-function
 var DOC = window.document
 var head = DOC.head //HEAD元素
-head.insertAdjacentHTML("afterBegin", '<yua :skip class="yua-hide"><style id="yua-style">.yua-hide{ display: none!important } .do-rule-tips {position:absolute;display:table;z-index:10240;min-width:75px;height:30px;padding:7px 8px;line-height:16px;color:#333;background:#f9ca05;white-space:pre;} .do-rule-tips:before {position:absolute;left:5px;bottom:-8px;width:0;height:0;border:8px solid transparent;border-left:8px solid #f9ca05;content: " "}</style></yua>')
+head.insertAdjacentHTML("afterBegin", '<yua :skip class="yua-hide"><style id="yua-style">.yua-hide{ display: none!important } .do-rule-tips {position:absolute;z-index:65535;min-width:75px;height:30px;padding:7px 8px;line-height:16px;color:#333;background:#f9ca05;white-space:pre;} .do-rule-tips::before {position:absolute;left:5px;bottom:-8px;width:0;height:0;border:8px solid transparent;border-left:8px solid #f9ca05;content: " "}</style></yua>')
 var ifGroup = head.firstChild
 
 function log() {
@@ -491,7 +491,7 @@ if(!Date.prototype.format){
 yua.mix({
     rword: rword,
     subscribers: subscribers,
-    version: '1.0.0-touch',
+    version: '1.0.0',
     ui: {},
     log: log,
     slice: function (nodes, start, end) {
@@ -5748,6 +5748,10 @@ new function () {// jshint ignore:line
                 return a
             }
         })
+        //补上协议, 避免引入依赖时判断不正确
+        if(/^\/\//.test(name)){
+            name = location.protocol + name
+        }
         var req = yua.mix({
             query: query,
             ext: ext,
@@ -5802,6 +5806,7 @@ new function () {// jshint ignore:line
     var requireQueue = []
     var isUserFirstRequire = false
     innerRequire = yua.require = function (array, factory, parentUrl, defineConfig) {
+
         if (!isUserFirstRequire) {
             requireQueue.push(yua.slice(arguments))
             if (arguments.length <= 2) {
@@ -5813,7 +5818,6 @@ new function () {// jshint ignore:line
             }
             return
         }
-
         if (!Array.isArray(array)) {
             yua.error("require方法的第一个参数应为数组 " + array)
         }
@@ -5837,10 +5841,11 @@ new function () {// jshint ignore:line
                 }
                 var req = makeRequest(name, defineConfig)
                 var url = fireRequest(req) //加载资源，并返回该资源的完整地址
+
                 if (url) {
                     if (!uniq[url]) {
                         deps.push(url)
-                        uniq[url] = "yua" //去重
+                        uniq[url] = !0
                     }
                 }
             })