解讀利用PHP JavaScript打造AJAX搜索窗的方法(3)_PHP教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

      推薦:解析PHP CSS實現打印簡單數據報表功能
      PHP CSS實現打印簡單數據報表功能 功能:實現打印日報表的功能,定義了專門的打印樣式,隱藏了不該打印的控件并實現了分頁打印功能,表名:rec 字段:rec_id,rec_po,rec_part,rec_plant

      完成這些元素之后,剩下的就是把它們添加到divSearchBox元素中:

      以下為引用的內容:

      divSearchBox.className = "ajaxWebSearchBox";
      divSearchBox.appendChild(divHeading);
      divSearchBox.appendChild(divResultsPane);
      document.body.appendChild(divSearchBox);

      這段代碼負責把divHeading和divResultsPane元素添加到搜索窗,并且把搜索窗添加到頁面。

      在drawResultBox()中的最后一步是確定新繪制的小框的位置并且把divSearchBox返回到它的調用者:

      以下為引用的內容:

      msnWebSearch.drawResultBox = function (e) {
       var divSearchBox= document.createElement("div");
       var divHeading = document.createElement("div");
       var divResultsPane = document.createElement("div");
       var aCloseLink = document.createElement("a");
       aCloseLink.href = "#";
       aCloseLink.className = "ajaxWebSearchCloseLink";
       aCloseLink.onclick = this.close;
       aCloseLink.appendChild(document.createTextNode("X"));
       divHeading.className = "ajaxWebSearchHeading";
       divHeading.appendChild(document.createTextNode("MSN Search Results"));
       divHeading.appendChild(aCloseLink);
       var divLoading = document.createElement("div");
       divLoading.appendChild(document.createTextNode("Loading Search Feed"));
       divResultsPane.className = "ajaxWebSearchResults";
       divResultsPane.appendChild(divLoading);
       divSearchBox.className = "ajaxWebSearchBox";
       divSearchBox.appendChild(divHeading);
       divSearchBox.appendChild(divResultsPane);
       document.body.appendChild(divSearchBox);
       this.position(e, divSearchBox);
       return divSearchBox;
      };

      通過這種方式建立msnWebSearch對象后,必須把divSearchBox返回到它的調用者以便進行其它操作。你可以已經猜出,position()方法負責放置該搜索框。它接受兩個參數:傳遞到drawResultBox()的事件對象和divSearchBox元素:

      以下為引用的內容:

      msnWebSearch.position = function (e, divSearchBox) {
       var x = e.clientX document.documentElement.scrollLeft;
       var y = e.clientY document.documentElement.scrollTop;
       divSearchBox.style.left = x "px";
       divSearchBox.style.top = y "px";
      };

      前兩行代碼得到左邊和頂部位置,用于放置搜索結果框。執行這個操作要求使用兩種信息。首先是鼠標的x和y坐標(這些信息被存儲在clientX和clientY屬性)。

      然而,這些坐標還不足以正確定位結果框,因為clientX和clientY屬性返回相對于瀏覽器窗口客戶區的鼠標位置,而不是頁面中的實際坐標。考慮到這一點,我們可以使用文檔元素的scrollLeft和scrollTop屬性。計算出最后的坐標后,你能夠最后確定用戶點擊鼠標的框中的位置。

      五、 顯示結果

      populateResults()方法負責使用搜索結果填充結果欄。它接受兩個參數:包含該結果的元素和一個XParser對象(XParser是一個基于JavaScript的RSS讀取器,可從www.wdonline.com/javascript/xparser/自由下載):

      以下為引用的內容:

      msnWebSearch.populateResults = function(divResultsPane,oParser){
       var oFragment = document.createDocumentFragment();

      divResultsPane.removeChild(divResultsPane.firstChild);

      這個方法以編程方式并通過DOM方法生成<a/>元素;這樣以來,這些元素將被添加到一個在第一行創建的文檔片斷中。下一行刪除添加在drawResultBox()中的正加載的<div/>元素。

      下一步是創建這個鏈接:

      以下為引用的內容:

      for (var i = 0; i < oParser.items.length; i ) {
       var oItem = oParser.items[i];

       var aResultLink = document.createElement("a");
       aResultLink.href = oItem.link.value;
       aResultLink.className = "ajaxWebSearchLink";
       aResultLink.target = "_new";
       aResultLink.appendChild(document.createTextNode(oItem.title.value));

       oFragment.appendChild(aResultLink);
      }

      這段代碼遍歷回饋的各個項,并且由該數據生成鏈接并把<a/>元素添加到文檔片斷最后。

      分享:解析PHP技術:txtSQL安裝手冊中文版
      txtsql的最大優點之一是文檔很詳細,可惜,我在網上找了半天也找不到中文版的文檔,所以只好自己動手,利人利已吧,不過自己的E文水平自己是很清楚的,希望大家看了不會笑掉大牙才好,還希

      來源:模板無憂//所屬分類:PHP教程/更新時間:2009-09-17
      相關PHP教程