Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
9176ee01
Z
zui
项目概览
易企天创
/
zui
11 个月 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
9176ee01
编写于
8月 22, 2016
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* improve messager UI:
* support custom actions; * support custom CSS class;
上级
9196e8ba
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
74 addition
and
16 deletion
+74
-16
src/js/messager.js
src/js/messager.js
+62
-11
src/less/modules/messager.less
src/less/modules/messager.less
+12
-5
未找到文件。
src/js/messager.js
浏览文件 @
9176ee01
...
...
@@ -6,11 +6,11 @@
* ======================================================================== */
(
function
(
$
,
window
)
{
(
function
(
$
,
window
,
undefined
)
{
'
use strict
'
;
var
id
=
0
;
var
template
=
'
<div class="messager messager-{type} {placement}" id="messager{id}" style="display:none"><div class="messager-
content"></div><div class="messager-actions"><button type="button" class="close action">×</button
></div></div>
'
;
var
template
=
'
<div class="messager messager-{type} {placement}" id="messager{id}" style="display:none"><div class="messager-
actions"></div><div class="messager-content"
></div></div>
'
;
var
defaultOptions
=
{
type
:
'
default
'
,
placement
:
'
top
'
,
...
...
@@ -19,6 +19,10 @@
// clear: false,
icon
:
null
,
close
:
true
,
// actions: [{icon, name, action, title}],
// contentClass: null,
// cssClass: null,
// onAction: function,
fade
:
true
,
scale
:
true
};
...
...
@@ -31,16 +35,63 @@
that
.
message
=
(
options
.
icon
?
'
<i class="icon-
'
+
options
.
icon
+
'
icon"></i>
'
:
''
)
+
message
;
that
.
$
=
$
(
template
.
format
(
options
)).
toggleClass
(
'
fade
'
,
options
.
fade
).
toggleClass
(
'
scale
'
,
options
.
scale
).
attr
(
'
id
'
,
'
messager-
'
+
that
.
id
);
if
(
!
options
.
close
)
{
that
.
$
.
find
(
'
.close
'
).
remove
();
}
else
{
that
.
$
.
on
(
'
click
'
,
'
.close
'
,
function
()
{
that
.
hide
();
if
(
options
.
cssClass
)
that
.
$
.
addClass
(
options
.
cssClass
);
var
hasCloseAction
=
false
;
var
$actions
=
that
.
$
.
find
(
'
.messager-actions
'
);
var
appendAction
=
function
(
action
)
{
var
$btn
=
$
(
'
<button type="button" class="action action-
'
+
action
.
name
+
'
"/>
'
);
if
(
action
.
name
===
'
close
'
)
$btn
.
addClass
(
'
close
'
);
if
(
action
.
html
!==
undefined
)
{
$btn
.
html
(
action
.
html
);
}
if
(
action
.
icon
!==
undefined
)
{
$btn
.
append
(
'
<i class="action-icon icon-
'
+
action
.
icon
+
'
"/>
'
);
}
if
(
action
.
text
!==
undefined
)
{
$btn
.
append
(
'
<span class="action-text">
'
+
action
.
text
+
'
</span>
'
);
}
if
(
action
.
tooltip
!==
undefined
)
{
$btn
.
attr
(
'
title
'
,
action
.
tooltip
).
tooltip
();
}
$btn
.
data
(
'
action
'
,
action
);
$actions
.
append
(
$btn
);
};
if
(
options
.
actions
)
{
$
.
each
(
options
.
actions
,
function
(
idx
,
action
)
{
if
(
action
.
name
===
undefined
)
action
.
name
=
idx
;
if
(
action
.
name
==
'
close
'
)
hasCloseAction
=
true
;
appendAction
(
action
);
});
}
if
(
!
hasCloseAction
&&
options
.
close
)
{
appendAction
({
name
:
'
close
'
,
html
:
'
×
'
});
}
that
.
$
.
find
(
'
.messager-content
'
).
html
(
that
.
message
);
that
.
$
.
on
(
'
click
'
,
'
.action
'
,
function
(
e
)
{
var
action
=
$
(
this
).
data
(
'
action
'
),
result
;
if
(
options
.
onAction
)
{
result
=
options
.
onAction
.
call
(
this
,
action
.
name
,
action
,
that
);
if
(
result
===
false
)
return
;
}
if
(
$
.
isFunction
(
action
.
action
))
{
result
=
action
.
action
.
call
(
this
,
that
);
if
(
result
===
false
)
return
;
}
that
.
hide
();
e
.
stopPropagation
();
});
that
.
$
.
on
(
'
click
'
,
function
(
e
)
{
if
(
options
.
onAction
)
{
result
=
options
.
onAction
.
call
(
this
,
'
content
'
,
null
,
that
);
if
(
result
===
true
)
that
.
hide
();
}
});
var
$content
=
that
.
$
.
find
(
'
.messager-content
'
).
html
(
that
.
message
);
if
(
options
.
contentClass
)
$content
.
addClass
(
options
.
cssClass
);
that
.
$
.
data
(
'
zui.messager
'
,
that
);
};
...
...
@@ -70,11 +121,11 @@
that
.
$
.
appendTo
(
options
.
parent
).
show
();
if
(
options
.
placement
===
'
top
'
||
options
.
placement
===
'
bottom
'
||
options
.
placement
===
'
center
'
)
{
that
.
$
.
css
(
'
left
'
,
(
$
(
window
).
width
()
-
that
.
$
.
width
()
-
50
)
/
2
);
that
.
$
.
css
(
'
left
'
,
(
$
(
window
).
width
()
-
that
.
$
.
width
())
/
2
);
}
if
(
options
.
placement
===
'
left
'
||
options
.
placement
===
'
right
'
||
options
.
placement
===
'
center
'
)
{
that
.
$
.
css
(
'
top
'
,
(
$
(
window
).
height
()
-
that
.
$
.
height
()
-
50
)
/
2
);
that
.
$
.
css
(
'
top
'
,
(
$
(
window
).
height
()
-
that
.
$
.
height
())
/
2
);
}
that
.
$
.
addClass
(
'
in
'
);
...
...
@@ -172,5 +223,5 @@
}
}
});
}(
jQuery
,
window
));
}(
jQuery
,
window
,
undefined
));
src/less/modules/messager.less
浏览文件 @
9176ee01
...
...
@@ -14,9 +14,9 @@
background-color: @color-dark;
background-color: rgba(0, 0, 0, 0.8);
border-radius: @messager-radius;
padding-right: 50px;
max-width: 80%;
z-index: 99999;
&:extend(.clearfix all);
&.top {
top: 20px;
...
...
@@ -49,6 +49,7 @@
.messager-content {
padding: 10px 20px;
float: left;
> [class^='icon-'] {
display: inline-block;
...
...
@@ -57,18 +58,21 @@
}
.messager-actions {
position: absolute;
right: 15px;
top: 8px;
float: right;
> .action {
color: #fafafa;
color: rgba(255,
255, 255, 0
.6);
color: rgba(255,
255,255,
.6);
background: none;
border: none;
text-shadow: none;
min-width: 40px;
padding: 0 12px;
height: 40px;
text-align: center;
&.close {
padding-bottom: 5px;
opacity: 1;
font-size: 20px;
font-weight: normal;
...
...
@@ -76,8 +80,11 @@
&:hover {
color: #fff;
background: rgba(0,0,0,.1);
}
}
.action-icon + .action-text {margin-left: 8px;}
}
.messager-primary {
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录