讓文章的關鍵字或標籤高亮顯示 - 基於jQuery 框架

by - 下午4:43

Text Highlight 實際觸發時畫面 A-Fu
Text Highlight 實際觸發時畫面
搜尋或者是某些時候網頁上需要一小段文字讓使用者看得更加的清楚,這一個小套件可以幫助開發者更快的完成這一個動作,並且也可以復原成尚未添加高亮的狀態,程式碼很精簡使用上也很方便,主要還是基於 jQuery 之下要在新增套件或做其他動作都很方便。

使用方法:
首先載入必須要使用到的檔案
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

//Text Highlight 程式的壓縮版本 大小僅 1 KB
<script src="jquery.highlight-4.closure.js" type="text/javascript"></script>

然後設計要高亮顯示文字片段的CSS語法
<style> /* 範例設定為黃色背景 */
.highlight{background-color:yellow}
</style>


HTML部分設定要取代為高亮的區塊例如
<div id="Myhighlight">
  文字內容
  <div>很多很多內容</div>
</div>


最後再寫 JavaScript 的動作就完成了
JavaScript 可以執行兩種動作
一個是寫入高亮
$('#Myhighlight').highlight('內容');
另一個是移除高亮
$('#Myhighlight').removeHighlight();

執行的時機點就由設計師們自行決定了

作者網站:http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
檔案大小:1 KB
檔案下載:http://johannburkard.de/resources/Johann/jquery.highlight-4.closure.js
檔案備份:下載



You May Also Like

0 意見