Skip to content

Commit 29dfbb0

Browse files
jitukejijitukeji
committed
v1.1.8+
1 parent 142ff42 commit 29dfbb0

25 files changed

+1868
-81
lines changed

‎css/aui-calendar-slide.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/*
2+
* =========================================================================
3+
* APIClud - AUI UI 框架 流浪男 QQ：343757327 http://www.auicss.com
4+
* 日历样式表
5+
* Verson 0.0.1
6+
* =========================================================================
7+
*/
8+
table {
9+
border-spacing: 0;
10+
border-collapse: collapse;
11+
width: 100%;
12+
max-width: 100%;
13+
text-align: center;
14+
}
15+
td,
16+
th {
17+
padding: 0;
18+
font-weight: 400;
19+
display: table-cell;
20+
vertical-align: inherit;
21+
}
22+
tr {
23+
display: table-row;
24+
vertical-align: inherit;
25+
border-color: inherit;
26+
}
27+
.aui-calendar {
28+
padding: 15px;
29+
background: #ffffff;
30+
color: #999999;
31+
32+
}
33+
.aui-calendar > table {
34+
list-style: none;
35+
margin: 0;
36+
padding: 0;
37+
height: 100%;
38+
width: 100%;
39+
overflow: hidden;
40+
position: absolute;
41+
-webkit-backface-visibility: hidden;
42+
background: #ffffff;
43+
/*-webkit-animation: flipInX 0.3s;
44+
animation: flipInX 0.3s;*/
45+
}
46+
.aui-calendar th {
47+
padding: 5px 0;
48+
}
49+
.aui-calendar .aui-calendar-body td {
50+
padding: 15px 0;
51+
position: relative;
52+
touch-action: none;
53+
}
54+
.aui-calendar td p {
55+
font-size: 10px;
56+
}
57+
.aui-calendar .aui-calendar-header {
58+
position: relative;
59+
border-bottom: 1px solid #eeeeee;
60+
}
61+
.aui-calendar .aui-calendar-header > tr:first-child {
62+
font-size: 1.2em;
63+
}
64+
.aui-calendar .today {
65+
border: 1px solid #e74c3c;
66+
border-radius: 50%;
67+
width: 3em;
68+
height: 3em;
69+
left: 50%;
70+
top: 50%;
71+
margin-left: -1.5em;
72+
margin-top: -1.5em;
73+
position: absolute;
74+
background: transparent;
75+
}
76+
.aui-calendar .bandge {
77+
width: 6px;
78+
height: 6px;
79+
background: #ff9900;
80+
border-radius: 50%;
81+
position: absolute;
82+
top: 14px;
83+
left: 50%;
84+
margin-left: -3px;
85+
}
86+
.aui-calendar .active {
87+
border-radius: 50%;
88+
width: 3em;
89+
height: 3em;
90+
left: 50%;
91+
top: 50%;
92+
margin-left: -1.5em;
93+
margin-top: -1.5em;
94+
position: absolute;
95+
background: rgba(102,102,102,0.1);
96+
-webkit-animation: flipInX 0.3s;
97+
animation: flipInX 0.3s;
98+
99+
}
100+
.aui-calendar .before-day,
101+
.aui-calendar .before-day p {
102+
color: #ccc !important;
103+
/*background: #fafafa;*/
104+
}
105+
.aui-calendar .before-day .today {
106+
border-color: #ffcc00 !important;
107+
}
108+
109+
@-webkit-keyframes flipInX {
110+
from {
111+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
112+
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
113+
-webkit-animation-timing-function: ease-in;
114+
animation-timing-function: ease-in;
115+
opacity: 0.8;
116+
}
117+
to {
118+
-webkit-transform: perspective(400px);
119+
transform: perspective(400px);
120+
}
121+
}

‎css/aui-calendar.css‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/*
2+
* =========================================================================
3+
* APIClud - AUI UI 框架 流浪男 QQ：343757327 http://www.auicss.com
4+
* 日历样式表
5+
* Verson 0.0.1
6+
* =========================================================================
7+
*/
8+
table {
9+
border-spacing: 0;
10+
border-collapse: collapse;
11+
width: 100%;
12+
max-width: 100%;
13+
text-align: center;
14+
}
15+
td,
16+
th {
17+
padding: 0;
18+
font-weight: 400;
19+
display: table-cell;
20+
vertical-align: inherit;
21+
}
22+
tr {
23+
display: table-row;
24+
vertical-align: inherit;
25+
border-color: inherit;
26+
}
27+
.aui-calendar {
28+
padding: 15px;
29+
background: #ffffff;
30+
color: #999999;
31+
32+
}
33+
.aui-calendar > table {
34+
margin-bottom: 15px;
35+
/*-webkit-animation: flipInX 0.3s;
36+
animation: flipInX 0.3s;*/
37+
}
38+
.aui-calendar th {
39+
padding: 5px 0;
40+
}
41+
.aui-calendar .aui-calendar-body td {
42+
padding: 15px 0;
43+
position: relative;
44+
touch-action: none;
45+
}
46+
.aui-calendar td p {
47+
font-size: 10px;
48+
}
49+
.aui-calendar .aui-calendar-header {
50+
position: relative;
51+
border-bottom: 1px solid #eeeeee;
52+
}
53+
.aui-calendar .aui-calendar-header > tr:first-child {
54+
font-size: 1.2em;
55+
}
56+
.aui-calendar .today {
57+
border: 1px solid #e74c3c;
58+
border-radius: 50%;
59+
width: 3em;
60+
height: 3em;
61+
left: 50%;
62+
top: 50%;
63+
margin-left: -1.5em;
64+
margin-top: -1.5em;
65+
position: absolute;
66+
background: transparent;
67+
}
68+
.aui-calendar .bandge {
69+
width: 6px;
70+
height: 6px;
71+
background: #ff9900;
72+
border-radius: 50%;
73+
position: absolute;
74+
top: 14px;
75+
left: 50%;
76+
margin-left: -3px;
77+
}
78+
.aui-calendar .active {
79+
border-radius: 50%;
80+
width: 3em;
81+
height: 3em;
82+
left: 50%;
83+
top: 50%;
84+
margin-left: -1.5em;
85+
margin-top: -1.5em;
86+
position: absolute;
87+
background: rgba(102,102,102,0.1);
88+
-webkit-animation: flipInX 0.3s;
89+
animation: flipInX 0.3s;
90+
91+
}
92+
.aui-calendar .before-day,
93+
.aui-calendar .before-day p {
94+
color: #ccc !important;
95+
/*background: #fafafa;*/
96+
}
97+
.aui-calendar .before-day .today {
98+
border-color: #ffcc00 !important;
99+
}
100+
101+
@-webkit-keyframes flipInX {
102+
from {
103+
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
104+
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
105+
-webkit-animation-timing-function: ease-in;
106+
animation-timing-function: ease-in;
107+
opacity: 0.8;
108+
}
109+
to {
110+
-webkit-transform: perspective(400px);
111+
transform: perspective(400px);
112+
}
113+
}

‎css/aui-slider-up.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/*
2+
* =========================================================================
3+
* APIClud - AUI UI 框架 流浪男 QQ：343757327 http://www.auicss.com
4+
* 全屏上下滑动组件
5+
* Verson 0.0.1
6+
* =========================================================================
7+
*/
8+
.aui-slider-nav {
9+
position: relative;
10+
background: #000;
11+
}
12+
.aui-slider-nav ul {
13+
position: relative;
14+
}
15+
.aui-slider-nav ul,
16+
.aui-slider-nav li {
17+
list-style: none;
18+
margin: 0;
19+
padding: 0;
20+
height: 100%;
21+
width: 100%;
22+
overflow: hidden;
23+
background: #000000;
24+
color: #ffffff;
25+
}
26+
.aui-slider-nav li {
27+
position: absolute;
28+
-webkit-backface-visibility: hidden;
29+
}
30+
.aui-slider-nav li img {
31+
width: 100%;
32+
height: 100%;
33+
}
34+
.aui-up-slide {
35+
position: absolute;
36+
bottom: 10px;
37+
left: 50%;
38+
width: 20px;
39+
height: 20px;
40+
z-index: 999999999;
41+
margin-left: -10px;
42+
color: #ffffff;
43+
text-align: center;
44+
font-weight: 700;
45+
}
46+
.aui-up-slide .aui-iconfont {
47+
font-size: 28px;
48+
}
49+
.aui-slider-close {
50+
background: rgba(102,102,102,0.7);
51+
top: 30px;
52+
right: 10px;
53+
padding: 5px 10px;
54+
color: #ffffff;
55+
position: fixed;
56+
z-index: 999999;
57+
border-radius: 30px;
58+
font-size: 12px;
59+
}
60+
@keyframes zoomIn {
61+
from {
62+
opacity: 0;
63+
-webkit-transform: scale3d(.3, .3, .3);
64+
transform: scale3d(.3, .3, .3);
65+
}
66+
50% {
67+
opacity: 1;
68+
}
69+
}
70+
.zoomIn {
71+
-webkit-animation: zoomIn 1s;
72+
animation: zoomIn 1s;
73+
}

‎html/button_frm.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<body>
1818
<div class="aui-content aui-content-padded">
1919
<p>普通按钮</p>
20-
<p><button class="aui-btn">默认按钮(default)</button></p>
20+
<p><button class="aui-btn">默认按钮(default)</button></p>
2121
<p><button class="aui-btn aui-btn-primary" onclick="demo();">默认按钮(primary)</button></p>
2222
<p><button class="aui-btn aui-btn-success">默认按钮(success)</button></p>
2323
<p><button class="aui-btn aui-btn-info">默认按钮(info)</button></p>

‎html/calendar_frm.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
6+
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
7+
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
8+
<link rel="stylesheet" type="text/css" href="../css/aui-calendar.css" />
9+
<title>calendar</title>
10+
</head>
11+
<body>
12+
<div class="aui-tips aui-tips-primary">
13+
<div class="aui-tips-content aui-ellipsis-1">
14+
当前选择的日期为：<span id="result"></span>
15+
</div>
16+
</div>
17+
<div id="calendar" class="aui-content aui-calendar"></div>
18+
</body>
19+
<script type="text/javascript" src="../script/api.js"></script>
20+
<script type="text/javascript" src="../script/aui-tap.js"></script>
21+
<script type="text/javascript" src="../script/aui-calendar.js"></script>
22+
<script type="text/javascript">
23+
apiready = function(){
24+
/**
25+
* 日历
26+
* $aui.calendar(el,opts,callback);
27+
* startDate = '2016-03-20'开始日期，不传时为今天，当没有天传入时，默认从当月开始日期
28+
* endDate = '2016-04-28' 结束日期
29+
* beforeStartDateClick 默认false，开始日期之前的当月是否允许点击
30+
* 当开始日期和结束日期都为空时,默认显示当月日历
31+
* 返回数据为点击某天后结果，格式 {status:'success',date:'2016-01-01'}
32+
**
33+
$aui.calendar($api.byId("calendar"),{
34+
startDate:'2016-03',
35+
endDate:'2016-08',
36+
beforeStartDateClick : false
37+
},function(ret){
38+
if(ret){
39+
// 返回点击的日期
40+
// alert(JSON.stringify(ret));
41+
}
42+
})
43+
*/
44+
var todayDate = new Date();
45+
var startDate = todayDate.getFullYear()+'-'+(todayDate.getMonth()+1)+'-'+todayDate.getDate();
46+
var endDate = (todayDate.getFullYear())+'-'+(todayDate.getMonth()+5);
47+
$aui.calendar($api.byId("calendar"),{
48+
startDate : startDate,
49+
endDate : endDate,
50+
beforeStartDateClick : false // 是否允许开始日期之前的可以点击，默认为false
51+
},function(ret){
52+
if(ret){
53+
// 返回点击的日期
54+
// alert(JSON.stringify(ret));
55+
$api.text($api.byId("result"),ret.date);
56+
}
57+
})
58+
}
59+
</script>
60+
</html>

0 commit comments

Comments
 (0)