照著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>
設定完後,你就可以用你自己的搜尋框去站內搜尋了。
參考:冠譯
沒有留言:
張貼留言