ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
jQuery  javascript  

久々のテンプレ大改造 jQuery が面白い!

2010/01/14 (木)  カテゴリー: ブログ雑記・その他

1つ前の記事が未完成の中、ちょっとしたことから jQuery にどっぷりハマっている私です。 全く不自由を感じていなかった部分を 2箇所 変更。

  1. 画像ファイルへのリンク を 同じウィンドウでポップアップ風に表示する方法 を Lightbox JS (旧バージョン) から、jQuery lightBox plugin に変更。
    [ 詳細記事 : jQuery lightBox グループ化を操る3つの方法 ]

  2. 検索結果ページ や タグ検索結果ページ で使っている キーワードの強調表示(ハイライト機能) を 共有テンプレートでも使わせていただいている KW強調ボタン から highlight: JavaScript text higlighting jQuery plugin に変更。 jQuery を使ったついで、というか jQuery版 lightBox と KW強調ボタン を併用する方法が探せなかったから。。。
    [ 詳細記事 : 検索用語をハイライト(強調表示)するスクリプト ]

結果、かなり気に入りました♪ 近いうちに、情報まとめようと思いますが(・・・って、前の記事も未完成ですが。。。) 取り敢えず報告まで。

しかし、こういうのって殆ど 自己満足の世界。 久しく使っていなかった Lightbox をまた無意味に使ってみたり。。。

参考にさせていただいた記事 (サイト),ブックマーク


[ 関連記事 : Lightbox JS (あえて旧Ver.) をカスタマイズ ]
[ 関連記事 : 検索用語をハイライト(強調表示)するスクリプト ]
[ 関連記事 : サイト内検索をGoogleで行う ]

キーワード検索 : jQuery  javascript  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-103.html

2010/01/14 ~ | Comment (4) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

4 Comment


こんにちは。記事参考にしていただきありがとうございました。
現在、Firefoxなどのブラウザだと空白で検索した場合に固まってしまいますので、対策をしたほうがいいと思います。

var keyword = $("#keyword").val();
これを
var keyword = "<%tag_word><%search_word>";
こうすると直ると思います。
お試しくださいー

deeeki |  2010/01/14 (木) [ 編集 ] No.223


deeeki さん、ありがとうございます。

早速、修正させてもらいました。
deeeki さんのサイトに コメントを入れていなかったら多分ずーっと気付かないままだったと思うので、助かりました。

最終的に、今は
<!--search_area-->
$(function(){
var keyword = "<%search_word>";
if (keyword != "") {
$("#content").highlight("<%search_word>");
}
});
<!--/search_area-->

<!--tag_area--><input type="button" onclick="$('#content').removeHighlight().highlight('<%tag_word>');" value="<%tag_word> を 強調表示する" title="検索用語 を 黄色背景でハイライトします" /><!--/tag_area-->

という形になっています。
2番目は空の… という部分には未対応(方法がわからないので)のままですが、大丈夫でしょうか。。。通常は空のタグページを開き、さらにそのボタンをクリックするなんてことは無いとは思いますが。。。
(1番目と同じ形式にしていないのは、このエリア「タグ検索結果ページ」 に直接アクセスがあることも多いので...「キーワードだらけに見えるのもどうか??」「それが本当に必要なキーワードかどうかもわからないし」 と、検討中です。)

この記事の内容、時間が出来たらまとめようと思っているので、私が通いまくった参考サイトとして deeeki さんの記事 を紹介させていただこうと思っています。
宜しくお願いいたします!

paruparu |  2010/01/14 (木) [ 編集 ] No.224


タグページの修正です

タグのほうも固まってしまいますので、いちおう対策するなら以下のようにするといいと思います。

onclick="if('<%tag_word>'!=''){$('#content').removeHighlight().highlight('<%tag_word>');}"

「if(条件){処理}」は、プログラムでは場合分けするのに使います。
JavaScriptはいろいろな書き方ができるので、慣れないとなかなか難しいですよねー。
でも、やりたいことの実現のためにご自身で調べられてるのはすばらしいと思います!

あと、紹介は全然かまわないですよー^^

deeeki |  2010/01/14 (木) [ 編集 ] No.225


すごく助かりました!

deeeki さん、また ありがとうございました。
不安な部分もすっかり無くなり、安心して使うことができて嬉しいです♪

FC2ブログでは、検索用語に 「Abcd」 などと入れた場合、結果ページの 2ページ目以降 「abcd」 と必ず小文字に書き換えられてしまうのですが、この点も解決できたので大満足です。

ブログの共有テンプレートを作ったり、ここでは教える立場になることも多いのですが。。。 (まだまだ未熟者^^;) スクリプトに関しては、かろうじて読んだり 書き変えたりが出来るレベルなので、今回もまた一つ勉強させていただきました。

paruparu |  2010/01/14 (木) [ 編集 ] No.226

コメントを投稿する 記事: 久々のテンプレ大改造 jQuery が面白い!


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback