目前看到这里，还不懂什么是单页应用，这不就是一个普通的点击滑开收缩的动画而已……作者写的那么复杂666
请转载此文的朋友务必附带原文链接，谢谢。
原文链接：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;}
浏览器界面如下：
本文出自 “没有翅膀的菜鸟的进阶” 博客，请务必保留此出处http://xuyran.blog.51cto.com/11641754/1891022