《单页web应用 javaScript从前端到后端》3.1 开发shell小例子demo

2017-01-11 19:34:06来源:作者:人点击

目前看到这里,还不懂什么是单页应用,这不就是一个普通的点击滑开收缩的动画而已……作者写的那么复杂666
请转载此文的朋友务必附带原文链接,谢谢。原文链接:http://xuyran.blog.51cto.com/11641754/1891022spa.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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台