自製多網站搜尋引擎
先看看做出來的成果，以下是 Firefox 的畫面，心動嗎？不需要爸爸買，只要複製 + 貼上就有。
一開始的畫面
移動滑鼠到右邊三角形上
切換要搜尋的網站為 FindBook
用 FindBook 搜尋夜巡者這本書
FindBook 搜尋結果
用金石堂搜尋夜巡者這本書
金石堂搜尋結果
以功能來說，Firefox 或 IE 用起來皆正常，其它瀏覽器沒試過。
以外觀來說，Firefox 用起來非常順眼，但是 IE 就有些怪怪的，如左右三角形就變成梯型，間隔有的太大有的太小，其它瀏覽器沒試過。
最重要的是，你的部落格必須可以讓你放 JavaScript，例如非常有名的有名大站就不准放 JavaScript。
只要把以下六段直接複製到你的網頁就可以直接用來找書，當然也可以改成找音樂、找電影、找錢，也可以改成一次就包含所有想找的，如找書(現在的功能) -> 找音樂 -> 找電影 -> 找錢 -> 找書，這樣的話 JavaScript 必須擴展，網頁必須稍做修改，不難，只是暫時還沒這計畫。
第一段，定義 style
ArrowRightOut、ArrowRightOver、ArrowLeftOut、ArrowLeftOver 這四個 style 劃出左右三角形
SearchSiteName 這三個 style 定義要搜尋網站的顏色(中間最大那個)
NotSearchSiteName 這三個 style 定義兩個不是搜尋網站的顏色
<style>
.ArrowRightOut { float:right; border-left:12px solid #6666FF; border-top:12px solid #FFFFFF; border-bottom:12px solid #FFFFFF; }
.ArrowRightOver { float:right; border-left:12px solid #0000FF; border-top:12px solid #FFFFFF; border-bottom:12px solid #FFFFFF; }
.ArrowLeftOut { float:left; border-right:12px solid #6666FF; border-top:12px solid #FFFFFF; border-bottom:12px solid #FFFFFF; }
.ArrowLeftOver { float:left; border-right:12px solid #0000FF; border-top:12px solid #FFFFFF; border-bottom:12px solid #FFFFFF; }
.SearchSiteName a:link { font-size: 120%; color:#4444FF; }
.SearchSiteName a:visited { font-size: 120%; color:#4444FF; }
.SearchSiteName a:hover { font-size: 150%; color:#0000FF; }
.NotSearchSiteName a:link { font-size: 70%; color:#a0a0FF; }
.NotSearchSiteName a:visited { font-size: 70%; color:#a0a0FF; }
.NotSearchSiteName a:hover { font-size: 90%; color:#0000FF; }
.SearchSiteForm { float:left; margin-left:3px; margin-top:3px; }
.SearchNavigate { position:relative; left:0px; top:-10px; margin:0px; align:center; width:100%; }
</style>
第二段，一些 JavaScript 的函式，基本上可以不用改
<script labguage="JavaScript">
// Site Object
function Site(id, name, url) {
this.id = id;
this.name = name || id;
this.url = url;
if(url != null) {
this.link = '<a href="'+url+'" target="'+id+'">'+name+'</a>';
} else {
this.link = name;
}
}
function showNextSite() {
showSite(sites[idx].id, false);
idx++;
if(idx == sites.length)
idx = 0;
showSite(sites[idx].id, true);
changeAllSiteName();
}
function showPrevSite() {
showSite(sites[idx].id, false);
idx--;
if(idx < 0)
idx = sites.length - 1;
showSite(sites[idx].id, true);
changeAllSiteName();
}
function changeAllSiteName() {
changeSiteName("SearchSiteName", sites[idx].link);
if(sites.length >= 2) {
nidx = idx - 1;
if(nidx < 0)
nidx += sites.length;
changeSiteName("PrevSearchSiteName", sites[nidx].link);
}
if(sites.length >= 3) {
pidx = idx + 1;
if(pidx >= sites.length)
pidx -= sites.length;
changeSiteName("NextSearchSiteName", sites[pidx].link);
}
}
function changeSiteName(id, link) {
element = document.getElementById(id);
element.innerHTML = link;
}
// Search
function GoSearch(f) {
form = document.getElementById(sites[idx].id + "_Form");
field = form.elements["SearchField"];
eval("field.value='" + f.search.value + "'");
form.submit();
}
// display or hidden site form
function showSite(id, show) {
element = document.getElementById(id);
siteForm = document.getElementById(id + "_Form");
searchSiteForm = document.getElementById("SearchSiteForm");
if(show) {
if(siteForm == null) {
searchSiteForm.style.display = "none";
} else {
searchSiteForm.style.display = "inline";
}
element.style.display = "inline";
} else {
element.style.display = "none";
}
}
// global variable
var idx = 0;
var sites = new Array();
</script>
第三段，放左右三角形及三個網站，基本上可以不用改<div class="SearchNavigate">
<table border="0" width="100%" align="center"><tr>
<td width="15" align="center"><a href="javascript:showPrevSite();"><div onmouseover="this.className='ArrowLeftOver';" onmouseout="this.className='ArrowLeftOut';" class="ArrowLeftOut"></div></a></td>
<td>
<table border="0" width="100%" align="center"><tr>
<td width="30%" align="left"><div id="NextSearchSiteName" class="NotSearchSiteName"></div></td>
<td align="center"><div id="SearchSiteName" class="SearchSiteName"></div></td>
<td width="30%" align="right"><div id="PrevSearchSiteName" class="NotSearchSiteName"></div></td>
</tr></table>
</td>
<td width="15" align="center"><a href="javascript:showNextSite();"><div onmouseover="this.className='ArrowRightOver';" onmouseout="this.className='ArrowRightOut';" class="ArrowRightOut"></div></a></td>
</tr></table>
</div>
第四段，我已經做好要查詢的網站，你要新增要查詢的網站加在這裡，順序沒關係，因為一次只有一個網站出現<!-- search form start -->
<!-- aNobii start -->
<div id="aNobii" style="display:none;">
<form id="aNobii_Form" action="http://www.anobii.com/anobi/anobii_search.php" target="_blank" name="search_engine" method="get" accept-charset="utf-8">
<input id="SearchField" name="q" type="hidden"/>
</form>
</div>
<!-- aNobii end -->
<!-- FindBook start -->
<div id="FindBook" style="display:none;">
<form id="FindBook_Form" action="http://findbook.tw/search" target="_blank" name="FindBook" method="get" accept-charset="utf-8">
<input checked="checked" value="keyword" name="keyword_type" type="radio"/>關鍵字
<input value="title" name="keyword_type" type="radio"/>書名
<input value="author" name="keyword_type" type="radio"/>作者
<input id="SearchField" name="q" type="hidden"/>
</form>
</div>
<!-- FindBook end -->
<!-- 臺北市立圖書館 start -->
<div id="tpml" style="display:none;">
因臺北市立圖書館動態產生查詢網址，故無法直接查詢，請直接由上方連結直接到臺北市立圖書館查詢
</div>
<!-- 臺北市立圖書館 start -->
<!-- 博客來 start -->
<div id="books" style="display:none;">
<form id="books_Form" action="http://search.books.com.tw/exep/prod_search.php" target="_blank" name="search_form" method="get" accept-charset="big5">
我要找<select name="cat">
<option value="all"/>所有商品
<option value="001"/>繁體書
<option value="CN1"/>簡體書
<option value="F01"/>外文書
</select>
<input id="SearchField" name="key" type="hidden"/>
</form>
</div>
<!-- 博客來 start -->
<!-- 金石堂 start -->
<div id="kingstone" style="display:none;">
<form id="kingstone_Form" action="http://search.kingstone.com.tw/Result.asp" target="_blank" name="se_form" method="get" accept-charset="big5">
<select name="SE_Type">
<option selected/>書名
<option/>作者
<option/>出版社
<option/>ISBN
<option/>全文檢索
</select>
<input id="s" value="all_product" name="s" type="hidden"/> <!--資料庫-->
<input id="g" value="" name="g" type="hidden"/> <!--group name-->
<input id="pno" value="1" name="pno" type="hidden"/> <!--第幾頁開始show-->
<input id="pn" value="1" name="pn" type="hidden"/> <!--第幾頁開始show-->
<input id="n" value="20" name="n" type="hidden"/> <!--一頁show幾筆-->
<input id="o" value="(1),pub_date,sale_status" name="o" type="hidden"/> <!--SORTFIELD-->
<input id="oa" name="oa" type="hidden"/> <!--SORTTYPE-->
<input id="sp" value="f" name="sp" type="hidden"/> <!--同義/同音/容錯-->
<input id="xpath" value="44" name="xpath" type="hidden"/> <!--指定分類樹-->
<input id="tsct" value="" name="tsct" type="hidden"/> <!--簡繁對譯-->
<input id="ta" value="" name="ta" type="hidden"/> <!--文件自動摘要-->
<input id="red" value="" name="red" type="hidden"/> <!--相關文件-->
<input id="rdd" value="" name="rdd" type="hidden"/> <!--重複文件-->
<input id="ts" value="1" name="ts" type="hidden"/> <!--形似相關詞(Term Suggestion) -->
<input id="m" value="m3" name="m" type="hidden"/> <!--搜尋方式-->
<input id="LID" value="000" name="LID" type="hidden"/>
<input id="SearchField" name="k" type="hidden"/>
</form>
</div>
<!-- 金石堂 start -->
<!-- 誠品 start -->
<div id="eslite" style="display:none;">
<form id="eslite_Form" action="http://search.eslitebooks.com/search/searchResultSAP.asp" target="_blank" name="frmbas" method="get" accept-charset="big5">
<input value="Trid" name="fonttype" type="hidden"/>
<input value="bas" name="basadv" type="hidden"/>
<input value="10" name="Item" type="hidden"/>
<input value="1" name="At" type="hidden"/>
<input value="商品" name="range" type="hidden"/>
<input value="0" name="SortType" type="hidden"/>
<input value="3" name="qc" type="hidden"/>
<input id="SearchField" name="query" type="hidden"/>
</form>
</div>
<!-- 誠品 start -->
<!-- Amazon start -->
<div id="Amazon" style="display:none;">
<form id="Amazon_Form" action="http://www.amazon.com/s/ref=nb_ss_b" target="_blank" name="site-search" method="get" accept-charset="iso-8859-1">
<input value="search-alias=stripbooks" name="url" type="hidden"/>
<input id="SearchField" name="field-keywords" type="hidden"/>
</form>
</div>
<!-- Amazon end -->
<!-- search form end -->
其中有幾點要遵守，以博客來當範例(是範例，所以不要複製)
1.一段完整的查詢網站必須包含 div 及 form
2.div 的 id 要跟第六段說明的 id 一樣
3.form 的 id 要加上 "_Form"
4.form 的 accept-charset 要設成你要查詢網站的編碼一樣，Firefox 在網頁按滑鼠右鍵的選單有一個語言及字元編碼選項，IE 在網頁按滑鼠右鍵的選單有一個編碼選項
5.原來網站查詢欄位的的名稱(如博客來為 key)，必須放在 id 為 SearchField 的隱藏欄位中
6.每一組 div 及 form 必須有一個 Site()，Site() 說明在第六段
<!-- 博客來 start -->
<div id="books" style="display:none;">
<form id="books_Form" action="http://search.books.com.tw/exep/prod_search.php" target="_blank" name="search_form" method="get" accept-charset="big5">
<input id="SearchField" name="key" type="hidden"/>
<!-- 其它欄位 ... -->
</form>
</div>
<!-- 博客來 end -->
第五段，這一段放查詢的欄位，基本上可以不用改<div id="SearchSiteForm" class="SearchSiteForm">
<form>
<input name="search" type="text"/> <input value="搜尋" onclick="GoSearch(this.form);" type="button"/>
</form>
</div>
第六段，最後這一段是放網站資料用，Site() 裡面有三個參數
第一參數個是網站 id，一定要有，你可以自己定義，不過一定要跟第四段所說的 id 一樣才行
第二參數個是網站名稱，沒有也可以，沒有給的話就會跟 id 一樣，這是給人看的
第三參數個是網站首頁網址，沒有也可以，有的話可以直接連結到該網站
你的網站資料加在 <-- data start --> 跟 <-- data end --> 之間<script labguage="JavaScript">
<!-- data start -->
sites[sites.length] = new Site("aNobii", "aNobii", "http://www.anobii.com/");
sites[sites.length] = new Site("FindBook", "FindBook", "http://findbook.tw/");
sites[sites.length] = new Site("tpml", "北市圖", "http://webcat.tpml.edu.tw/uhtbin/cgisirsi/TPL/0/0/49");
sites[sites.length] = new Site("books", "博客來", "http://www.books.com.tw/");
sites[sites.length] = new Site("kingstone", "金石堂", "http://www.kingstone.com.tw/");
sites[sites.length] = new Site("eslite", "誠品", "http://www.eslitebooks.com/");
sites[sites.length] = new Site("Amazon", "Amazon", "http://www.amazon.com/");
<!-- data end -->
idx = sites.length - 1;
showNextSite();
</script>
沒有留言:
張貼留言