Skip to content

Commit

Permalink
1.1.4
Browse files Browse the repository at this point in the history
  • Loading branch information
jitukeji committed Nov 21, 2015
1 parent 1386a02 commit 5223997
Show file tree
Hide file tree
Showing 8 changed files with 451 additions and 7 deletions.
192 changes: 191 additions & 1 deletion css/aui.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
* =========================================================================
* AUI APICLOUD UI 框架 流浪男 QQ:343757327 http://www.auicss.com
* Verson 1.1.3
* Verson 1.1.4
* =========================================================================
*/
/*初始化类*/
Expand Down Expand Up @@ -1870,6 +1870,196 @@ input.aui-counter-input {
animation: fadeIn .5s ease both;
}
/*
*进度条
*/
.aui-progress {
height: 20px;
border-radius: 4px;
overflow: hidden;
background-color: #f5f5f5;
}
.aui-progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #3498db;
}
.aui-progress.sm,
.aui-progress-sm {
height: 10px;
}
.aui-progress.sm,
.aui-progress-sm,
.aui-progress.sm .aui-progress-bar,
.aui-progress-sm .aui-progress-bar {
border-radius: 1px;
}
.aui-progress.xs,
.aui-progress-xs {
height: 7px;
}
.aui-progress.xs,
.aui-progress-xs,
.aui-progress.xs .progress-bar,
.aui-progress-xs .progress-bar {
border-radius: 1px;
}
.aui-progress.xxs,
.aui-progress-xxs {
height: 3px;
}
.aui-progress.xxs,
.aui-progress-xxs,
.aui-progress.xxs .progress-bar,
.aui-progress-xxs .progress-bar {
border-radius: 1px;
}
.aui-progress-primary {
background-color: #1abc9c;
}
.aui-progress-success {
background-color: #2ecc71;
}
.aui-progress-info {
background-color: #3498db;
}
.aui-progress-warning {
background-color: #f1c40f;
}
.aui-progress-danger {
background-color: #e74c3c;
}
.aui-timeline {
position: relative;
padding: 0;
list-style: none;
}
.aui-timeline:before {
content: '';
position: absolute;
top: 0px;
bottom: 0;
width: 2px;
background: #ddd;
left: 32px;
margin: 0;
border-radius: 2px;
}
.aui-timeline > li {
position: relative;
margin-bottom: 15px;
}
.aui-timeline > li:before,
.aui-timeline > li:after {
content: " ";
display: table;
}
.aui-timeline > li:after {
clear: both;
}
.aui-timeline > li > .aui-timeline-item {
margin-top: 0px;
background: #fff;
color: #444;
margin-left: 60px;
padding: 0;
position: relative;
}
.aui-timeline > li > .aui-timeline-item:after {
border-radius: 6px;
border: 1px solid #c8c7cc;
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
}

.aui-timeline > li > .aui-timeline-item > .aui-timeline-time {
color: #999;
float: right;
padding: 10px;
font-size: 12px;
}
.aui-timeline > li > .aui-timeline-item > .aui-timeline-header {
margin: 0;
color: #555;
padding: 10px;
font-size: 0.875em;
position: relative;
}
.aui-timeline > li > .aui-timeline-item > .aui-timeline-header:after {
border-bottom: 1px solid #ddd;
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
}
.aui-timeline > li > .aui-timeline-item > .aui-timeline-body,
.aui-timeline > li > .aui-timeline-item > .aui-timeline-footer {
padding: 10px;
font-size: 0.875em;
}
.aui-timeline > li > .aui-timeline-item > .aui-timeline-footer {
background-color: #f4f4f4;
}
.aui-timeline > li.aui-time-label > span {
padding: 5px;
display: inline-block;
background-color: #d2d6de;
border-radius: 4px;
color: #ffffff;
}
.aui-timeline > li > .aui-time-label {
width: 50px;
height: 30px;
font-size: 0.75em;
line-height: 30px;
position: absolute;
color: #ffffff;
background: #d2d6de;
text-align: center;
left: 8px;
top: 0;
border-radius: 4px;
}
.aui-timeline > li > .aui-iconfont {
width: 30px;
height: 30px;
font-size: 15px;
line-height: 30px;
position: absolute;
color: #ffffff;
background: #d2d6de;
border-radius: 50%;
text-align: center;
left: 18px;
top: 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.aui-timeline > li > .aui-timeline-item:after,
.aui-timeline > li > .aui-timeline-item > .aui-timeline-header:after {
right: -100%;
bottom: -100%;
-webkit-transform: scale(0.5);
}
}
/*
*瀑布流样式
*/
.aui-waterfall{
Expand Down
11 changes: 10 additions & 1 deletion html/aui_alert_frm.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,16 @@
text-decoration: none;
}
body{
background: rgba(0,0,0,0.3);
background: transparent;
overflow: hidden;
}
.aui-mark {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0,0,0,0.3);
}
#aui-box {
position: absolute;
width: 80%;
Expand All @@ -28,6 +35,7 @@
left: 50%;
margin-left: -40%;
background: #ffffff;
z-index: 2;
-webkit-animation: fadeIn .3s;
}
#aui-box-header {
Expand Down Expand Up @@ -83,6 +91,7 @@
}
</style>
<body>
<div class="aui-mark"></div>
<div id="aui-box">
<div id="aui-box-header"></div>
<div id="aui-box-body"></div>
Expand Down
12 changes: 9 additions & 3 deletions html/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@
<body>
<div class="aui-content">
<ul class="aui-list-view">
<li class="aui-list-view-cell" tapmode onclick="openWin('timeline')">
<a class="aui-arrow-right">时间轴<span class="aui-badge aui-badge-danger">新增</span></a>
</li>
<li class="aui-list-view-cell" tapmode onclick="openWin('progress')">
<a class="aui-arrow-right">进度条<span class="aui-badge aui-badge-danger">新增</span></a>
</li>
<li class="aui-list-view-cell" tapmode onclick="openWin('alert')">
<a class="aui-arrow-right">自定义弹出层<span class="aui-badge aui-badge-warning">优化</span></a>
</li>
Expand All @@ -29,10 +35,10 @@
<a class="aui-arrow-right">switch开关</a>
</li>
<li class="aui-list-view-cell" tapmode onclick="openWin('checkbox')">
<a class="aui-arrow-right">checkbox选择<span class="aui-badge aui-badge-warning">优化</span></a>
<a class="aui-arrow-right">checkbox选择</a>
</li>
<li class="aui-list-view-cell" tapmode onclick="openWin('radio')">
<a class="aui-arrow-right">radio选择<span class="aui-badge aui-badge-warning">优化</span></a>
<a class="aui-arrow-right">radio选择</a>
</li>
<li class="aui-list-view-cell" tapmode onclick="openWin('list')">
<a class="aui-arrow-right">普通列表</a>
Expand Down Expand Up @@ -67,7 +73,7 @@
<li class="aui-list-view-cell" tapmode onclick="openWin('tab')">
<a class="aui-arrow-right">TAB菜单</a>
</li>
<li class="aui-list-view-cell" tapmode onclick="openWin('contact_book')" data-win="contact_book">
<li class="aui-list-view-cell" tapmode onclick="openWin('contact_book')">
<a class="aui-arrow-right">通讯录</a>
</li>
<li class="aui-list-view-cell" tapmode onclick="openWin('chat')">
Expand Down
64 changes: 64 additions & 0 deletions html/progress_frm.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>APP</title>
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<style type="text/css">
.aui-content {
background: #ffffff;
overflow: hidden;
padding: 15px;
}
p {
margin: 10px 0;
overflow: hidden;
}
</style>
<body>

<div class="aui-content">
<p>.aui-progress</p>
<div class="aui-progress aui-progress aui-clearfix">
<div class="aui-progress-bar" style="width: 60%;"></div>
</div>
<p>.aui-progress-sm</p>
<div class="aui-progress aui-progress-sm">
<div class="aui-progress-bar" style="width: 60%;"></div>
</div>
<p>.aui-progress-xs</p>
<div class="aui-progress aui-progress-xs">
<div class="aui-progress-bar" style="width: 60%;"></div>
</div>
<p>.aui-progress-xxs</p>
<div class="aui-progress aui-progress-xxs">
<div class="aui-progress-bar" style="width: 60%;"></div>
</div>
<p>.aui-progress-bar.aui-progress-primary</p>
<div class="aui-progress aui-progress">
<div class="aui-progress-bar aui-progress-primary" style="width: 60%;"></div>
</div>
<p>.aui-progress-bar.aui-progress-success</p>
<div class="aui-progress">
<div class="aui-progress-bar aui-progress-success" style="width: 60%;"></div>
</div>
<p>.aui-progress-bar.aui-progress-info</p>
<div class="aui-progress">
<div class="aui-progress-bar aui-progress-info" style="width: 60%;"></div>
</div>
<p>.aui-progress-bar.aui-progress-warning</p>
<div class="aui-progress">
<div class="aui-progress-bar aui-progress-warning" style="width: 60%;"></div>
</div>
<p>.aui-progress-bar.aui-progress-danger</p>
<div class="aui-progress">
<div class="aui-progress-bar aui-progress-danger" style="width: 60%;"></div>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript">
</script>
</html>
41 changes: 41 additions & 0 deletions html/progress_win.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>进度条</title>
<link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-warning" id="aui-header">
<a class="aui-btn aui-btn-warning aui-pull-left" tapmode onclick="closeWin()">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title">进度条</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
function closeWin(){
api.closeWin();
}
apiready = function(){
api.parseTapmode();
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
var body_h = $api.offset($api.dom('body')).h;
api.openFrame({
name: 'progress_frm',
url: 'progress_frm.html',
bounces: true,
rect: {
x: 0,
y: headerPos.h,
w: headerPos.w,
h: 'auto'
}
});
};
</script>
</html>
Loading

0 comments on commit 5223997

Please sign in to comment.