jQueryでハイライト(強調表示)

最近のブラウザには標準搭載されているハイライト(強調表示)機能。

入力した検索キーワードの背景が黄色くなるアレです。

jQueryをつかって似たような事ができるプラグインはこちら

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

使い方はjQueryらしく、いたってシンプル。

まずは、ハイライト時のスタイルを定義してあげる。

この際のクラス名は「highlight」固定らしい 。

まぁ、ハイライトっていったら背景色黄色でしょ、って事で、こんな感じ

<style type=”text/css”>
.highlight {
background-color:yellow;
}
</style>

これで準備OK。
あとは

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.highlight-3.js”></script>
<script type=”text/javascript”>
function doHighlight() {
$(“ハイライトさせたい要素のクエリ”).highlight(“ハイライトさせたい文字列”);
}
</script>

これでOK。

サンプルも作ってみました。

***ハイライトのサンプル***

相変わらずjQueryは簡単で助かる。

Check
Leave a comment

1 Comments.

コメントをどうぞ

メールアドレスが公開されることはありません。


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackbacks and Pingbacks:

管理人運営サイト
<技術情報サイト:PGBox>
PGBOX