《单页web应用 javaScript从前端到后端》 1.2 spa.html小例子demo

2017-01-11 19:33:36来源:作者:人点击

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<style>			body{				width: 100%;				height: 100%;				overflow: hidden;				background-color: #777;			}			#spa{				position: absolute;				top: 8px;				left: 8px;				bottom:8px;				right: 8px;				border-radius: 8px 8px 0 8px;				background-color: #ffffff;			}			.spa-slider{				position: absolute;				bottom: 0;				right: 2px;				width: 300px;				height: 16px;				border-radius: 8px 0 0 0;				background-color: #f00;			}		</style>		<script src="scripts/jquery.js"></script>		<script>			var spa = (function($){				var configMap = { 					extended_height:434,					extended_title:'clcik to retract',					retracted_height:16,					retracted_title:'click to extend',					template_html:'<div class="spa-slider"><//div>'				},				$chatSlider,				toggelSlider,onClickSlider,initModule;				toggelSlider = function(){					var slider_height = $chatSlider.height();					if(slider_height === configMap.retracted_height){						$chatSlider						.animate({height:configMap.extended_height})						.attr("title",configMap.extended_title);						return true;						}else if(slider_height === configMap.extended_height){						$chatSlider						.animate({height:configMap.retracted_height})						.attr("title",configMap.retracted_title);						return true;					}					return false;				};				onClickSlider = function(event){					toggelSlider();					return false;				};				initModule = function($container){					$container.html(configMap.template_html);					$chatSlider = $container.find('.spa-slider');					$chatSlider.attr('title',configMap.retracted_title)					.click(onClickSlider);										return true;				};				return {initModule:initModule};			}(jQuery));						$(function(){					spa.initModule(jQuery('#spa'));			})		</script>	</head>	<body>		<div id="spa">		</div>	</body></html>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台