標籤：js
目前看到這裡，還不懂什麼是單頁應用，這不就是一個普通的點擊滑開收縮的動畫而已……作者寫的那麼複雜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;}
瀏覽器介面如下：
650) this.width=650;" src="https://s3.51cto.com/wyfs02/M02/8C/B5/wKioL1h1rcqBIJL8AAA2oteRjRU677.png-wh_500x0-wm_3-wmp_4-s_3242946256.png" title="QQ20170111115957.png" alt="wKioL1h1rcqBIJL8AAA2oteRjRU677.png-wh_50" />
本文出自 “沒有翅膀的菜鳥的進階” 部落格，請務必保留此出處http://xuyran.blog.51cto.com/11641754/1891022
《單頁web應用 javaScript從前端到後端》3.1 開發shell小例子demo
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
