最後にプログラムを更新したのが、2010年末だったという、
ほぼ放ったらかし状態の画像掲示板dtnですが、
その際に新機能を一つ追加していたのを思い出しました。

書き込み内にレスアンカー( >>2 みたいなものですね )があった場合に、
これを自動的に該当記事までリンクさせるというものです。
↓のような感じで、掲示板phpに一行足しただけでしたけども。。。


$txt = preg_replace('/>>([0-9]+)/','\\0',$txt);

本当なら、他の掲示板でもよくあるように、Javascriptでポップアップさせ、
当該書き込みをそこに表示させたりもしたかったのですが、
なかなかうまくいかず…時間もなく…搭載を断念しておりました。

これを今回実際に組み上げてみました。

実は、初めはjQueryのお世話にならずに、単純にJavascriptで
組み進めていたのですが、IEではうまくいっても、
Firefoxや他で動作が失敗してたりと、色々面倒になってしまい….
というわけでjQueryでやってしまいました。

で、完成したのがこんな感じです。
popup.jpg
基本的な考え方はJavaScriptでやるのと同じで大丈夫です。

まず、下記のようにレスアンカーを表示させる為のdivをhtmlに用意しておく。


<div id="ID"></div>

次に、レスアンカー部分にマウスがのったらポップアップさせる
肝心のjQueryコードを書くのですが、
その前にアンカーリンク自体にも仕掛けをしておきます。
どの書き込みをポップアップさせるかを判別する必要があるからです。

という訳で、手っ取り早くする為、a link のname属性部分に、
表示させたいdivのidを仕込んでおきました。


<a href="#1" class="onMouse" name="d1">

で、最後は肝心のjQueryのソースとなります。


$(function(){
$("#ID").css({
opacity:"0.9",
position:"absolute",
display:"none"
});
$("a.onMouse").mouseover(function(){
var popupID = $(this).attr("name")
$("#ID").html($("#" + popupID).clone());
$("#ID").fadeIn("fast");
}).mouseout(function(){
$("#ID").fadeOut("fast");
}).mousemove(function(e){
$("#ID").css({
"top":e.pageY+10+"px",
"left":e.pageX+10+"px"
});
});
});

流れとしては、レスアンカーリンクにマウスがのった時に、
name属性の値を取得して、値のdivボックスデータをdiv#IDにコピー。
最後に、フェードイン、フェードアウトの設定を付けたという感じです。

とっても簡単な感じで、ブラウザの差異もあまり気にしなくていいですし、
ホントにjQueryさまさまです。

こんなことやる前に、ディレクトリの登録審査やら、
猫ねこサーチエンジンのXHTML化やら、
やること山ほどあるのですが、さっぱり進まず。
ご迷惑お掛けしてしまいます。

登録申請して下さった方々には大変申し訳ございませんが、
今しばらくのお時間を頂きたく、宜しくお願い致します。

スポンサーリンク