bloggerでjQueryでAjaxでラベルごとの投稿リストをポップアップ

ラベルをホバー時に、ラベルごとの投稿リストが見えれば便利じゃなかろうか。
ということで、作った。

読み込み時に全部読み込んでおこうかとも思ったけど、
それのために重くなるのも嫌なんで、ラベルをホバー時にデータを読み込むようにする。

テンプレートの変更でラベルと投稿データをセットで表示できるようなら
そっちでいいんだけど、できるのかどうかもわからんので、
やっぱりjQueryに頼ってみる。

プラグインもチラッと調べたけど、まんま使えそうなのはなかった。
投稿のリンクをクリックできるようにしなきゃならんので、
処理的にはtooltipというより階層メニューに近いっぽい。

それほどややこしくはなさそうだと思ったけど
ラベルでサブカテゴリを使えるようにするでラベルをサブカテゴリ化してたせいで、めんどくさい事になった。

投稿リストポップアップの処理の流れ

1. ラベルのリンクのhoverイベント時にulを作る。
2. 投稿リストデータをまだ取得してなければ。フィードをとりに行く。
3. フィードをとりに行くURLはラベルのリンクを置換して取得。
4. 作ったulにliでデータを挿入
5. ラベルのリンクの横にulを表示

ま、こんな感じ。

投稿リストポップアップの使い方

jQueryを使ってるので、bloggerでjQueryを使えるようにする
を参考に、インクルードしとく。
下のコードよりも先に読み込まれるように差し込むこと。

Bloggerのカスタマイズ→ガジェットの追加→HTML/Javascript
に↓のコードを貼り付ける。

view plainprint?

1. <style type="text/css"><!--  
2. .list-label-widget-content ul.posts{  
3.  background-color:#FFFFFF;  
4.  border:2px solid #003366;  
5.  padding:5px;  
6. }  
7. --></style>  
8. <script type="text/javascript"><!--  
9. jQuery(function($){  
10.  var getdata = function(base){  
11.   var feed = $(base).find("a:first").attr("href").replace("search/label/","feeds/posts/summary/-/");  
12.   var listul = $(base).children("ul.posts");  
13.   listul.append("<li>データ取得中...</li>");  
14.   $.ajax({  
15.    type:"get",  
16.    url:feed,  
17.    dataType:"xml",  
18.    success:function(data){  
19.     listul.empty();  
20.     $(data).find("entry").each(function(){  
21.      listul.append("<li><a href='"+$(this).find("link[rel=alternate]").attr("href")+"'>"+$(this).find("title").text()+"</a></li>");  
22.     });  
23.    },  
24.    error:function(){  
25.     listul.text("データを取得できませんでした");  
26.    }  
27.   });  
28.  }  
29.  $(".list-label-widget-content a").each(function(){  
30.   $(this).parent().children(":not(ul)").wrapAll("<div></div>");  
31.  });  
32.  $(".list-label-widget-content :not(.posts)>li>div").hover(function(){  
33.   if (!$(this).children("ul.posts").length){  
34.    var pos = $(this).find(":last").position();   
35.    //ボックスの基準点を設定  
36.    pos.left = pos.left+$(this).find(":last").outerWidth();  
37.    var containts = $(this).append("<ul class='posts'></ul>").find(":last").css({position:"absolute",top:pos.top,left:pos.left});  
38.    getdata($(this));  
39.   }  
40.   $(this).children("ul.posts").fadeIn("fast");  
41.  },function(){  
42.   $(this).children("ul.posts").fadeOut("fast");  
43.  });  
44. })  
45. --></script>  

<style type="text/css"><!--
.list-label-widget-content ul.posts{
 background-color:#FFFFFF;
 border:2px solid #003366;
 padding:5px;
}
--></style>
<script type="text/javascript"><!--
jQuery(function($){
 var getdata = function(base){
  var feed = $(base).find("a:first").attr("href").replace("search/label/","feeds/posts/summary/-/");
  var listul = $(base).children("ul.posts");
  listul.append("<li>データ取得中...</li>");
  $.ajax({
   type:"get",
   url:feed,
   dataType:"xml",
   success:function(data){
    listul.empty();
    $(data).find("entry").each(function(){
     listul.append("<li><a href='"+$(this).find("link[rel=alternate]").attr("href")+"'>"+$(this).find("title").text()+"</a></li>");
    });
   },
   error:function(){
    listul.text("データを取得できませんでした");
   }
  });
 }
 $(".list-label-widget-content a").each(function(){
  $(this).parent().children(":not(ul)").wrapAll("<div></div>");
 });
 $(".list-label-widget-content :not(.posts)>li>div").hover(function(){
  if (!$(this).children("ul.posts").length){
   var pos = $(this).find(":last").position(); 
   //ボックスの基準点を設定
   pos.left = pos.left+$(this).find(":last").outerWidth();
   var containts = $(this).append("<ul class='posts'></ul>").find(":last").css({position:"absolute",top:pos.top,left:pos.left});
   getdata($(this));
  }
  $(this).children("ul.posts").fadeIn("fast");
 },function(){
  $(this).children("ul.posts").fadeOut("fast");
 });
})
--></script>

注意点

• ポップアップのデザインを変えるときは
  
  view plainprint?

  1. <style type="text/css"><!--  
  2. .list-label-widget-content ul.posts{  
  3.  background-color:#FFFFFF;  
  4.  border:2px solid #003366;  
  5.  padding:5px;  
  6. }  
  7. --></style>  

  <style type="text/css"><!--
  .list-label-widget-content ul.posts{
   background-color:#FFFFFF;
   border:2px solid #003366;
   padding:5px;
  }
  --></style>
  

  を変える。
  
• ポップアップの基準位置を変える場合は
  
  view plainprint?

  1. var pos = $(this).find(":last").position();   
  2.    //ボックスの基準点を設定  
  3.    pos.left = pos.left+$(this).find(":last").outerWidth();  

  var pos = $(this).find(":last").position(); 
     //ボックスの基準点を設定
     pos.left = pos.left+$(this).find(":last").outerWidth();
  

  をいじる。
  

ということで。
以上。