當柳上原的風吹向天際的時候...

          真正的快樂來源于創造

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks

          公告


          常用鏈接

          留言簿(3)

          最新隨筆

          積分與排名

          • 積分 - 394690
          • 排名 - 145

          最新評論

          閱讀排行榜

          使用Ajax從后臺取得反饋信息后總要在前臺顯示給客戶看,顯示方式從簡單到復雜一般有三種:1.使用alert顯示文字,這種方式簡便易用,但容易中斷用戶操作,效果也太死板;2.改變頁面某一區域的文字或是圖片,這種使用起來也比較方便,實現也不復雜;3.使用新窗口顯示,這種效果最好,但實現復雜些。本例中采用第二種方式。

          Ajax提示信息出現的位置在于次級菜單欄的下方,邊欄和內容欄的上方,由兩部分組成:圖標和文字。


          消息欄的HTML代碼如下:
          <div id="msgDiv">
              
          <span id="iconSpan">
                  
          <img src="web/img/icon/ok.gif" width="24px" height="24px"/>
              
          </span>
              
          <span id="msgSpan">
                  fdsfdsfsdfsdfsdfsdfsdfsdfsdfsd
              
          </span>
          </div>

          定義它們的CSS如下:
          #msgDiv{
              display
          :none;
          }
          #iconSpan
          {
              vertical-align
          :middle;
          }
          #msgSpan
          {
              height
          :100%;
              font-size
          :16px;         
              color
          :#404040;     
          }

          在沒有Ajax消息前,它們整體是不表現的,通過display:none進行限制;有消息發生后,再使用JavaScript改變msgDiv,iconSpan,msgSpan的狀態和內容即可,基本原理很簡單,但我們不希望把代碼弄亂,因此需要用類整合一下。

          其中iconSpan中將顯示的圖標共有四種:加載圖標,用于在從服務器取回響應前;完成圖標,用于從服務器取得正確信息后;警告圖標,用于從服務器取得錯誤信息后;錯誤圖標,用于無法取得來自服務器的響應時。這樣,用戶在仔細查看文字前,就能大致了解發生的情況,為了使用上的方便,我特地把Ajax消息顯示器組合成了一個Msger類。如下所示:
          /*************************
          *
          *   Class:Msger
          *   2009-9-9
          *************************
          */
          //-- Contructor
          function Msger(){
              
          this.msgDiv=$("msgDiv");
              
          this.iconSpan=$("iconSpan");
              
          this.msgSpan=$("msgSpan");
              // 這里是四種圖標
              
          this.icons=new Array;
              
          this.icons[0]="<img src='web/img/icon/error.gif' width='24px' height='24px'/>";
              
          this.icons[1]="<img src='web/img/icon/loading.gif' width='24px' height='24px'/>";
              
          this.icons[2]="<img src='web/img/icon/ok.gif' width='24px' height='24px'/>";
              
          this.icons[3]="<img src='web/img/icon/warning.gif' width='24px' height='24px'/>";
              
              
          this.timer=new Object;
          }
          // 顯示錯誤信息,出現后不消失
          Msger.prototype.showErrorMsg
          =function(msg){
              
          this.msgDiv.style.display="block";
              
          this.iconSpan.innerHTML=this.icons[0];
              
          this.msgSpan.innerHTML=msg;
              
          this.msgSpan.style.color="#ff0000";
          }
          // 顯示載入信息,出現后不消失,因為很快會被其他信息替代
          Msger.prototype.showLoadingMsg
          =function(msg){
              
          this.msgDiv.style.display="block";
              
          this.iconSpan.innerHTML=this.icons[1];
              
          this.msgSpan.innerHTML=msg;
              
          this.msgSpan.style.color="#404040";
          }
          // 顯示正確消息,使用后漸漸消失
          Msger.prototype.showOkMsg
          =function(msg){
              
          this.msgDiv.style.display="block";
              
          this.iconSpan.innerHTML=this.icons[2];
              
          this.msgSpan.innerHTML=msg;
              
          this.msgSpan.style.color="#404040";
                  
              
          this.timer=setTimeout("msger.fadeout()",2000);
          }
          // 顯示警告消息,出現一段時間后消失
          Msger.prototype.showWarningMsg
          =function(msg){
              
          this.msgDiv.style.display="block";
              
          this.iconSpan.innerHTML=this.icons[3];
              
          this.msgSpan.innerHTML=msg;
              
              
          this.msgSpan.style.color="#f5692e";
              
              
          this.timer=setTimeout("msger.hide()",5000);
          }
          // 隱藏
          Msger.prototype.hide
          =function(){
              
          this.msgDiv.style.display="none";
              clearTimeout(
          this.timer);
          }
          // 漸漸消失
          Msger.prototype.fadeout
          =function(){
              
          var colorRGB=this.msgSpan.style.color;
              
          var color=parseInt(colorRGB.slice(1,3),16)+3;
              
              
          if(color<256){
                  
          var v1=(Math.floor(color/16)).toString(16);
                  
          var v2=(Math.floor(color%16)).toString(16);
                  
          var colorStr="#"+v1+""+v2+v1+""+v2+v1+""+v2;
                  
          this.msgSpan.style.color=colorStr;
                  
                  
          this.timer=setTimeout("msger.fadeout()",120);
              }
              
          else{
                  
          this.hide();
              }        
          }

          上面這些函數都好理解,fadeout函數還需要贅述一下,讓文字漸漸消失是通過修改文字的顏色實現的,使它不斷向純白色靠攏就行,另外使用setTimeout調用自身的寫法“msger.fadeout()”要值得注意。以上函數大家務必要理解。

          使用上就比以前簡化了,以下是用戶列表頁面的例子:
          <script language="javascript">
          <!--
          //-- 消息顯示器
          var msger;

          /*****************************************************
          * 窗口載入時調用的啟動函數
          ****************************************************
          */
          window.onload
          =function(){
              .
              
              
          // 初始化消息顯示器
              msger=new Msger;
              
              .
          }


          /*****************************************************
          * 選擇成員加入Session
          ****************************************************
          */
          function selectMember(id){
              msger.showLoadingMsg(
          "將選擇的用戶id'"+id+"'加入項目備選用戶名單中");
              
              
          new Ajax.Request(prjName+'SelectUsersIntoSession.do?id='+id,
                     {     
                         method:'get',     
                         onSuccess: 
          function(ajaxObj){                            
                              
          var status=ajaxObj.responseXML.getElementsByTagName("status")[0].firstChild.data;
                              
          // alert(ajaxObj.responseText);
                              
                              
          if(status=="ok"){    
                                  
          var text=ajaxObj.responseXML.getElementsByTagName("text")[0].firstChild.data;
                                  msger.showOkMsg(text);
                              }
                              
          else{
                                  
          // 返回錯誤信息
                                  var text=ajaxObj.responseXML.getElementsByTagName("text")[0].firstChild.data;
                                  msger.showWarningMsg(text);
                              }
                         },     
                         onFailure: 
          function(){ 
                             msger.showErrorMsg(
          "無法取得服務器的響應");
                         }   
                      }
                    );  
          }
          //-->
          </script>

          其中,類實例msger與前面的“this.timer=setTimeout("msger.fadeout()",120);”中的msger是呼應的,需要注意。

          好了,就到這里,全體代碼請到“

          ProjectManager框架下載(更新時間2009年9月10日14:59:48)下載。




          --全文完--



          posted on 2009-09-10 14:46 何楊 閱讀(201) 評論(0)  編輯  收藏
          主站蜘蛛池模板: 浦北县| 湖北省| 石屏县| 福鼎市| 临清市| 太湖县| 博罗县| 大宁县| 湖州市| 宜川县| 宣武区| 会泽县| 黄大仙区| 葫芦岛市| 华安县| 阿巴嘎旗| 三门县| 宁都县| 锦州市| 磴口县| 桓仁| 民勤县| 威信县| 曲松县| 蓝山县| 康平县| 遵义市| 土默特左旗| 光泽县| 贵德县| 濮阳市| 乌恰县| 荆州市| 富宁县| 深泽县| 聊城市| 宁远县| 宜宾县| 北碚区| 石林| 手游|