利用PHP＋JavaScript打造AJAX搜索窗(4)

日期:2006-09-27 作者:喜騰小二來源:PHPChina

八、定制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個像素並且在頂部和左邊都填充以邊界。

　　如前麵所述，該關閉鏈接的位置是絕對的：

a.ajaxWebSearchCloseLink
{
　position: absolute;
　right: 5px;
　top: 3px;
　text-decoration: none;
　color: white;
}
a:hover.ajaxWebSearchCloseLink
{
　color: red;
}

　　該元素被放置在距右邊5個像素，距頂部3個像素的位置（該元素被放在右上角）。這個鏈接沒有任何文本修飾並且顔色呈白色。當用戶的鼠標停在該鏈接上時，文本顔色變紅。

　　注意，這裡沒有使用訪問過的或活動的"假"類。這是因為該窗口總是忽略這個鏈接的href屬性(它已經在它的事件處理器中返回了false)。因此，該鏈接從來不會真正處於活動或被訪問狀態。

　　然後，ajaxWebSearchResults類使結果欄的風格如下：

.ajaxWebSearchResults
{
　background-color: #d3e5fa;
　padding: 5px;
}

　　這個元素不要求使用CSS屬性。現有屬性僅用於定義結果欄並且使它比較容易讀取。背景顔色是一個淺藍色並且圍繞邊緣有5個像素的填充。當然，妳能夠定制加載消息的風格：

.ajaxWebSearchResults div
{
　text-align: center;
　font: bold 14px tahoma;
　color:#0a246a;
}

　　這個元素沒有一個類名，但是妳仍然能夠通過使用前麵的示例中展示的parent child標誌控制它的風格。這個示例把文本放置在＜div/＞元素的中央，並且給它一個加粗藍色的字體，且有14個像素高。

　　最後一個妳需要風格化的元素是結果鏈接。這些鏈接有一個類名叫ajaxWebSearchLink：

a.ajaxWebSearchLink
{
　font: 12px tahoma;
　padding: 2px;
　display: block;
　color: #0a246a;
}
a:hover.ajaxWebSearchLink
{
　color: white;
　background-color: #316ac5;
}
a:visited.ajaxWebSearchLink
{
　color: purple;
}

　　唯一要求的屬性是display屬性（被設置為block）。這使每一個鏈接都能夠在它自己的行上顯示。填充空白部分大約有兩個像素寬，使各個鏈接之間分開一些，從而使它們更易於讀取。字體名為Tahoma並且有12像素高。它們的顔色是暗藍色，與ajaxWebSearchResults的淺藍色背景形成對照。

　　當用戶在這些鏈接上移動鼠標時，背景顔色被設置為藍色，而文本顔色改變為白色。

　　在前麵的代碼的最後一條規則中訪問過的"假"類被設置。這是為了給用戶提供用戶接口暗示-它們已經被使用過。通過把訪問過的"假"類設置為顯示一種紫色，用戶就可以知道它們已經訪問過那個鏈接，從而節省他們的時間-不必再訪問一個他們可能不想看的页面。

　　現在，讓我們來看一下如何實現搜索框。

　　九、實現Web搜索搜索框

　　實現這個搜索框是很簡單的。首先，妳必須把websearch.php文件上傳到妳的web服務器(當然，必須安裝PHP)。然後，妳需要一個HTML 文檔來引用所有的組件。msnWebSearch對象依賴於XParser類，這個類又依賴於zXml庫(可從 www.nczonline.net/downloads/下載)。妳必須引用下麵這些文件：

　　為了執行搜索，應該把msnWebSearch.search()方法設置為該元素的onclick處理器：

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞Ajax WebSearch＜/title＞
＜link rel="stylesheet" type="text/css" href="css/websearch.css" /＞
＜script type="text/javascript" src="js/zxml.js"＞＜/script＞
＜script type="text/javascript" src="js/xparser.js"＞＜/script＞
＜script type="text/javascript" src="js/websearch.js"＞＜/script＞
＜/head＞＜body＞
＜a href="#" onclick='msnWebSearch.search(event，""Professional Ajax"");
return false;'＞Search for "Professional Ajax"＜/a＞
＜br /＞＜br /＞＜br /＞＜br /＞
＜a href="#" onclick='msnWebSearch.search(event，"Professional Ajax");
return false;'＞Search for Professional Ajax＜/a＞
＜/body＞
＜/html＞

　　第一個新的鏈接執行一個針對準確詞組"Professional Ajax"的搜索，而第二個鏈接將搜索這其中的各個單詞。還要注意，在onclick事件中返回的是false-這強迫浏覽器忽略掉href屬性。點擊這些鏈接將在光標位置繪制搜索框，並且就在此處顯示妳的搜索結果。

<<<返回技術中心

技術文章

站內新聞

粵ICP備09113102號
贊助支持 |
聯繫我們 |