优化layer的一波样式,微调layer默认icon类型
parent
8bfca19c87
commit
1cbaafe0c0
|
@ -1,13 +0,0 @@
|
||||||
# layer弹窗组件
|
|
||||||
> 以知名弹窗插件layer为参考,基于yua框架进行移植的一个弹窗组件。
|
|
||||||
|
|
||||||
## 常用方法
|
|
||||||
> layer组件本身提供了几种常见的弹窗类型。
|
|
||||||
|
|
||||||
### layer.alert(msg[,conf])
|
|
||||||
+ msg `<String>`
|
|
||||||
+ conf `<Object>` | `<Function>` 可选
|
|
||||||
|
|
||||||
> 该方法为弹出一个普通的`alert`类型的弹窗, 功能类似于原生的`alert`方法,方法返回该弹窗的唯一ID, 该ID用于在其他地方对该弹窗的控制(如关闭)。
|
|
||||||
> `msg`为要显示的提示文本, 支持html文本。
|
|
||||||
> `conf`为可行参数, 可以一个对象或一个方法, 如果一个方法,则自动为确定和关闭按钮的回调。
|
|
|
@ -1,3 +1,9 @@
|
||||||
|
v1.0.0-base / 2017-09-20
|
||||||
|
==================
|
||||||
|
+ 统一字体图标
|
||||||
|
+ 精简动画类型
|
||||||
|
+ 优化样式
|
||||||
|
|
||||||
v0.0.4-base / 2017-04-20
|
v0.0.4-base / 2017-04-20
|
||||||
==================
|
==================
|
||||||
+ 优化offset的处理
|
+ 优化offset的处理
|
||||||
|
|
|
@ -34,19 +34,16 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||||
fixed: false, //是否固定不可拖拽
|
fixed: false, //是否固定不可拖拽
|
||||||
offset: null, //弹窗出来时的坐标, 为数组,可有4个值,依次是 上右下左
|
offset: null, //弹窗出来时的坐标, 为数组,可有4个值,依次是 上右下左
|
||||||
btns: ['确定', '取消'], //弹窗的2个按钮的文字
|
btns: ['确定', '取消'], //弹窗的2个按钮的文字
|
||||||
yes: close, //确定按钮对应的回调
|
yes: yua.noop, //确定按钮对应的回调
|
||||||
no: close, //取消按钮对应的回调
|
no: yua.noop, //取消按钮对应的回调
|
||||||
success: null //弹窗初始化完成时的回调
|
success: null //弹窗初始化完成时的回调
|
||||||
};
|
},
|
||||||
|
uuid = function(){
|
||||||
function uuid(){
|
|
||||||
return 'layer-' + (++lid)
|
return 'layer-' + (++lid)
|
||||||
}
|
},
|
||||||
|
close = function(id){
|
||||||
|
|
||||||
function close(id){
|
|
||||||
if(typeof id !== 'string' && typeof id !== 'number'){
|
if(typeof id !== 'string' && typeof id !== 'number'){
|
||||||
return console.error(new Error('要关闭的layer实例不存在'))
|
return yua.error('要关闭的layer实例不存在')
|
||||||
}
|
}
|
||||||
if(/^\$wrap\-/.test(id) || layerObj['$wrap-' + id]){
|
if(/^\$wrap\-/.test(id) || layerObj['$wrap-' + id]){
|
||||||
|
|
||||||
|
@ -71,10 +68,8 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||||
delete layerDom[id]
|
delete layerDom[id]
|
||||||
delete yua.vmodels[id]
|
delete yua.vmodels[id]
|
||||||
}
|
}
|
||||||
|
},
|
||||||
}
|
reapeat = function(str, num){
|
||||||
|
|
||||||
function reapeat(str, num){
|
|
||||||
var idx = 0,
|
var idx = 0,
|
||||||
result = ''
|
result = ''
|
||||||
while(idx < num){
|
while(idx < num){
|
||||||
|
@ -82,17 +77,15 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||||
idx++
|
idx++
|
||||||
}
|
}
|
||||||
return result
|
return result
|
||||||
}
|
},
|
||||||
|
fixOffset = function (val){
|
||||||
function fixOffset(val){
|
|
||||||
if(!val && val !== 0){
|
if(!val && val !== 0){
|
||||||
return 'auto'
|
return 'auto'
|
||||||
}else{
|
}else{
|
||||||
return val
|
return val
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
__constructor = function(conf){
|
||||||
var __constructor = function(conf){
|
|
||||||
if(conf){
|
if(conf){
|
||||||
this.ready(conf).append().show()
|
this.ready(conf).append().show()
|
||||||
}
|
}
|
||||||
|
@ -106,7 +99,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||||
}else{
|
}else{
|
||||||
conf = {}
|
conf = {}
|
||||||
}
|
}
|
||||||
conf.icon = 6
|
conf.icon = 5
|
||||||
conf.content = msg
|
conf.content = msg
|
||||||
return __layer.open(conf)
|
return __layer.open(conf)
|
||||||
},
|
},
|
||||||
|
@ -119,7 +112,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||||
conf = {}
|
conf = {}
|
||||||
}
|
}
|
||||||
conf.type = 2
|
conf.type = 2
|
||||||
conf.icon = 8
|
conf.icon = 0
|
||||||
conf.content = msg
|
conf.content = msg
|
||||||
return __layer.open(conf)
|
return __layer.open(conf)
|
||||||
},
|
},
|
||||||
|
@ -161,7 +154,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||||
},
|
},
|
||||||
tips: function(msg, elem, conf){
|
tips: function(msg, elem, conf){
|
||||||
if(!(elem instanceof HTMLElement)){
|
if(!(elem instanceof HTMLElement)){
|
||||||
return console.error(new Error('tips类型必须指定一个目标容器'))
|
return yua.error('tips类型必须指定一个目标容器')
|
||||||
}
|
}
|
||||||
if(typeof conf !== 'object'){
|
if(typeof conf !== 'object'){
|
||||||
var tmp = conf
|
var tmp = conf
|
||||||
|
@ -194,11 +187,13 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||||
}
|
}
|
||||||
var conf = {
|
var conf = {
|
||||||
type: 3,
|
type: 3,
|
||||||
icon: 7,
|
|
||||||
prompt: '',
|
prompt: '',
|
||||||
title: msg,
|
title: msg,
|
||||||
content: '<input class="prompt-value" :duplex="prompt" />',
|
content: '<input class="prompt-value" :class="{alert: !prompt}" :duplex="prompt" />',
|
||||||
yes: function(id){
|
yes: function(id){
|
||||||
|
if(!yua.vmodels[id].prompt){
|
||||||
|
return
|
||||||
|
}
|
||||||
yescb(id, yua.vmodels[id].prompt)
|
yescb(id, yua.vmodels[id].prompt)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -242,6 +237,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
defconf.yes = defconf.no = close
|
||||||
/*type: { // 弹窗类型对应的id值
|
/*type: { // 弹窗类型对应的id值
|
||||||
1: 'alert',
|
1: 'alert',
|
||||||
2: 'confirm',
|
2: 'confirm',
|
||||||
|
@ -300,7 +296,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||||
|
|
||||||
layBox.innerHTML = this.getMenubar()
|
layBox.innerHTML = this.getMenubar()
|
||||||
+ '<div class="layer-content do-layer-cl '
|
+ '<div class="layer-content do-layer-cl '
|
||||||
+ (this.init.icon === 0 && 'none-icon' || '')
|
+ (this.init.icon < 0 && 'none-icon' || '')
|
||||||
+ '" style="'
|
+ '" style="'
|
||||||
+ boxcss
|
+ boxcss
|
||||||
+ '">'
|
+ '">'
|
||||||
|
@ -350,7 +346,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||||
},
|
},
|
||||||
//获取窗口内容的图标
|
//获取窗口内容的图标
|
||||||
getIcon: function(){
|
getIcon: function(){
|
||||||
if(this.init.icon === 0){
|
if(this.init.icon < 0){
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
if(this.init.type < 4 || this.init.type === 5 || this.init.specialMode){
|
if(this.init.type < 4 || this.init.type === 5 || this.init.specialMode){
|
||||||
|
@ -514,7 +510,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||||
},
|
},
|
||||||
update: function(val){
|
update: function(val){
|
||||||
if(!val){
|
if(!val){
|
||||||
return console.error(new Error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr) + '"]')
|
return yua.error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr + '"]')
|
||||||
}
|
}
|
||||||
|
|
||||||
var _this = this,
|
var _this = this,
|
||||||
|
@ -557,7 +553,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||||
tipsCont = document.createElement('div');
|
tipsCont = document.createElement('div');
|
||||||
|
|
||||||
|
|
||||||
tipsBox.className = 'do-layer skin-def type-5'
|
tipsBox.className = 'do-layer skin-' + (init.skin || 'def') + ' type-5'
|
||||||
tipsBox.style.left = ol + (ew * 0.7) + 'px'
|
tipsBox.style.left = ol + (ew * 0.7) + 'px'
|
||||||
if(init.background){
|
if(init.background){
|
||||||
tipsBox.style.background = init.background
|
tipsBox.style.background = init.background
|
||||||
|
|
|
@ -1,50 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
||||||
<title>Examples</title>
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="">
|
|
||||||
<link href="../css/base.min.css" rel="stylesheet">
|
|
||||||
<style type="text/css">
|
|
||||||
body {background:url(/123.png) no-repeat;}
|
|
||||||
.a {display:inline-block;min-width:80px;height:32px;margin:10px;padding:0 10px;text-decoration:none;border:1px solid #ddd;line-height:30px;}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body ms-controller="test">
|
|
||||||
|
|
||||||
<a class="a" href="javascript:;" ms-click="layer.alert('测试alert内容')">alert层</a>
|
|
||||||
<a class="a" href="javascript:;" ms-click="layer.confirm('测试confirm内容')">confirm层</a>
|
|
||||||
<a class="a" href="javascript:;" ms-click="layer.msg('测试msg内容')">msg层</a>
|
|
||||||
<a class="a" href="javascript:;" ms-click="layer.prompt('测试prompt内容')">prompt层</a>
|
|
||||||
<a class="a" href="javascript:;" ms-click="layer.loading('测试loading内容')">loading层</a>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../avalon.modern.min.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
require(['layer/layer.js'], function(lay){
|
|
||||||
|
|
||||||
avalon.define({
|
|
||||||
$id: 'test'
|
|
||||||
})
|
|
||||||
|
|
||||||
layer.alert('测试loading内容blabla')
|
|
||||||
layer.confirm('测试loading内容blabla测试loading内容blabla测试loading内容blabla', {offset: {x: '550px', y: '690px'}})
|
|
||||||
layer.open({content: '测试loading内容blabla', offset: {x: '350px', y: '390px'}})
|
|
||||||
|
|
||||||
avalon.scan()
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
File diff suppressed because one or more lines are too long
|
@ -16,6 +16,7 @@
|
||||||
/* 默认皮肤 */
|
/* 默认皮肤 */
|
||||||
&.skin-def {color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,.3);
|
&.skin-def {color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,.3);
|
||||||
|
|
||||||
|
.icon-0::before {content:"\e62e";color:nth($cr, 1);} // question
|
||||||
.icon-1::before {content:"\e610";color:nth($cg, 1);} // get
|
.icon-1::before {content:"\e610";color:nth($cg, 1);} // get
|
||||||
.icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy
|
.icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy
|
||||||
.icon-3::before {content:"\e6fd";color:nth($co, 1);} // sad
|
.icon-3::before {content:"\e6fd";color:nth($co, 1);} // sad
|
||||||
|
@ -28,7 +29,7 @@
|
||||||
|
|
||||||
|
|
||||||
/* 弹层标题栏 */
|
/* 弹层标题栏 */
|
||||||
.layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:nth($cp, 1);font-size:14px;color:nth($cgr, 1);}
|
.layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:nth($cp, 2);font-size:14px;color:nth($cgr, 1);}
|
||||||
|
|
||||||
.action-min,
|
.action-min,
|
||||||
.action-close {position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:nth($cgr, 2);
|
.action-close {position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:nth($cgr, 2);
|
||||||
|
@ -48,7 +49,11 @@
|
||||||
.msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;}
|
.msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;}
|
||||||
.detail {width:auto;height:100%;margin:auto auto auto 60px;padding:5px 15px;word-break:break-all;word-wrap: break-word;
|
.detail {width:auto;height:100%;margin:auto auto auto 60px;padding:5px 15px;word-break:break-all;word-wrap: break-word;
|
||||||
|
|
||||||
.prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;}
|
.prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;
|
||||||
|
|
||||||
|
&.alert {border-color:nth($cr, 1)}
|
||||||
|
&:focus {border-color:nth($cg, 1)}
|
||||||
|
}
|
||||||
.msg-box {line-height:30px;}
|
.msg-box {line-height:30px;}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -57,9 +62,13 @@
|
||||||
|
|
||||||
|
|
||||||
/* 弹层按钮部分 */
|
/* 弹层按钮部分 */
|
||||||
.layer-btns {width:100%;height:40px;padding:0 5px;line-height:28px;font-size:14px;color:#454545;text-align:right;
|
.layer-btns {width:100%;height:40px;padding:0 5px;line-height:30px;font-size:14px;color:#454545;text-align:right;
|
||||||
|
|
||||||
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;}
|
a {display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;color:nth($cgr, 1);text-align:center;background:nth($cp, 1);
|
||||||
|
|
||||||
|
&:hover {background:nth($cp, 2)}
|
||||||
|
&:active {background:nth($cp, 3)}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue