利用PHP＋JavaScript打造AJAX搜索窗3
点击次数：19 次 发布日期：2008-11-26 11:41:55 作者：源代码网
|
源代码网推荐 源代码网推荐 完成这些元素之后，剩下的就是把它们添加到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/＞元素添加到文档片断最后。 源代码网推荐 源代码网推荐 当退出循环时，该文档片断被添加到divResultsPane以显示搜索结果: 源代码网推荐 源代码网推荐 divResultsPane.appendChild(oFragment); 源代码网推荐 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
