Loading...

ページ内検索をjQueryで実装する


メモ帳やブラウザのショートカットキー『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ファイルを読み込む記述を書きます。

<script type="text/javascript" src="jquery.highlight-3.js"></script>
 次にハイライトされた時に何色にするかをCSSで記述します。
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』のショートカットをこのような形で実装できます。
一般記事 6883304679289721576

コメントを投稿

emo-but-icon

ホーム item

Popular Posts

Random Posts