基于jquery的划词搜索实现(备忘)_Javascript教程-查字典教程网
基于jquery的划词搜索实现(备忘)
基于jquery的划词搜索实现(备忘)
发布时间:2016-12-30 来源:查字典编辑
摘要:参照页面:http://www.jb51.net/article/24825.htm一、DragSearchByJQuery.aspx页面(...

参照页面: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(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 target='_blank' href='http://www.google.com/search?ie=UTF-8&oe=UTF-8&q=" + encodeURIComponent(str) + "'>Google搜索</a>");

obj.html("<a 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="搜索" />

<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" 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">

<>

</script>

(参照网址为:http://www.jb51.net/article/20610.htm)

不过,相对上面用JQuery实现的,这个方案,存在的问题是:对包含多个英文单词搜索的,只取了其中一部分进行划词搜索。有待进一步完善。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类