本文介绍了一种简单的单页应用(SPA)实现方式，通过HTML、CSS和JavaScript构建了一个包含头部、导航、内容区、底部及聊天窗口的SPA基本框架，并实现了聊天窗口的展开与收起动画。
目前看到这里，还不懂什么是单页应用，这不就是一个普通的点击滑开收缩的动画而已……作者写的那么复杂666
请转载此文的朋友务必附带原文链接，谢谢。
原文链接：http://xuyran.blog.51cto.com/11641754/1891022
spa.html:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
<
link
rel
=
"stylesheet"
href
=
"css/spa.css"
type
=
"text/css"
/>
<
link
rel
=
"stylesheet"
href
=
"css/spa.shell.css"
type
=
"text/css"
/>
<
style
>
</
style
>
<
script
src
=
"scripts/jquery.js"
></
script
>
<
script
src
=
"scripts/jquery.uriAnchor.js"
></
script
>
<
script
src
=
"scripts/spa.js"
></
script
>
<
script
src
=
"scripts/spa.shell.js"
></
script
>
<
script
>
$(function(){
spa.initModule(jQuery('#spa'));
})
</
script
>
</
head
>
<
body
>
<
div
id
=
"spa"
>
</
div
>
</
body
>
</
html
>
|
spa.js
|
1
2
3
4
5
6
|
var
spa = (
function
(){
var
initModule =
function
($container){
spa.shell.initModule(($container));
//执行spa.shell里面的initModule函数
};
return
{initModule:initModule};
//执行initModule函数
}())
|
spa.shell.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
spa.shell = (
function
(){
var
configMap = {
main_html:String()
+
'<div class="spa-shell-head">'
+
'<div class="spa-shell-head-logo"></div>'
+
'<div class="spa-shell-head-acct"></div>'
+
'<div class="spa-shell-head-search"></div>'
+
'</div>'
+
'<div class="spa-shell-main spa-x-closed">'
+
'<div class="spa-shell-main-nav"></div>'
+
'<div class="spa-shell-main-content"></div>'
+
'</div>'
+
'<div class="spa-shell-foot"></div>'
+
'<div class="spa-shell-chat"></div>'
+
'<div class="spa-shell-modal"></div>'
,
chat_extend_time:1000,
chat_retract_time:300,
chat_extend_height:450,
chat_retract_height:15,
chat_extend_title:
'click to retract'
,
chat_retracted_title:
'click to extend'
},
stateMap = {
$container:
null
,
is_chat_retracted:
true
},
jqueryMap = {},
setJqueryMap,initModule;
setJqueryMap =
function
($container){
var
$container = stateMap.$container;
jqueryMap = {
//给jqueryMap对象赋值
$container:$container,
$chat:$container.find(
'.spa-shell-chat'
)
};
}
// initModule = function($container){ //公开特权方法
// stateMap.$container = $container;
// $container.html(configMap.main_html);
// setJqueryMap();
// }
toggleChat =
function
(do_extend,callback){
var
px_chat_ht = jqueryMap.$chat.height(),
is_open = px_chat_ht === configMap.chat_extend_height,
is_closed = px_chat_ht === configMap.chat_retract_height,
is_sliding = !is_open && !is_closed;
if
(is_sliding){
return
false
;
}
if
(do_extend){
jqueryMap.$chat.animate({
height:configMap.chat_extend_height,
},configMap.chat_extend_time,
function
(){
jqueryMap.$chat.attr(
'title'
,configMap.chat_extend_title);
stateMap.is_chat_retracted =
false
;
if
(callback){
callback(jqueryMap.$chat);
}
});
return
true
;
}
jqueryMap.$chat.animate({
height:configMap.chat_retract_height
},configMap.chat_retract_time,
function
(){
jqueryMap.$chat.attr(
'title'
,configMap.chat_retracted_title);
stateMap.is_chat_retracted =
true
;
if
(callback){
callback(jqueryMap.$chat);
}
});
return
true
;
}
onClickChat =
function
(){
toggleChat(stateMap.is_chat_retracted);
return
false
;
}
initModule =
function
($container){
stateMap.$container = $container;
//给stateMap.$container对象赋值
$container.html(configMap.main_html);
setJqueryMap();
// setTimeout(function(){
// toggleChat(true);
// },3000)
// setTimeout(function(){
// toggleChat(false);
// },8000)
stateMap.is_chat_retracted =
true
;
jqueryMap.$chat.attr(
'title'
,configMap.chat_retracted_title)
.click(onClickChat);
}
return
{initModule:initModule};
}())
|
spa.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
/*
* spa.css
* Root namespace styles
*/
/** Begin reset */
* {
margin :
0
;
padding :
0
;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box;
}
h
1
,h
2
,h
3
,h
4
,h
5
,h
6
,p { margin-
bottom
:
10px
; }
ol,ul,dl { list-style-position :
inside
;}
/** End reset */
/** Begin standard selectors */
body {
font :
13px
'Trebuchet MS'
,
Verdana
,
Helvetica
,
Arial
,
sans-serif
;
color :
#444
;
background-color :
#888
;
}
a { text-decoration :
none
; }
a:link, a:visited { color : inherit; }
a:hover {
text-decoration
:
underline
; }
strong {
font-weight :
800
;
color :
#000
;
}
/** End standard selectors */
/** Begin spa namespace selectors */
#spa {
position :
absolute
;
top
:
8px
;
left
:
8px
;
bottom
:
8px
;
right
:
8px
;
min-height :
500px
;
min-width :
500px
;
overflow :
hidden
;
background-color :
#fff
;
border-radius :
0
8px
0
8px
;
}
/** End spa namespace selectors */
/** Begin utility selectors */
.spa-x-select {}
.spa-x-clearfloat {
height :
0
!important
;
float :
none
!important
;
visibility :
hidden
!important
;
clear :
both
!important
;
}
/** End utility selectors */
|
.spa.shell.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
.spa-shell-head,.spa-shell-head-logo,.spa-shell-head-acct,.spa-shell-head-search,
.spa-shell-main,.spa-shell-main-nav,.spa-shell-main-content,.spa-shell-foot,
.spa-shell-chat,.spa-shell-modal{
position: absolute;
}
.spa-shell-head {
top : 0;
left : 0;
right : 0;
height : 40px;
}
.spa-shell-head-logo {
top : 4px;
left : 4px;
height : 32px;
width : 128px;
background : orange;
}
.spa-shell-head-acct {
top : 4px;
right : 0;
width : 64px;
height : 32px;
background : green;
}
.spa-shell-head-search{
top:4px;
right:64px;
width:248px;
height: 32px;
background: blue;
}
.spa-shell-main{
top:40px;
left:0;
bottom: 40px;
right: 0;
}
.spa-shell-main-content,
.spa-shell-main-nav{
top: 0;
bottom: 0;
}
.spa-shell-main-nav{
width: 250px;
background:
#eee;
}
.spa-x-closed .spa-shell-main-nav{
width: 0;
}
.spa-shell-main-content{
left: 250px;
right: 0;
background:
#ddd;
}
.spa-x-closed .spa-shell-main-content{
left: 0;
}
.spa-shell-foot{
bottom: 0;
left: 0;
right: 0;
height: 40px;
}
.spa-shell-chat{
bottom: 0;
right: 0;
width: 300px;
height: 15px;
background: red;
z-index: 1;
}
.spa-shell-modal{
margin-top: -200px;
margin-left: -200px;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
background:
#FFFFFF;
border-radius: 3px;
z-index: 2;
}
|
浏览器界面如下：
本文转自 小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1891022
扫一扫
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
