码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-01-10 00:06:49      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:web前端开发

<!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>


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

标签:web前端开发

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!