当前位置:主页 > IT技术分享 >

基于jquery的划词搜索实现(备忘)

作者:admin发表时间:2018-09-14
参照页面:http://www.jb51.net/article/24825.htm一、DragSearchByJQuery.aspx页面(调用页面) 复制代码 代码如下: <head runat="server"> <title>划词搜索</title> <style type="text/css"> /*search*/ a.GL_s{width:68px;height:20px;display:block;border:solid 1px #2b7ab7;line-height:20px;padding-left:18px;color:#084f10;font-size:12px;font-weight:bold;background:url(search.gif) no-repeat left;text-decoration:none;} a.GL_s:link{filter:alpha(opacity=71);-moz-opacity:0.7;opacity: 0.7;} a.GL_s:hover{filter:alpha(opacity=100);-moz-opacity:1.0;opacity: 1.0;} </style> </head> <body> <form id="form1" runat="server"> <div > <input type="button" value="关闭/打开划词功能" /> <p> 《红楼梦》是我国古代四大名著之一,属章回体长篇小说,成书于1784年(清乾隆帝四十九年)。梦觉主人序本正式题为《红楼梦》,它的原名《石头记》、《情僧录》、《风月宝鉴》、《金陵十二钗》等。是我国古代最伟大的长篇小说,也是世界文学经典巨著之一。作者曹雪芹。现通行的续作是由高鹗续全的一百二十回《红楼梦》。 </p> <p> if you want to search,one way is to Google,one of the others is Baidu</p> </div> </form> </body> </html> 相关JQuery 复制代码 代码如下: <script type="text/javascript" src="JS/JQuery/jquery-1.4.2.min.js"></script> <script type="text/javascript" language="javascript"> //划词搜索 var GLS = {}; GLS.startObj = null; GLS.isdb = false; GLS.allow = true; GLS.isallow = function() { if (GLS.allow) { GLS.allow = false; alert('搜索已关闭'); } else { GLS.allow = true; alert('搜索已打开'); } }; GLS.dblclick = function() { GLS.isdb = true; }; GLS.mousedown = function(ag8亚游集团evt) { evt = (evt) ? evt : ((window.event) ? window.event : ""); if (evt) { GLS.startObj = (evt.target) ? evt.target : evt.srcElement; } }; GLS.mouseup = function(evt) { var obj; var strlen; evt = (evt) ? evt : ((window.event) ? window.event : ""); if (evt) { obj = (evt.target) ? evt.target : evt.srcElement; strlen = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text; } var str = ""; if (obj.tagName != "A" && obj.tagName != "INPUT" && obj == GLS.startObj && !GLS.isdb && GLS.allow) { if (strlen.length > 0) { str = strlen; } } GLS.search(str, evt); GLS.isdb = false; }; GLS.search = function(str, evt) { var obj = $("#GLSearch"); var sDivWidth = 88; //检索框“Google搜索”的宽度 if (str.toString().length > 0) { var windowWidth; //窗口的宽 //取得窗口的宽 if (self.innerWidth) { windowWidth = self.innerWidth; } else if (document.documentElement && document.documentElement.clientWidth) { windowWidth = document.documentElement.clientWidth; } else if (document.body) { windowWidth = document.body.clientWidth; } obj.css({ 'display': 'block', 'position': 'absolute', 'zindex': '10000' }); var rX, rX, wT; if ($.browser.msie) { wT = (evt.clientX + sDivWidth) - windowWidth; rY = document.documentElement.scrollTop + evt.clientY; rX = document.documentElement.scrollLeft + evt.clientX; rY = (evt.clientY < 35) ? (rY + 5) : (rY - 35); rX = (wT > 0) ? (rX - wT) : (rX + 5); } else { var sT = (document.documentElement.scrollTop > 0) ? document.documentElement.scrollTop : document.body.scrollTop; wT = (evt.pageX + sDivWidth) - windowWidth; rY = ((evt.pageY - sT) < 35) ? (evt.pageY + 5) : (evt.pageY - 35); rX = (wT > 0) ? (evt.pageX - wT) : (evt.pageX + 5); } obj.css("top", rY); obj.css("left", rX); // obj.html("<a class='GL_s' target='_blank' href='http://www.google.com/search?ie=UTF-8&oe=UTF-8&q=" + encodeURIComponent(str) + "'>Google搜索</a>"); obj.html("<a class='GL_s' target='_blank' href='Search.aspx?q=" + encodeURIComponent(str) + "'>搜索</a>"); } else { obj.css("display", "none"); } }; //页面加载 $(document).ready(function() { $(document.body).append("<div id='GLSearch'></div>"); $(document).mousedown(GLS.mousedown).dblclick(GLS.dblclick).mouseup(GLS.mouseup); }); </script> 二、Search.aspx页面(被调用页面) 复制代码 代码如下: <div > <div > <asp:TextBox ID="txtContent" runat="server"></asp:TextBox> <asp:Button ID="btnSearch" runat="server" Text="搜索" OnClick="btnSearch_Click" /> <asp:Label ID="lblNote" runat="server" Text="" ForeColor="red"></asp:Label> </div> </div> 后台 复制代码 代码如下: protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { this.txtContent.Text = Request.QueryString["q"].ToString(); btnSearch_Click(sender, e); } } protected void btnSearch_Click(object sender, EventArgs e) { this.lblNote.Text = "搜索关键字为:" + this.txtContent.Text; } 三、附注 1、使用encodeURIComponent代替 escape的原因   escape() 只是为 ASCII字符 做转换工作,转换成的 %unnnn 这样的码,如果要用更多的字符如 UTF-8字符库 就一定要用 encodeURIComponent() 或 encodeURI() 转换才可以成 %nn%nn 这的码才可以escape() 只是为 ASCII字符 做转换工作,转换成的 %unnnn 这样的码,如果要用更多的字符如 UTF-8字符库 就一定要用 encodeURIComponent() 或 encodeURI() 转换才可以成 %nn%nn 这的码才可以。   来源:请参见http://www.misuisui.com/weblog/?p=418 2、网上有一篇是使用Javascript实现的,具体代码为: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" Codebehind="DragSearch.aspx.cs" Inherits="CanYou.AutoComplete.Web.DragSearch" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>划词搜索</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <form id="form1" runat="server"> <div > <input type="button" onclick="isallow()" value="关闭/打开划词功能" /> <p> 《红楼梦》是我国古代四大名著之一,属章回体长篇小说,成书于1784年(清乾隆帝四十九年)。梦觉主人序本正式题为《红楼梦》,它的原名《石头记》、《情僧录》、《风月宝鉴》、《金陵十二钗》等。是我国古代最伟大的长篇小说,也是世界文学经典巨著之一。作者曹雪芹。现通行的续作是由高鹗续全的一百二十回《红楼梦》。 </p> <p> if you want to search,one way is to Google,one of the others is Baidu</p> </div> <!--不足之处:英文语句的,传参不够完整--> </form> </body> </html> <script type="text/javascript" language="javascript"> <!-- document.body.onload=adddiv; document.onmousedown=recordobj; document.ondblclick=dbclick; document.onmouseup=showselect; var starobj,isdb=false,allow=true; function isallow() { if(allow){ allow=false; alert('is closed'); } else{ allow=true; alert('is opened'); } } //ondblclick function dbclick() { isdb=true; } //onmousedown function recordobj() { starobj=event.srcElement; } //onmouseup function showselect() { var str=""; if(event.srcElement.tagName!="A"&&event.srcElement.tagName!="INPUT"&&event.srcElement==starobj&&!isdb&&allow) { var oText=document.selection.createRange(); if(oText.text.length>0) { str=oText.text; oText.text="BuB"+oText.text+"EuE"; } oText.select(); event.srcElement.innerHTML=event.srcElement.innerHTML.replace("BuB","<u style='FONT-WEIGHT: bold;COLOR: #ff3366'>").replace("EuE","</u>"); } searchgoogle(str) isdb=false; } function searchgoogle(str) { var obj=document.getElementById("searchgoogle"); if(str.length>0) { obj.style.display="block"; obj.style.position="absolute"; obj.style.zindex=999; obj.style.posTop=document.body.scrollTop+event.y-25; obj.style.posLeft=document.body.scrollLeft+event.x+5; obj.style.widht=80; obj.innerHTML="<a target=_blank href=http://www.google.com/search?ie=gbk&oe=gbk&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"; } } //body.onload function adddiv() { var mobj = document.createElement("div"); mobj.id="searchgoogle"; document.body.appendChild(mobj); } //--> </script> (参照网址为:http://www.jb51.net/article/20610.htm) 不过,相对上面用JQuery实现的,这个方案,存在的问题是:对包含多个英文单词搜索的,只取了其中一部分进行划词搜索。有待进一步完善。

本文源自: 环亚娱乐

IT技术分享
联系我们