jqueryを使用してCtrl Fのような検索機能をスマホでオーバーレイ表示させた
-
PCのCtrl+Fのような、文字をハイライトした後にキーワードまで移動する検索ボックスを、スマートフォンでオーバーレイ表示する方法の助言を頂けないでしょうか。
スマートフォンではデフォルトでページ内検索の機能が備わっていますが認知度が低く、出来るだけ簡単にこの機能を使用できるようにしたいと思っています。
(参考)iPhoneのブックマークを利用したページ内検索一発起動
http://www.ipuhelin.com/en/safariplus/
そこでjqueryを使用した、検索ワードをハイライト・検索するコードを探して見つけたのですがWordPressに実装する方法や、AdMaxのようにレスポンシブデザインでスマートフォン表示のみオーバーレイ表示し、スクロール後も常時画面に表示させる方法がわかりません。jqueryを使用したページ内検索プラグインの紹介ページ
http://forums.asp.net/t/1892225.aspx/1?CTRL+F+functionality+in+text+boxes
「CTRL+F?なにそれ?」が9割。に対する救済案を考えてみた
http://blog.nejimaki-act.com/ctrl-f/紹介サイトにあるjQuery Page Search(ハイライト)のコードとSearching for text on the current page(キーワードに移動)のコードを組み合わせたものにスマホのオーバーレイ表示用のタグを追加すれば出来ると思うのですが、詳しい方ソースをうまく整理して頂けないでしょうか?
あとは実装方法例として
<?php wp_enqueue_script(‘jquery’); ?>
<?php wp_enqueue_script(‘jquery.search.js’, ‘/wp-content/themes/テーマ名/js/jquery.search.js’); ?>を<?php wp_head(); ?>の前に追記後
</head>の後に
<script type=”text/javascript” src=”jquery.search.js”></script>
<script type=”text/javascript” charset=”utf-8″>
jQuery(“input#search”).search(“ul#searchables li”)
</script>このように記述すればうまく表示されるでしょうか?
他力本願で申し訳ございませんがどうかお力添えよろしくお願い致します。
トピック「jqueryを使用してCtrl Fのような検索機能をスマホでオーバーレイ表示させた」には新たに返信することはできません。