Now see here, still do not understand what is a single page application, this is not a normal click to slide the contraction of the animation just ... The author's so complicated. 666
Please reprint this article of friends must accompany the original link, thank you.
Original link: http://xuyran.blog.51cto.com/11641754/1891022
spa.html:
<!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
var spa = (function(){
var initModule = function($container){
spa.shell.initModule(($container)); //执行spa.shell里面的initModule函数
};
return {initModule:initModule}; //执行initModule函数
}())
spa.shell.js
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
/*
* 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;
}
h1,h2,h3,h4,h5,h6,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
.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;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
