ページ内検索をjQueryで実装する
http://blogger4memo.blogspot.com/2015/02/jquery.html
メモ帳やブラウザのショートカットキー『Ctrl + F』をブログ記事にjQueryを使って実装する方法を紹介します。
jQueryを導入する
BloggerでjQueryを実装する
http://blogger4memo.blogspot.jp/2015/02/bloggerjquery.html 前回、書いた記事を参照してください。
jquery.highlightを導入する
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
に置いてあります。
Demoも置いてあるので実際に動作した時にどのような動きをするのか確認できます。
導入方法
BloggerでjQueryを実装すると同様に<head>・・・</head>
内に使用するJavaScriptファイルを読み込む記述を書きます。
次にハイライトされた時に何色にするかをCSSで記述します。<script type="text/javascript" src="jquery.highlight-3.js"></script>
CSSの設定は『HTMLの編集』 からもできますが、テンプレートタブの『カスタマイズ』から上級者向け設定の『CSSを追加』の項目からも記述できます。
.highlight { background-color: yellow }
基本的に何色でも問題ありませんが薄い黄色などが一番、無難です。
以上で準備完了です。
サンプルとして引用の箇所をフォームからページ内検索するプログラムを書いてみました。
サンプル
<script type="text/javascript">
$(document).ready(function(){
org.setEvent();
});
var org = {
setEvent : function(){
$("#key").focus();
$("#key").bind("keyup", function(e){
//if(e.keyCode==13){
var $t = $("blockquote");
var val = $(this).val();
if(val == ""){
//$(".highlight").removeClass("highlight");
return false;
}
$t.removeHighlight();
$t.highlight(val);
//}
})
}
}
</script>
blockquote要素を指定して実行しています。
上記のプログラムを使えば『Ctrl + F』のショートカットをこのような形で実装できます。
