- 浏览: 338699 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
pacoson:
感谢楼主。请受小生一拜。
ANT预编译JSP -
zhuhongming123:
一楼的同学Lucene4.* 以上的 已经改成了Numeric ...
Lucene日期排序及组合查询 -
ywjk520:
RangeQuery在哪个包里?
Lucene日期排序及组合查询 -
willwen:
有个疑问,楼主,为何初始化bits 从txt读取已有的网址是直 ...
布隆过滤器(Bloom Filter)之java实例 -
yu_226528:
还不如没有呢
jFreeChart 在jsp页上实现简单的折线图、柱状图
高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色。一般在搜索结果页面会经常用到这个功能。下面就为大家提供两种解决方案,分别用javascript和jquery插件实现。
-
使用Javascript实现
首先在<head>中引入下面javascript方法:
<script type="text/javascript"> //<![CDATA[ //--------begin function fHl(o, flag, rndColor, url)------------------// function fHl(o, flag, rndColor, url){ /// <summary> /// 使用 javascript HTML DOM 高亮显示页面特定字词. /// 实例: /// fHl(document.body, '纸伞|她'); /// 这里的body是指高亮body里面的内容。 /// fHl(document.body, '希望|愁怨', false, '/'); /// fHl(document.getElementById('at_main'), '独自|飘过|悠长', true, 'search.asp?keyword='); /// 这里的'at_main'是指高亮id='at_main'的div里面的内容。search.asp?keyword=指给关键字加的链接地址, /// 我这里加了一个参数,在后面要用到。可以是任意的地址。 /// </summary> /// <param name="o" type="Object"> /// 对象, 要进行高亮显示的对象. /// </param> /// <param name="flag" type="String"> /// 字符串, 要进行高亮的词或多个词, 使用 竖杠(|) 分隔多个词 . /// </param> /// <param name="rndColor" type="Boolean"> /// 布尔值, 是否随机显示文字背景色与文字颜色, true 表示随机显示. /// </param> /// <param name="url" type="String"> /// URI, 是否对高亮的词添加链接. /// </param> /// <return></return> var bgCor=fgCor=''; if(rndColor){ bgCor=fRndCor(10, 20); fgCor=fRndCor(230, 255); } else { bgCor='#F0F'; fgCor='black'; } var re=new RegExp(flag, 'i'); for(var i=0; i<o.childNodes.length; i++){ var o_=o.childNodes[i]; var o_p=o_.parentNode; if(o_.nodeType==1) { fHl(o_, flag, rndColor, url); } else if (o_.nodeType==3) { if(!(o_p.nodeName=='A')){ if(o_.data.search(re)==-1)continue; var temp=fEleA(o_.data, flag); o_p.replaceChild(temp, o_); } } } //------------------------------------------------ function fEleA(text, flag){ var style=' style="background-color:'+bgCor+';color:'+fgCor+';" ' var o=document.createElement('span'); var str=''; var re=new RegExp('('+flag+')', 'gi'); if(url){ str=text.replace(re, '<a href="'+url+ '$1"'+style+'>$1</a>'); //这里是给关键字加链接,红色的$1是指上面链接地址后的具体参数。 } else { str=text.replace(re, '<span '+style+'>$1</span>'); //不加链接时显示 } o.innerHTML=str; return o; } //------------------------------------------------ function fRndCor(under, over){ if(arguments.length==1){ var over=under; under=0; }else if(arguments.length==0){ var under=0; var over=255; } var r=fRandomBy(under, over).toString(16); r=padNum(r, r, 2); var g=fRandomBy(under, over).toString(16); g=padNum(g, g, 2); var b=fRandomBy(under, over).toString(16); b=padNum(b, b, 2); //defaultStatus=r+' '+g+' '+b return '#'+r+g+b; function fRandomBy(under, over){ switch(arguments.length){ case 1: return parseInt(Math.random()*under+1); case 2: return parseInt(Math.random()*(over-under+1) + under); default: return 0; } } function padNum(str, num, len){ var temp='' for(var i=0; i<len;temp+=num, i++); return temp=(temp+=str).substr(temp.length-len); } } } //--------end function fHl(o, flag, rndColor, url)--------------------// //]]> </script>
上面的fHl方法就是用来实现高亮的,参数的含义在注释中有写。
然后在页面最后调用fHl方法,对指定区域指定文字高亮着色,例如:
<script type="text/javascript"> fHl(document.body, '高亮'); //对页面body的区域中的“高亮”文字背景着色 </script>
-
使用Jquery插件实现
jQuery Highlight Plugin是一款专门用来实现文本高亮显示的jquery插件,它用法简单且功能完善。
使用方法如下:
- 在<head>中引入jquery文件及插件文件jquery.highlight.js
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.highlight.js"></script>
- 在css中或通过jquery指定高亮区域的颜色:
.highlight {background-color: #FFFF88; }
$(".highlight").css({ backgroundColor: "#FFFF88" });
- 设置需要高亮显示的词语或通过事件触发高亮显示。例如:
$("h1").highlight("highlight"); //高亮显示所有h1标签中的“highligh”
$("body p").unhighlight(); //取消所有body中段落里的高亮显示;
$("p").highlight("jQuery highlight plugin"); //高亮段落中的词条 “jQuery highlight plugin”
$("p").highlight(["jQuery", "highlight", "plugin"]); //高亮段落中的 “jQuery”,“highlight”及“plugin”
$("p").highlight("Highlight", { caseSensitive: true }); //高亮段落中的 “Highlight”,区分大小写。
$("p").highlight("light", { wordsOnly: true }); //高亮段落中的 “light”,必须是完整单词,“highlight”中的“light”不会高亮
$("p").highlight("highlight", { element: 'em', className: 'error' }); //高亮段落中的 “hightlight”,并为其指定父标签为em,class为error
$("p").highlight("highlight", { element: 'em', className: 'error' }); //高亮段落中的 “hightlight”,并为其指定父标签为em,class为error
$("body p").highlight("jQuery", { element: 'a', className: 'jQueryLink'}); $("body p a.jQueryLink").attr({ href: 'http://jquery.com' }); //高亮段落中的 “jQuery”,并为其加上链接。
在该插件主页可查看 实际效果
下载该插件:jquery.highlight.js
- 在<head>中引入jquery文件及插件文件jquery.highlight.js
-
<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>detail.jsp</title> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.highlight.js"></script> <script type="text/javascript"> function saveInfor(id){ $.get("collection/save.do?id="+id+"&t="+Math.random(),function callback(data){ alert(data); }); } function a(){ /*var ref = document.referrer; var index = ref.lastIndexOf('key='); if(index == -1) return; ref = ref.substring(index+4, ref.length) var key = decodeURI(ref);*/ <% String key = request.getParameter("key"); %> $("#highlight-content").highlight('<%=key%>'); } </script> <style type="text/css"> .highlight{background-color:yellow;padding:2px;} </style> <link rel="stylesheet" type="text/css" href="css/css/admin.css"> <link rel="stylesheet" type="text/css" href="css/css/front.css"> <link rel="stylesheet" type="text/css" href="css/css/jquery_validate.css"> <link rel="stylesheet" type="text/css" href="css/css/jquery_alerts.css"> <link rel="stylesheet" type="text/css" href="css/css/master.css"> </head> <body onload="a()"> <div align="center" > <div align="left" style="width: 70%;background-color: #F5F8FD;" > <br/> <h3 align="center"><b>${informationDetail.title}</b></h3><a href="javascript:saveInfor('${informationDetail.id }')">添加到我的收藏</a> <hr width="70%" align="center" color="#D0D7E1" size="1"/> <div align="center">${informationDetail.url} ${informationDetail.createDate} ${informationDetail.source} <br></div> <div class="blkContainerSblkCon" id="highlight-content"> ${informationDetail.content}<br> </div> </div> </div> </body> </html>
发表评论
-
js跨域问题之跨域iframe自适应大小
2011-07-25 08:45 1148前几天做公司和开心网 ... -
判断浏览器类型
2011-01-05 15:47 817<script language="JavaS ... -
ie和火狐兼容问题(解决方案)
2011-01-05 15:40 14061. document.form.item 问题 (1)现 ... -
鼠标右键选中copy功能(IE&FF兼容)
2011-01-05 15:36 901<!DOCTYPE html PUBLIC " ... -
关于document.cookie的使用
2010-12-23 18:25 936设置cookie 每个cookie都是一个名/值对,可以把下 ... -
仿中华英才网城市选择
2010-07-09 15:19 1624<!DOCTYPE HTML PUBLIC " ... -
firefox兼容ie读取xml节点方法的解决方案实例
2010-07-09 15:14 2454<html> <head> < ... -
jQuery总结
2010-04-22 13:52 7191、关于页面元素的引用通过jquery的$()引用元素包括通过 ... -
精通 JS正则表达式
2009-11-12 17:28 877精通 JS正则表达式 (精通?标题党 ) 正则表达式可以: • ... -
javascript错误代码对应手册
2009-06-18 22:54 1046JScript 运行时错误 JScript 运行时错误是指当 ... -
Javascript 操作select控件大全
2009-06-18 11:48 733Javascript 操作select控件大全(新增、修改、删 ... -
CSS全攻略
2009-06-18 11:37 698CSS全称Cascading Style Sheet。层叠 ...
相关推荐
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
JSTUN 是另外一个用来解决穿越 NAT 进行通讯的 Java 解决方案,是 STUN 协议的 Java实现。 在浏览器上运行Java程序 Doppio DoppioVM 是一个可在浏览器上直接运行 Java 项目的系统,无需任何插件支持。目前它包含一...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...