今天我们插件教程的示例目标是:完成一款搜索插件.其包含source源码及文档.
1.搜集资料
1.1 搜集搜索引擎的站内搜索代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
<!--
.normal {font-family: "Verdana","Arial";font-size:14px}
.small {font-family: "Verdana","Arial";font-size:12px}
body { font-family: "Verdana","Arial";font-size:14px}
td {font-family: "Verdana","Arial";font-size:14px}
th {font-family: "Verdana","Arial";font-size:15px}
input {font-family: "Verdana","Arial";font-size:14px}
a {text-decoration:underline; color:blue}
a:link { text-decoration:underline; color: blue }
a:visited { text-decoration:underline; color: blue }
a:hover { text-decoration: underline; color: red }
-->
</style>
<title>My Portal</title>
<script language="javascript">
// 这一段使得FireFox也支持IE的innerText方法
function isIE(){
if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1)
return true;
else
return false;
}
if(!isIE()){ //firefox innerText define
HTMLElement.prototype.__defineGetter__( "innerText",
function(){
var anyString = "";
var childS = this.childNodes;
for(var i=0; i <childS.length; i++) {
if(childS[i].nodeType==1)
anyString += childS[i].tagName=="BR" ? '\n' : childS[i].innerText;
else if(childS[i].nodeType==3)
anyString += childS[i].nodeValue;
}
return anyString;
}
);
HTMLElement.prototype.__defineSetter__( "innerText",
function(sText){
this.textContent=sText;
}
);
}
// 这一段使得FireFox的HTMLElement具有click方法（add click method to HTMLElement in Mozilla）
try {
// create span element so that HTMLElement is accessible
document.createElement('span');
HTMLElement.prototype.click = function () {
if (typeof this.onclick == 'function')
this.onclick({type: 'click'});
};
}
catch (e) {
// alert('click method for HTMLElement couldn\'t be added');
}
// 对HTMLAnchorElement 加入onclick事件
try {
// create a element so that HTMLAnchorElement is accessible
document.createElement('a');
HTMLElement.prototype.click = function () {
if (typeof this.onclick == 'function') {
if (this.onclick({type: 'click'}) && this.href)
window.open(this.href, this.target? this.target : '_self');
}
else if (this.href)
window.open(this.href, this.target? this.target : '_self');
};
}
catch (e) {
// alert('click method for HTMLAnchorElement couldn\'t be added');
}
// 跟踪回车键事件
function captureKeys (evt) {
var keyCode = evt.keyCode ? evt.keyCode :
evt.charCode ? evt.charCode : evt.which;
if (keyCode == 13) {
// cancel key:
if (evt.preventDefault) {
evt.preventDefault();
}
var dq = getCookie('default-engine');
if( dq == null) dq = "baidu_txt";
submit_query( dq );
return false;
}
return true;
}
// cookie 功能函数
function getCookie(cookieName)
{
var cookieString = document.cookie;
var start =cookieString.indexOf(cookieName+'=');
if(start == -1)
return null;
start += cookieName.length + 1;
var end = cookieString.indexOf(';', start);
if(end == -1)
return unescape(cookieString.substring(start));
return unescape(cookieString.substring(start,end));
}
function setCookie(cookieName, cookieValue)
{
var expires = new Date();
expires.setTime( expires.getTime() + 3*30*24*60*60*1000); // 3 months
document.cookie = cookieName + '=' + escape(cookieValue)+';expires='+expires.toGMTString();
}
function removeCookie(cookieName)
{
var expires = new Date();
expires.setTime( expires.getTime() - 1);
document.cookie = cookieName + '=fooxxx;expires='+expires.toGMTString();
}
function $(id) {
return document.getElementById(id);
}
// 调式Object用，适用于IE，Firefox下可用firebug
function dumpObject(obj)
{
var temp="";
for (x in obj)
temp += x + ": " + obj[x] + "\n";
var popup = window.createPopup();
popup.document.body.innerHTML = '<textarea rows=30 cols=40>' + temp + '</textarea>';
popup.show(100, 100, 300, 400, document.body);
}
// 多种查询引擎请求分派
function submit_query(t_query)
{
var keyword = document.getElementById("keyword");
var mylink = document.getElementById("mylink");
var loc = "";
switch(t_query)
{
case "baidu_txt":
loc = "http://www.baidu.com/s?wd=" + keyword.value;
break;
case "baidu_img":
loc = "http://image.baidu.com/i?ct=201326592&lm=-1&tn=baiduimagenojs&pv=&word=" + keyword.value + "&z=0&pn=0&rn=16&cl=2";
break;
case "yodao_txt":
loc = "http://www.yodao.com/search?q=" + encodeURI(keyword.value) + "&ue=utf8&keyfrom=web.index";
break;
case "yodao_img":
loc = "http://image.yodao.com/search?q=" + encodeURI(keyword.value) + "&ue=utf8&keyfrom=image.index";
break;
case "yodao_dict":
loc = "http://dict.yodao.com/search?q=" + encodeURI(keyword.value) + "&ue=utf8&keyfrom=dict.index";
break;
case "yodao_blog":
loc = "http://blog.yodao.com/search?q=" + encodeURI(keyword.value) + "&ue=utf8&keyfrom=blog.top";
break;
case "iask_ditu":
loc = "http://ditu.iask.com/a/r.php?cl=北京&key=" + keyword.value;
break;
case "verycd":
loc = "http://www.verycd.com/search/folders/" + encodeURI(keyword.value);
break;
case "google_txt":
loc = encodeURI("http://www.google.com/search?hl=en&q=" + keyword.value +"&btnG=Google+Search");
break;
case "yahoo_txt":
loc = "http://search.yahoo.com/search?p="+encodeURI(keyword.value)+"&vc=&fr=yfp-t-501&toggle=1&cop=mss&ei=UTF-8&fp_ip=CN";
break;
case "trans_en":
loc = "http://209.85.171.104/translate_c?hl=en&sl=en&tl=zh-CN&u=http://" + keyword.value + "/&usg=ALkJrhijPevZUxPtrHDj94k1U9Wo8x7S8g";
break;
case "google_code":
loc = "http://www.google.com/codesearch?q=" + keyword.value + "&hl=en&btnG=Search+Code";
break;
case "google_scholar":
loc = "http://scholar.google.com/scholar?q=" + keyword.value + "&hl=en&lr=&btnG=Search";
break;
}
setEngine(t_query);
setCookie('default-engine', t_query);
mylink.href= loc;
mylink.click();
}
function getDefaultEngine()
{
var dq = getCookie('default-engine');
if( dq == null) dq = "baidu_txt";
return dq;
}
function setDefaultEngine()
{
var old_e = getDefaultEngine();
if( $(old_e).innerText.indexOf('*') < 0)
$(old_e).innerText = $(old_e).innerText + '*';
}
function setEngine( new_e )
{
var old_e = getDefaultEngine();
if( $(old_e).innerText.indexOf('*') >= 0)
$(old_e).innerText = $(old_e).innerText.replace('*','');
if( $(new_e).innerText.indexOf('*') < 0)
$(new_e).innerText = $(new_e).innerText + '*';
setCookie('default-engine', new_e);
}
</script>
</head>
<body onload='setDefaultEngine()'>
<table border="0" width="100%">
<tr><td>
<a href="http://www.google.com" id="mylink" target="_blank">Search:</a>
<input type="text" name="keyword" size="20" id="keyword" onkeypress="return captureKeys(event);">
<a href="javascript:;" id='baidu_txt' onclick="submit_query('baidu_txt')">百度</a>
<a href="javascript:;" id='google_txt' onclick="submit_query('google_txt')">Google</a>
<a href="javascript:;" id='yodao_txt' onclick="submit_query('yodao_txt')">有道</a>
<a href="javascript:;" id='yodao_blog' onclick="submit_query('yodao_blog')">博客</a>
<a href="javascript:;" id='google_code' onclick="submit_query('google_code')">代码</a>
<a href="javascript:;" id='google_scholar' onclick="submit_query('google_scholar')">论文</a>
<a href="javascript:;" id='baidu_img' onclick="submit_query('baidu_img')">百图</a>
<a href="javascript:;" id='yodao_img' onclick="submit_query('yodao_img')">有图</a>
<a href="javascript:;" id='yodao_dict' onclick="submit_query('yodao_dict')">词典</a>
<a href="javascript:;" id='iask_ditu' onclick="submit_query('iask_ditu')">地图</a>
<a href="javascript:;" id='verycd' onclick="submit_query('verycd')">CD</a>
<a href="javascript:;" id='yahoo_txt' onclick="submit_query('yahoo_txt')">Yahoo</a>
<a href="javascript:;" id='trans_en' onclick="submit_query('trans_en')">翻译</a>
</td></tr>
</table>
<!--Google站内搜索开始-->
<form method=get action="http://www.google.com/search">
<input type=text name=q>
<input type=submit name=btnG value="Google 搜索">
<input type=hidden name=ie value=GB2312>
<input type=hidden name=oe value=GB2312>
<input type=hidden name=hl value=zh-CN>
<input type=hidden name=domains value="www.pk17s.cn">
<input type=hidden name=sitesearch value="www.pk17s.cn">
</form>
<!--Google站内搜索结束-->
<!--Baidu站内搜索开始-->
<form action="http://www.baidu.com/baidu">
<input type=text name=word>
<input type="submit" value="Baidu 搜索">
<input name=tn type=hidden value="bds">
<input name=cl type=hidden value="3">
<input name=ct type=hidden value="2097152">
<input name=si type=hidden value="www.pk17s.cn">
</form>
<!--Baidu站内搜索结束-->
<!--Yahoo站内搜索开始-->
<form action="http://www.yahoo.com.cn/search">
<input type=text name="p">
<input type="submit" value="Yahoo 搜索">
<input type=hidden name=vs value="www.pk17s.cn">
</form>
<!--Yahoo站内搜索结束-->
下面是Google和百度的Javascript版的站内搜索代码：
<!--Google站内搜索开始-->
<script type="text/javascript">
function googlesearch () {
var wq=document.getElementsByName("wq")[0].value;
var link="http://www.google.com/search?domains=www.pk17s.cn&sitesearch=www.pk17s.cn&q="+wq;
window.open(link); }
</script>
<input type="text" name="wq"/><input type="submit" onclick="javascript:googlesearch()" value="Google 搜索" />
<!--Google站内搜索结束-->
<!--Baidu站内搜索开始-->
<script language="javascript">
function baidusearch () {
var wd=document.getElementsByName("wd")[0].value;
var link="http://www.baidu.com/s?si=www.pk17s.cn&cl=3&ct=2097152&tn=baidulocal&word="+wd;
window.open(link); }
</script>
<input type="text" name="wd"/><input type="submit" onclick="javascript:baidusearch()" value="Baidu 搜索" />
<!--Baidu站内搜索结束-->
</body>
</html>
1.2.搜索网络上现有的jquery搜索引擎代码.
目前为止,网络上的jquery搜索插件,基本上是使用自己提供一个ajax server代码,然后供插件实时搜索使用.
1.3 预览效果:
这是使用1.1百度站内搜索pk17s.cn的示例截图.
这是使用插件live search 2.0的示例截图.
2.目标:
实现一款中间是搜索文本框,右边是搜索按钮,最好还有一个语音麦克风按钮.下面一排是各大搜索引擎的单选框.
2.1下面是正文,贡献出我的鲜血:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>pkrss - search page</title>
<meta http-equiv="Author" content="liandeliang@yahoo.com.cn" />
<meta http-equiv="Copyright" content="pkrss.com" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="all" />
<meta name="Distribution" content="global" />
<meta name="keywords" content="pkrss,search page" />
<meta name="description" content="pkrss search page is aggregation many search engine.">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta name="application-name" content="pkrss" />
<meta name="msapplication-tooltip" content="pkrss" />
<meta name="msapplication-starturl" content="./" />
<link type="image/x-icon" href="http://www.pk17s.cn/favicon.ico" rel="SHORTCUT ICON" />
<meta name="msapplication-navbutton-color" content="#219bc0" />
<meta name="msapplication-window" content="width=device-width;height=device-height" />
<meta name="msapplication-task" content="name=pkrss-search;action-uri=http://www.pk17s.cn/p/;icon-uri=http://www.pk17s.cn/favicon.ico" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style type="text/css">
.normal {font-family: "Verdana","Arial";font-size:14px}
.small {font-family: "Verdana","Arial";font-size:12px}
body { font-family: "Verdana","Arial";font-size:14px}
td {font-family: "Verdana","Arial";font-size:14px}
th {font-family: "Verdana","Arial";font-size:15px}
input {font-family: "Verdana","Arial";font-size:14px}
a {text-decoration:underline; color:blue}
a:link { text-decoration:underline; color: blue }
a:visited { text-decoration:underline; color: blue }
a:hover { text-decoration: underline; color: red }
</style>
</head>
<body>
<form action="javascript:searchSubmit();" onsubmit="javascript:;">
<table border="0" width="100%">
<tr>
<td>
Search:
<input type="text" name="keyword" size="20" id="keyword" />
<input type="submit" value="Search" id="search-btn" class="" />
</td>
</tr>
<tr>
<td id="search_container">
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
var site = "pk17s.cn";
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
var searchs = [
{'name':'google','showtext':'google','src':_bdhmProtocol+'www.google.com/search?domains='+site+'&sitesearch='+site+'&q='},
{'name':'baidu','showtext':'baidu','src':_bdhmProtocol+'www.baidu.com/s?si='+site+'&cl=3&ct=2097152&tn=baidulocal&word='},
{'name':'yahoo','showtext':'yahoo','src':_bdhmProtocol+'www.yahoo.com.cn/search?vs='+site+'&p='}
];
$(document).ready(function(){
var searchitem;
var htmlsrc = '';
var defaultsrc=' checked="checked"';
for(var i=0,c=searchs.length;i<c;++i){
searchitem = searchs[i];
htmlsrc += '<input type="radio" name="searchengine" value="'+searchitem.name+'"'+defaultsrc+' id="searchengine_'+searchitem.name+'"/><label for="searchengine_'+searchitem.name+'">'+searchitem.showtext+'</label>';
defaultsrc = '';
}
$("#search_container").html(htmlsrc);
});
function searchSubmit(){
var searchitem,curitem;
var enginename = $("input:radio[name=searchengine]:checked").val();
for(var i=0,c=searchs.length;i<c;++i){
searchitem = searchs[i];
if(searchitem.name!=enginename)
continue;
curitem = searchitem;
}
if(!curitem)
return;
var keyword = $("#keyword").val();
if(!keyword || (keyword==''))
keyword = site;
var link=curitem.src+keyword;
document.location.href=(link);
}
</script>
</body>
</html>
以上鲜血,谢绝任何形式的转载!~~
1 comment:
I got this web page from my pal who informed me on the topic of this website and at the moment this time I am browsing this web site and reading very informative articles at this time.
Post a Comment