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

教程Tag：暫無Tag,歡迎添加,賺取U幣!

推薦：解析PHP CSS實(shí)現(xiàn)打印簡(jiǎn)單數(shù)據(jù)報(bào)表功能
PHP CSS實(shí)現(xiàn)打印簡(jiǎn)單數(shù)據(jù)報(bào)表功能功能：實(shí)現(xiàn)打印日?qǐng)?bào)表的功能，定義了專門的打印樣式，隱藏了不該打印的控件并實(shí)現(xiàn)了分頁打印功能，表名：rec 字段：rec_id,rec_po,rec_part,rec_plant

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

以下為引用的內(nèi)容：

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

這段代碼負(fù)責(zé)把divHeading和divResultsPane元素添加到搜索窗，并且把搜索窗添加到頁面。

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

以下為引用的內(nèi)容：

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對(duì)象后，必須把divSearchBox返回到它的調(diào)用者以便進(jìn)行其它操作。你可以已經(jīng)猜出，position()方法負(fù)責(zé)放置該搜索框。它接受兩個(gè)參數(shù)：傳遞到drawResultBox()的事件對(duì)象和divSearchBox元素：

以下為引用的內(nèi)容：

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";
};

前兩行代碼得到左邊和頂部位置，用于放置搜索結(jié)果框。執(zhí)行這個(gè)操作要求使用兩種信息。首先是鼠標(biāo)的x和y坐標(biāo)（這些信息被存儲(chǔ)在clientX和clientY屬性）。

然而，這些坐標(biāo)還不足以正確定位結(jié)果框，因?yàn)閏lientX和clientY屬性返回相對(duì)于瀏覽器窗口客戶區(qū)的鼠標(biāo)位置，而不是頁面中的實(shí)際坐標(biāo)�？紤]到這一點(diǎn)，我們可以使用文檔元素的scrollLeft和scrollTop屬性。計(jì)算出最后的坐標(biāo)后，你能夠最后確定用戶點(diǎn)擊鼠標(biāo)的框中的位置。

五、顯示結(jié)果

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

以下為引用的內(nèi)容：

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

divResultsPane.removeChild(divResultsPane.firstChild);

這個(gè)方法以編程方式并通過DOM方法生成＜a/＞元素；這樣以來，這些元素將被添加到一個(gè)在第一行創(chuàng)建的文檔片斷中。下一行刪除添加在drawResultBox()中的正加載的＜div/＞元素。

下一步是創(chuàng)建這個(gè)鏈接：

以下為引用的內(nèi)容：

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);
}

這段代碼遍歷回饋的各個(gè)項(xiàng)，并且由該數(shù)據(jù)生成鏈接并把＜a/＞元素添加到文檔片斷最后。

分享：解析PHP技術(shù)：txtSQL安裝手冊(cè)中文版
txtsql的最大優(yōu)點(diǎn)之一是文檔很詳細(xì)，可惜，我在網(wǎng)上找了半天也找不到中文版的文檔，所以只好自己動(dòng)手，利人利已吧，不過自己的E文水平自己是很清楚的，希望大家看了不會(huì)笑掉大牙才好，還希