构建第一个单页应用
1.html页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src='js/js.js'></script>
</head>
<body>
<div id='spa'></div>
</body>
</html>
2.css内容
body{ 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: #fff; } .spa_slider{ position: absolute; bottom: 0; right: 2px; 300px; height: 16px; cursor: pointer; border-radius: 8px 0 0 0; background-color:#f00; }
3.js脚本内容
/* Jslint settings */ //module spa var spa = (function($){ //模块作用域参数配置 var configMap = { extended_height:200, extended_title:"click to retract", retracted_height:16, retracted_title:'click to extend', template_html:"<div class='spa_slider'></div>" },$chatSlider,toggleSlider,onClickSlider,initModule; //点击切换方法 toggleSlider = function(){ var slider_height = $chatSlider.height(); if( slider_height === configMap.retracted_height ){ $chatSlider .animate({ height : configMap.extended_height },100,"swing") .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(evevt){ toggleSlider(); 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))
4、页面中调用模块方法
<script type="text/javascript"> $(function(){ spa.initModule(jQuery('#spa')) }) </script>