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>