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

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

推荐:解析PHP CSS实现打印简单数据报表功能
PHP CSS实现打印简单数据报表功能 功能:实现打印日报表的功能,定义了专门的打印样式,隐藏了不该打印的控件并实现了分页打印功能,表名:rec 字段:rec_id,rec_po,rec_part,rec_plant

当退出循环时,该文档片断被添加到divResultsPane以显示搜索结果:

divResultsPane.appendChild(oFragment);

六、 关闭结果框

为了关闭搜索结果框,msnWebSearch对象提供了close()方法。close()方法负责处理该链接的onclick事件(关闭该小框):

以下为引用的内容:

msnWebSearch.close = function () {
 var divSearchBox = this.parentNode.parentNode;
 document.body.removeChild(divSearchBox);

 return false;
};

该搜索框其实并没有关闭;事实上,它被从该文档中删除了。为此,需要检索divSearchBox元素。第一行代码完成这一任务-通过检索这个元素的父结点的父结点实现。因为close()负责处理onclick事件,所以this引用这一链接。下一行从文档中删除divSearchBox元素。最后一行,返回false,从而强迫浏览器不要沿用一个链接的缺省行为(转到在href属性中标注的位置)。

七、 构建搜索接口

msnWebSearch对象的最后一个方法是search(),它提供执行一个搜索的接口。你可以使用一个元素的onclick事件来调用search()。它接受两个方法:一个事件对象和搜索术语:

以下为引用的内容:

msnWebSearch.search = function (e,sSearchTerm) {
 var divSearchBox = this.drawResultBox(e);
 var url = encodeURI("websearch.php?search=" sSearchTerm);
 var oParser = new XParser(url);
 oParser.onload = function () {
  msnWebSearch.populateResults(divSearchBox.childNodes[1],oParser);
 };
};

第一行调用drawResultBox()方法并且把事件e传递给它。下一行编码该URL以实现合适的转换。这个URL被传递给XParser构造器以创建一个新的分析器。当搜索回馈完成加载并使用结果填充搜索框时,该分析器的onload事件处理器调用populateResult()方法。
当然,构建这个搜索框的一个理由是,使其更适合于你自己的站点的外观。

八、 定制Web搜索框

借助于CSS,你可以容易地为你的现有站点定制搜索框,并且使你以后的任何重新设计都变得非常容易。

首先要讨论的CSS类是ajaxWebSearchBox(该类实现搜索框)。因为搜索框要确定位置,所以它必须要有一个绝对位置:

以下为引用的内容:

.ajaxWebSearchBox
{
 position: absolute;
 background-color: #0d1e4a;
 width: 500px;
 padding: 1px;
}

在此,绝对位置是唯一的要求。所有的其它属性都是根据你的口味可选的。在这个示例中,该框有一个微蓝色的背景,一个500像素的宽度,以及在四边上各有1个像素的填充。这个填充导致围绕该框的内容的是1个像素宽的边界。

下一个类是ajaxWebSearchHeading,它包含该框的头部文本和关闭链接。为了把关闭链接放在右上角,它使用绝对位置。因为这个原因,它要求ajaxWebSearchHeading使用一个相对位置:

以下为引用的内容:

.ajaxWebSearchHeading
{
 position: relative;
 background-color: #1162cc;
 font: bold 14px tahoma;
 height: 21px;
 color: white;
 padding: 3px 0px 0px 2px;
}

在此,唯一要求的属性也是position属性。其它的属性有助于给出该元素一个好看的外观。其背景颜色是浅蓝色,而文本部分是白色,14像素高且是Tahoma字体。该元素的高度是21个像素并且在顶部和左边都填充以边界。

分享:解析PHP技术:txtSQL安装手册中文版
txtsql的最大优点之一是文档很详细,可惜,我在网上找了半天也找不到中文版的文档,所以只好自己动手,利人利已吧,不过自己的E文水平自己是很清楚的,希望大家看了不会笑掉大牙才好,还希

来源:模板无忧//所属分类:PHP教程/更新时间:2009-09-17
相关PHP教程