有了Google後,現在站內搜尋很方便
照著Google的方法,一步一步走,然後貼上程式碼就OK了
Google自訂搜尋 ,但這不是我要說的!
然後也因為很方便,所以樣式反而都是公版
以下是用FancyBox應用,而達成自訂Google搜尋樣式
也有浮動視窗的效果。
首先你需要先去Google申請ID,上方連結有
再來再去下載
fancybox
之後你要確定你會點程式!
1.在你的專案裡開一個新的webform在body加入
<form id="form1" runat="server">
<div>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
function parseQueryFromUrl() {
var queryParamName = "q";//接收參數的名稱
var search = window.location.search.substr(1);
var parts = search.split('&');
for (var i = 0; i < parts.length; i++) {
var keyvaluepair = parts[i].split('=');
if (decodeURIComponent(keyvaluepair[0]) == queryParamName) {
return decodeURIComponent(keyvaluepair[1].replace(/\+/g, ' '));
}
}
return '';
}
google.load('search', '1', { language: 'zh-TW' });
google.setOnLoadCallback(function () {
var customSearchControl = new google.search.CustomSearchControl('google申請的ID');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
var queryFromUrl = parseQueryFromUrl();
if (queryFromUrl) {
customSearchControl.execute(queryFromUrl);
}
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
</div>
</form>
2.在你有搜尋欄的那個頁面加入
<link href="Scripts/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<script src="Scripts/jquery.fancybox-1.3.4.pack.js"></script>
3.設定你TEXT的ID,跟Button onclick的function
<form>
<input type="text" id="txtSearch" placeholder="Search" />
<button type="button" onclick="search()">SEARCH</button>
</form>
4.同搜尋欄那一頁,寫function
<script>
function search() {
var q = $("#txtSearch").val();
if (q != "") {
$.fancybox({
'href': '剛剛新增的頁面.aspx?q=' + q,//傳遞的參數
'type': 'iframe',
'padding': 0,
'closeBtn': false,
'width': 690,
'height': 500,
'overlayOpacity': '0.6'
});
}
}
</script>
設定完後,你就可以用你自己的搜尋框去站內搜尋了。
參考:冠譯