Single Page Web Application学习笔记（一）

时间 2019-11-11
标签 single page web application 学习笔记栏目 HTML 繁體版
原文原文链接
Single Page Web Application：在使用期间页面不会从新加载。能够认为是从Web服务器加载的富客户端。html
spa.htmljquery
  1 <!DOCTYPE html>
  2 <html lang="zh">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>在浏览器的右下角显示一个聊天滑块</title>
  6     
  7 <style>
  8 
  9 body {
 10     width   : 100%;
 11     height  : 100%;         /* 填充整个浏览器窗口 */
 12     overflow: hidden;       /* 隐藏任何溢出部分 */
 13     background-color: #777; /* 背景色设置为中灰色 */
 14 }
 15 
 16 /* 容纳单页应用全部内容的容器 */
 17 #spa {
 18     position: absolute;
 19     top      : 8px;
 20     left     : 8px;
 21     bottom   : 8px;
 22     right    : 8px;
 23     border-radius: 8px 8px 0 8px;
 24     background-color: #EEE;
 25 }
 26 
 27 /* 聊天滑块容器 */
 28 .spa-slider {
 29     position : absolute;
 30     bottom   : 0;
 31     right    : 2px;            /* 将单页应用固定在右下角 */
 32     width    : 300px;
 33     height   : 16px;
 34     cursor   : pointer;
 35     border-radius: 8px 0 0 0;  /* 左上角为圆角 */
 36     background-color: #008B8B;    /* 背景色为湖绿色 */
 37 }    
 38 
 39 </style>
 40 
 41 </head>
 42 <body>
 43 
 44 <div id="spa"></div>
 45    
 46 <script src="./js/jquery/2.1.1/jquery.js"></script>
 47 <script>
 48 var spa = (function($) {
 49 
 50   // 模块的配置变量 
 51   var 
 52       configMap = {
 53         extended_height  : 434,
 54         extended_tite    : 'Click to retract',
 55         retracted_height : 16,
 56         retracted_title  : 'Click to extend',
 57         template_html    : '<div class="spa-slider"><\/div>'
 58       },
 59       
 60   // 其它的模块的配置变量
 61   $chatSlider,
 62   toggleSlider, onClickSlider, initModule;
 63 
 64   // 展开和收起聊天滑块
 65   toggleSlider = function () {
 66 
 67     var
 68       slider_height = $chatSlider.height();
 69     
 70     if ( slider_height === configMap.retracted_height ) {
 71       $chatSlider
 72         .animate({ height : configMap.extended_height })
 73         .attr( 'title' , configMap.extended_tite );
 74       return true;
 75     }
 76       
 77     else if ( slider_height === configMap.extended_height ) {
 78       $chatSlider
 79         .animate({ height : configMap.retracted_height })
 80         .attr( 'title' , configMap.retracted_title );
 81       return true;
 82     }
 83       
 84     return false;
 85   }
 86   
 87   // 滑块点击事件处理
 88   onClickSlider = function () {
 89     toggleSlider();
 90   }
 91   
 92   // 初始化聊天模块 
 93   initModule = function ( $container ) {
 94     
 95     // 在容器中渲染 html 代码（在这里是聊天滑块的html代码）
 96     $container.html( configMap.template_html );
 97     
 98     // 找到聊天模块，绑定聊天模块的点击事件
 99     $chatSlider = $container.find( '.spa-slider' );
100     $chatSlider
101       .attr( 'title',  configMap.retracted_title)
102       .click( onClickSlider );
103     
104     return true;
105   }
106   
107   // 返回公开的接口方法
108   return { initModule : initModule };
109 
110 })(jQuery);
111 
112 jQuery(document).ready(function() {
113     spa.initModule( jQuery('#spa') );
114 });    
115 
116 </script>
117     
118 </body>
119 </html>
View Code