Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
0d36903c
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,发现更多精彩内容 >>
提交
0d36903c
编写于
1月 27, 2014
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
+ added messager.
上级
3aea8d73
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
288 addition
and
0 deletion
+288
-0
examples/messager.html
examples/messager.html
+103
-0
src/js/messager.js
src/js/messager.js
+76
-0
src/less/modules/messager.less
src/less/modules/messager.less
+109
-0
未找到文件。
examples/messager.html
0 → 100644
浏览文件 @
0d36903c
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"utf-8"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<meta
name=
"description"
content=
"ZUI,一个简单吸引人的前端框架。"
>
<meta
name=
"author"
content=
"Zentao"
>
<title>
ZUI
</title>
<link
href=
"../dist/css/zui.css"
rel=
"stylesheet"
>
<link
href=
"../assets/css/example.css"
rel=
"stylesheet"
>
<script
src=
"../dist/js/jquery.js"
></script>
<script
src=
"../dist/js/zui.min.js"
></script>
<script
src=
"../src/js/debug.js"
></script>
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond.js"></script>
<![endif]-->
<script
src=
"../assets/js/example.js"
></script>
<script>
$
(
function
()
{
// messager.success('这是一条测试消息', 'top', 5000);
});
</script>
<style>
.messager-example
{
position
:
relative
;
margin-bottom
:
20px
;}
</style>
</head>
<body>
<nav
class=
"navbar navbar-inverse navbar-fixed-top"
role=
"navigation"
>
<div
class=
"navbar-header"
>
<button
type=
"button"
class=
"navbar-toggle"
data-toggle=
"collapse"
data-target=
"#navbar"
>
<span
class=
"sr-only"
>
Toggle navigation
</span>
<span
class=
"icon-bar"
></span>
<span
class=
"icon-bar"
></span>
<span
class=
"icon-bar"
></span>
</button>
<a
class=
"navbar-brand"
href=
"#"
>
ZUI
</a>
</div>
<div
class=
"collapse navbar-collapse"
id=
"navbar"
>
<ul
class=
"nav navbar-nav"
>
<li
class=
"dropdown"
>
<a
href=
"#"
class=
"dropdown-toggle"
data-toggle=
"dropdown"
><span
id=
"navbarCurrent"
>
examples
</span>
<b
class=
"caret"
></b></a>
<ul
class=
"dropdown-menu"
role=
"menu"
>
<li><a
href=
"alerts.html"
>
alerts
</a></li>
<li><a
href=
"article.html"
>
article
</a></li>
<li><a
href=
"breadcrumb.html"
>
breadcrumb
</a></li>
<li><a
href=
"button-groups.html"
>
button-groups
</a></li>
<li><a
href=
"buttons.html"
>
buttons
</a></li>
<li><a
href=
"cards.html"
>
cards
</a></li>
<li><a
href=
"carousel.html"
>
carousel
</a></li>
<li><a
href=
"chosen.html"
>
chosen
</a></li>
<li><a
href=
"collapse.html"
>
collapse
</a></li>
<li><a
href=
"colorset.html"
>
colorset
</a></li>
<li><a
href=
"comment.html"
>
comment
</a></li>
<li><a
href=
"dropdowns.html"
>
dropdowns
</a></li>
<li><a
href=
"forms.html"
>
forms
</a></li>
<li><a
href=
"grid.html"
>
grid
</a></li>
<li><a
href=
"icons.html"
>
icons
</a></li>
<li><a
href=
"input-groups.html"
>
input-groups
</a></li>
<li><a
href=
"kindeditor.html"
>
kindeditor
</a></li>
<li><a
href=
"labels.html"
>
labels
</a></li>
<li><a
href=
"lightbox.html"
>
Lightbox
</a></li>
<li><a
href=
"list-group.html"
>
list-group
</a></li>
<li><a
href=
"list.html"
>
list
</a></li>
<li><a
href=
"modals.html"
>
modals
</a></li>
<li><a
href=
"navbars.html"
>
navbars
</a></li>
<li><a
href=
"navs.html"
>
navs
</a></li>
<li><a
href=
"pager.html"
>
pager
</a></li>
<li><a
href=
"panels.html"
>
panels
</a></li>
<li><a
href=
"popovers.html"
>
popovers
</a></li>
<li><a
href=
"progress.html"
>
progress
</a></li>
<li><a
href=
"tables.html"
>
tables
</a></li>
<li><a
href=
"tabs.html"
>
tabs
</a></li>
<li><a
href=
"textbox.html"
>
textbox
</a></li>
<li><a
href=
"tooltip.html"
>
tooltip
</a></li>
<li><a
href=
"type.html"
>
type
</a></li>
</ul>
</li>
<li
id=
"navbarNext"
><a
href=
"###"
>
NEXT
<i
class=
"icon-angle-right icon-large"
></i></a></li>
</ul>
</div>
</nav>
<article>
<section
id=
"buttons"
class=
"page-section"
>
<div
class=
"segment"
>
<div
class=
"messager messager-example messager-default"
><div
class=
"messager-content"
>
普通提示消息
</div><button
class=
"close-messager"
>
×
</button></div>
<div
class=
"messager messager-example messager-primary"
><div
class=
"messager-content"
>
提示消息:主要
</div><button
class=
"close-messager"
>
×
</button></div>
<div
class=
"messager messager-example messager-info"
><div
class=
"messager-content"
>
提示消息:信息
</div><button
class=
"close-messager"
>
×
</button></div>
<div
class=
"messager messager-example messager-danger"
><div
class=
"messager-content"
>
提示消息:危险
</div><button
class=
"close-messager"
>
×
</button></div>
<div
class=
"messager messager-example messager-success"
><div
class=
"messager-content"
>
提示消息:成功
</div><button
class=
"close-messager"
>
×
</button></div>
<div
class=
"messager messager-example messager-warning"
><div
class=
"messager-content"
>
提示消息:警告
</div><button
class=
"close-messager"
>
×
</button></div>
<div
class=
"messager messager-example messager-important"
><div
class=
"messager-content"
>
提示消息:重要
</div><button
class=
"close-messager"
>
×
</button></div>
<div
class=
"messager messager-example messager-special"
><div
class=
"messager-content"
>
提示消息:特别
</div><button
class=
"close-messager"
>
×
</button></div>
</div>
</section>
</article>
</body>
</html>
src/js/messager.js
0 → 100644
浏览文件 @
0d36903c
/* Messager: show messager float on your page */
+
function
(
$
,
window
,
document
,
Math
)
{
"
use strict
"
;
var
id
=
0
;
var
template
=
'
<div class="messager messager-{type} {placement}" id="messager{id}" style="display:none"><div class="messager-content">{message}</div><button class="close-messager">×</button></div>
'
;
function
Messager
()
{
this
.
show
=
function
(
message
,
type
,
placement
,
time
,
parent
)
{
$
(
'
.messager
'
).
hide
();
id
++
;
type
=
type
||
'
default
'
;
time
=
time
||
2000
;
parent
=
parent
||
'
body
'
;
placement
=
placement
||
'
top
'
;
var
msg
=
$
(
template
.
format
({
message
:
message
,
type
:
type
,
placement
:
placement
,
id
:
id
})).
appendTo
(
parent
);
msg
.
find
(
'
.close-messager
'
).
click
(
function
(){
$
(
this
).
closest
(
'
.messager
'
).
fadeOut
();});
if
(
placement
==
'
top
'
||
placement
==
'
bottom
'
)
{
msg
.
css
(
'
left
'
,
(
$
(
parent
).
width
()
-
msg
.
width
()
-
50
)
/
2
);
}
msg
.
fadeIn
();
setTimeout
(
function
(){
$
(
'
#messager
'
+
id
).
fadeOut
(
function
(){
$
(
this
).
remove
()});},
time
);
return
msg
;
}
this
.
primary
=
function
(
message
,
placement
,
time
,
parent
)
{
return
this
.
show
(
message
,
'
primary
'
,
placement
,
time
,
parent
);
}
this
.
success
=
function
(
message
,
placement
,
time
,
parent
)
{
return
this
.
show
(
'
<i class="icon-ok-sign icon"></i>
'
+
message
,
'
success
'
,
placement
,
time
,
parent
);
}
this
.
info
=
function
(
message
,
placement
,
time
,
parent
)
{
return
this
.
show
(
'
<i class="icon-info-sign icon"></i>
'
+
message
,
'
info
'
,
placement
,
time
,
parent
);
}
this
.
warning
=
function
(
message
,
placement
,
time
,
parent
)
{
return
this
.
show
(
'
<i class="icon-warning-sign icon"></i>
'
+
message
,
'
warning
'
,
placement
,
time
,
parent
);
}
this
.
danger
=
function
(
message
,
placement
,
time
,
parent
)
{
return
this
.
show
(
'
<i class="icon-exclamation-sign icon"></i>
'
+
message
,
'
danger
'
,
placement
,
time
,
parent
);
}
this
.
important
=
function
(
message
,
placement
,
time
,
parent
)
{
return
this
.
show
(
message
,
'
important
'
,
placement
,
time
,
parent
);
}
this
.
special
=
function
(
message
,
placement
,
time
,
parent
)
{
return
this
.
show
(
message
,
'
special
'
,
placement
,
time
,
parent
);
}
}
var
messager
=
new
Messager
();
window
.
messager
=
messager
;
}(
jQuery
,
window
,
document
,
Math
);
src/less/modules/messager.less
0 → 100644
浏览文件 @
0d36903c
.messager
{
position: fixed;
color: @color-light;
background-color: @color-dark;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 20px;
padding-right: 50px;
max-width: 80%;
z-index: 99999;
&.top
{
top: 20px;
}
&.top-left
{
top: 20px;
left: 20px;
}
&.top-right
{
top: 20px;
right: 20px;
}
&.bottom
{
bottom: 20px;
}
&.bottom-left
{
bottom: 20px;
left: 20px;
}
&.bottom-right
{
bottom: 20px;
right: 20px;
}
}
.messager-content
{
padding: 10px 20px;
> [class^='icon-']
{
display: inline-block;
margin-right: 8px;
}
}
.close-messager
{
position: absolute;
right: 10px;
top: 5px;
background: none;
border: none;
color: #fafafa;
color: rgba(255, 255, 255, 0.6);
font-size: 20px;
&:hover
{
color: #fff;
}
}
.messager-primary
{
background-color: @state-primary-inverse-bg;
}
.messager-success
{
background-color: @state-success-inverse-bg;
}
.messager-info
{
background-color: @state-info-inverse-bg;
}
.messager-warning
{
background-color: @state-warning-inverse-bg;
}
.messager-danger
{
background-color: @state-danger-inverse-bg;
}
.messager-important
{
background-color: @state-important-inverse-bg;
}
.messager-special
{
background-color: @state-special-inverse-bg;
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录