Home » jQuery 外掛

[jQ]highlight 3.0

[ 日期： | 瀏覽：5,930 | 迴響：2 ]
範例 1
請協助我把這個效果加到我的網站 (只要 300 元)
沒錯!只要 300 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

highlight 3.0

有用過 Google 庫存頁面的人應該會看到它會高亮顯示我們搜尋的關鍵字，其實這也只是找出文章中有關鍵字的部份，然後加上背景顏色。但一般開發者也許並沒有對 JavaScript 有研究，所以就有好心的網友寫了一個 highlight 的套件。只要設定好要高亮顯示的區塊、關鍵字及高亮的背景顏色即可。

套件名稱：highlight
套件版本：3.0
作者網站：http://johannburkard.de/blog/p......pt-text-higlighting-jquery-plugin.html
套件網址：http://plugins.jquery.com/project/highlight
發佈日期：2009-02-22
檔案大小：1.29 KB
檔案下載：jquery.highlight-3.js

參數說明：

檢視原始碼 JavaScript
1
2
3

pat(必填)
描述： 要 highlight 的內容
預設值： 無

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5

// 使用 highlight 效果
$(selector).highlight(pat);
 
// 移除 highlight 效果
$(selector).removeHighlight();

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.highlight-3.js"></script>
<style type="text/css">
	/* 高亮顯示的顏色 */
	.highlight { 
		background-color: yellow;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 幫 .highlight 加上高亮顯示的功能
		$("a.setHighlight").click(function(){
			$("#highlight").highlight("CSS");
		});
		// 幫 .removehighlight 加上移除高亮顯示的功能
		$("a.removeHighlight").click(function(){
			$("#highlight").removeHighlight();
		});
	});
</script>
 
<body>
	<div id="highlight">
		當在編寫網頁時，常常會用到 css，有時大腦沒那麼清醒時可能就是會拼錯單字或是忘了怎麼拼，這時可就得再拿書出來翻了。但總不可能真的每天都帶本書吧(也可以上網搜尋啦！)，因此就有好心人士把 CSS 的語法整理成表格，真是佛心來的
	</div>
	<a class="setHighlight" href="#">高亮顯示 CSS 字串</a>&nbsp;<a class="removeHighlight" href="#">移除高亮顯示</a>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

2 筆針對 [jQ]highlight 3.0 的迴響

  1. 發現一個BUG，
    我在Chrome 22.0.1229.79 m 中，
    點了兩次範例中的"高亮顯示 CSS 字串"，再點一次"移除高亮顯示"，
    前面小寫的css會不見O.O

發表迴響