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

教程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文水平自己是很清楚的，希望大家看了不會笑掉大牙才好，還希