优化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
|
||||
==================
|
||||
+ 优化offset的处理
|
||||
|
|
|
|||
|
|
@ -34,19 +34,16 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
|||
fixed: false, //是否固定不可拖拽
|
||||
offset: null, //弹窗出来时的坐标, 为数组,可有4个值,依次是 上右下左
|
||||
btns: ['确定', '取消'], //弹窗的2个按钮的文字
|
||||
yes: close, //确定按钮对应的回调
|
||||
no: close, //取消按钮对应的回调
|
||||
yes: yua.noop, //确定按钮对应的回调
|
||||
no: yua.noop, //取消按钮对应的回调
|
||||
success: null //弹窗初始化完成时的回调
|
||||
};
|
||||
|
||||
function uuid(){
|
||||
},
|
||||
uuid = function(){
|
||||
return 'layer-' + (++lid)
|
||||
}
|
||||
|
||||
|
||||
function close(id){
|
||||
},
|
||||
close = function(id){
|
||||
if(typeof id !== 'string' && typeof id !== 'number'){
|
||||
return console.error(new Error('要关闭的layer实例不存在'))
|
||||
return yua.error('要关闭的layer实例不存在')
|
||||
}
|
||||
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 yua.vmodels[id]
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function reapeat(str, num){
|
||||
},
|
||||
reapeat = function(str, num){
|
||||
var idx = 0,
|
||||
result = ''
|
||||
while(idx < num){
|
||||
|
|
@ -82,17 +77,15 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
|||
idx++
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function fixOffset(val){
|
||||
},
|
||||
fixOffset = function (val){
|
||||
if(!val && val !== 0){
|
||||
return 'auto'
|
||||
}else{
|
||||
return val
|
||||
}
|
||||
}
|
||||
|
||||
var __constructor = function(conf){
|
||||
},
|
||||
__constructor = function(conf){
|
||||
if(conf){
|
||||
this.ready(conf).append().show()
|
||||
}
|
||||
|
|
@ -106,7 +99,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
|||
}else{
|
||||
conf = {}
|
||||
}
|
||||
conf.icon = 6
|
||||
conf.icon = 5
|
||||
conf.content = msg
|
||||
return __layer.open(conf)
|
||||
},
|
||||
|
|
@ -119,7 +112,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
|||
conf = {}
|
||||
}
|
||||
conf.type = 2
|
||||
conf.icon = 8
|
||||
conf.icon = 0
|
||||
conf.content = msg
|
||||
return __layer.open(conf)
|
||||
},
|
||||
|
|
@ -161,7 +154,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
|||
},
|
||||
tips: function(msg, elem, conf){
|
||||
if(!(elem instanceof HTMLElement)){
|
||||
return console.error(new Error('tips类型必须指定一个目标容器'))
|
||||
return yua.error('tips类型必须指定一个目标容器')
|
||||
}
|
||||
if(typeof conf !== 'object'){
|
||||
var tmp = conf
|
||||
|
|
@ -194,11 +187,13 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
|||
}
|
||||
var conf = {
|
||||
type: 3,
|
||||
icon: 7,
|
||||
prompt: '',
|
||||
title: msg,
|
||||
content: '<input class="prompt-value" :duplex="prompt" />',
|
||||
content: '<input class="prompt-value" :class="{alert: !prompt}" :duplex="prompt" />',
|
||||
yes: function(id){
|
||||
if(!yua.vmodels[id].prompt){
|
||||
return
|
||||
}
|
||||
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值
|
||||
1: 'alert',
|
||||
2: 'confirm',
|
||||
|
|
@ -300,7 +296,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
|||
|
||||
layBox.innerHTML = this.getMenubar()
|
||||
+ '<div class="layer-content do-layer-cl '
|
||||
+ (this.init.icon === 0 && 'none-icon' || '')
|
||||
+ (this.init.icon < 0 && 'none-icon' || '')
|
||||
+ '" style="'
|
||||
+ boxcss
|
||||
+ '">'
|
||||
|
|
@ -350,7 +346,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
|||
},
|
||||
//获取窗口内容的图标
|
||||
getIcon: function(){
|
||||
if(this.init.icon === 0){
|
||||
if(this.init.icon < 0){
|
||||
return ''
|
||||
}
|
||||
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){
|
||||
if(!val){
|
||||
return console.error(new Error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr) + '"]')
|
||||
return yua.error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr + '"]')
|
||||
}
|
||||
|
||||
var _this = this,
|
||||
|
|
@ -557,7 +553,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
|||
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'
|
||||
if(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);
|
||||
|
||||
.icon-0::before {content:"\e62e";color:nth($cr, 1);} // question
|
||||
.icon-1::before {content:"\e610";color:nth($cg, 1);} // get
|
||||
.icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy
|
||||
.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-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;}
|
||||
.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;}
|
||||
}
|
||||
|
||||
|
|
@ -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