JS實(shí)現(xiàn)劃詞搜索

2012/11/13 07:44:46作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

JS實(shí)現(xiàn)劃詞搜索

【實(shí)例描述】

在一段文本中選擇一個(gè)單詞，然后調(diào)用Google的搜索功能對此單詞進(jìn)行搜索，這就是本例要實(shí)現(xiàn)的劃詞搜索功能。

【實(shí)例代碼】

<html>
<head>
<title>劃詞搜索-學(xué)無憂（wangbatian.cn）</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<SCRIPT language=Javascript>
document.body.onload=adddiv;            
//頁面加載時(shí)動(dòng)態(tài)創(chuàng)建div
document.onmousedown=recordobj;         
//鼠標(biāo)按下時(shí)觸發(fā)的事件
document.ondblclick=dbclick;            
//窗體雙擊時(shí)觸發(fā)的事件
document.onmouseup=showselect;          
//鼠標(biāo)彈起時(shí)觸發(fā)的事件
var eventObj;
var isDouble=false;
var allow=true;                        
//是否啟用劃詞搜索
function isallow()
{
    if(allow){
    allow=false;
    alert('已經(jīng)關(guān)閉');
    }
    else{
    allow=true;
    alert('已經(jīng)打開');
    }
}
function dbclick()                      
//雙擊事件
{
    isDouble=true;
}
function recordobj()                   
 //當(dāng)前操作對象
{
    eventObj=event.srcElement;
}
function showselect() {
    var str="";
    if(event.srcElement.tagName!="A"&&event.srcElement.tagName!=
"INPUT"&&event.srcElement==eventObj&&!isDouble&&allow)
    {
        var oText=document.selection.createRange();
//獲取選擇文本
        if(oText.text.length>0)                    
//如果文本存在
        {
            str=oText.text;
            oText.text="begin"+oText.text+"end";        
//包裝被選中的文本
        }
        oText.select();                                 
//實(shí)現(xiàn)選擇
                                                        
//設(shè)置選中文本的樣式-帶下劃線-變顏色
        event.srcElement.innerHTML=event.srcElement.
innerHTML.replace("begin","<u style='FONT-WEIGHT: bold;COLOR: #ff3366'>")
.replace("end","</u>");
    }
    googleDiv(str)                                      
//實(shí)現(xiàn)選定文本的搜索
    isDouble=false;
}
function googleDiv(str)
{
    var obj=document.getElementById("googleDiv");
//獲取動(dòng)態(tài)添加的div
    if(str.length>0)                                
    {
        obj.style.display="block";                  
//顯示div
        obj.style.position="absolute";              
//設(shè)置div絕對位置
        obj.style.zindex=999;
        obj.style.posTop=document.body.scrollTop+event.y-25;
//div的Y坐標(biāo)
        obj.style.posLeft=document.body.scrollLeft+event.x+5;
//div的X坐標(biāo)
        obj.style.widht=80;                                  
//div的寬度
        obj.innerHTML="<a target=_blank href=http://www.google.com/
search?ie=UTF-8&oe=UTF-8&q="+str+" style='BORDER-RIGHT: royalblue thin solid; 
BORDER-TOP: royalblue thin solid; FONT-WEIGHT: bold; 
BORDER-LEFT: royalblue thin solid; CLIP: rect(auto auto auto auto); 
COLOR: #ffffff; BORDER-BOTTOM: royalblue thin solid; 
BACKGROUND-COLOR: inactivecaption; TEXT-DECORATION: none'>搜索</a>";
    }
    else
    {
      obj.style.display="none";
    }
}
function adddiv()//動(dòng)態(tài)添加div標(biāo)簽
{
    var mobj = document.createElement("div");   
//創(chuàng)建div標(biāo)簽
    mobj.id="googleDiv";                       
 //設(shè)置div標(biāo)簽的id
    document.body.appendChild(mobj);            
//將div添加到窗體中
}
</SCRIPT>
<INPUT type="button" onclick="isallow()" value="關(guān)閉/打開劃詞功能">
<p>This is Test ,please Select,it's will google</p>
</body>
</html>

【運(yùn)行效果】

劃詞后的效果

劃詞搜索運(yùn)行效果

搜索的效果

劃詞搜索運(yùn)行效果

【難點(diǎn)剖析】

本例的難點(diǎn)有3個(gè)，獲取用戶選擇的詞，動(dòng)態(tài)彈出div層讓用戶調(diào)用搜索功能，調(diào)用Google實(shí)現(xiàn)搜索。獲取用戶選擇的詞在“showselect”方法中實(shí)現(xiàn)，主要依靠“createRaIlge”和“select”兩個(gè)文本區(qū)域選擇方法。動(dòng)態(tài)彈出div層是常見的層特效，就是設(shè)置層的隱藏和顯示。調(diào)用Google搜索的實(shí)現(xiàn)在“googleDiv”方法中完成，這里注意傳遞給Google的參數(shù)。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請點(diǎn)擊：劃詞搜索進(jìn)行本實(shí)例源碼下載

標(biāo)簽： JS實(shí)現(xiàn) 劃詞搜索