2006
Jan
20th
COREBlog のカレンダーを Ajax 化に続いて。
前のではカレンダー部分の月を表示している箇所の左右に矢印をもうけ、カレンダー部分のみを読み替えるようにしました。今回のでは、カレンダー部分のリンクになっている日付の部分にマウスカーソルを持っていくと、カレンダーの下部にその日のエントリで書いたタイトルが表示され、それをクリックするとそのエントリ自体に飛ぶようにしてみました。
若干問題点はあって、ある日（例えば1月9日とか）にカーソルを持っていくと、カレンダー下部にエントリへのリンク（例えば「- 車山」）が現れます。で、それなら読んでみようかとカーソルを移動する際に、その下にある日（例えば1月16日）の上を通ってしまい、カレンダー下部には異なるエントリへのリンク（例えば「- のびのび手袋」）が表示されてしまうというわけです。まあ、下部に表れるタイトルを見て、読んでみても良いと思ってもらえたら、その時点で日付をクリックしていただければ良い話ではあるのですが。
前のではカレンダー部分の月を表示している箇所の左右に矢印をもうけ、カレンダー部分のみを読み替えるようにしました。今回のでは、カレンダー部分のリンクになっている日付の部分にマウスカーソルを持っていくと、カレンダーの下部にその日のエントリで書いたタイトルが表示され、それをクリックするとそのエントリ自体に飛ぶようにしてみました。
若干問題点はあって、ある日（例えば1月9日とか）にカーソルを持っていくと、カレンダー下部にエントリへのリンク（例えば「- 車山」）が現れます。で、それなら読んでみようかとカーソルを移動する際に、その下にある日（例えば1月16日）の上を通ってしまい、カレンダー下部には異なるエントリへのリンク（例えば「- のびのび手袋」）が表示されてしまうというわけです。まあ、下部に表れるタイトルを見て、読んでみても良いと思ってもらえたら、その時点で日付をクリックしていただければ良い話ではあるのですが。
というわけで、やったこと。
- modules/calendar を編集
各日を表示するための
また、タイトルを表示したいところに
- 前回作ったcalendar.jsを編集
- DTMLメソッド daylist_xml を追加
内容は
- DTMLメソッド entry_body_xml を追加。
内容は
実際の作業手順は下から順の方が良いかな。また、 modules/calendar の編集のとこはレイアウトが崩れるので適当に改行を入れたので、そのままだとダメなところもあるかも。onmouseover のあたりとか？
- modules/calendar を編集
各日を表示するための
<a href="<dtml-var blogurl missing=""> /daylist_html?year=<dtml-var calendar_year> &month=<dtml-var calendar_month> &day=<dtml-var day>">の箇所を
<a href="<dtml-var blogurl missing=""> /daylist_html?year=<dtml-var calendar_year> &month=<dtml-var calendar_month> &day=<dtml-var day>"> onmouseover="javascript:show_topics(<dtml-var calendar_year>, <dtml-var calendar_month>, <dtml-var day>);">とし、マウスカーソルのonoverをハンドリングして show_topics 関数を実行するように。
また、タイトルを表示したいところに
<div id="topics"></div>を追加。
- 前回作ったcalendar.jsを編集
function show_topics(y, m, d) {
var topics = '';
var path = '<dtml-var blogurl>/daylist_xml?year='+y+'&month='+m+'&day='+d;
var xmlhttp = createHttpRequest();
xmlhttp.open("GET", path, true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
xmldocs = xmlhttp.responseXML;
var entries = xmlhttp.responseXML.getElementsByTagName('entry');
for (var i=0; i<entries.length; i++) {
var e = entries[i];
topics += '- <a href="'+e.getAttribute('link')+'">'+e.getAttribute("title")+'';
}
document.getElementById("topics").innerHTML = topics;
}
}
xmlhttp.send(null)
}
という関数を追加。- DTMLメソッド daylist_xml を追加
内容は
<dtml-call "RESPONSE.setHeader('content-type', 'text/xml')">
<?xml version="1.0" encoding="utf-8" ?>
<items>
<dtml-in "day_entry_items(year=year,month=month,day=day)">
<dtml-var entry_body_xml>
</dtml-in>
</items>
というもの。場所は daylist_html があるところ。- DTMLメソッド entry_body_xml を追加。
内容は
<entry title="<dtml-var entry_title>" link="<dtml-var blogurl>/<dtml-var id>" />というもの。場所は daylist_xml と同じところ。
実際の作業手順は下から順の方が良いかな。また、 modules/calendar の編集のとこはレイアウトが崩れるので適当に改行を入れたので、そのままだとダメなところもあるかも。onmouseover のあたりとか？
Posted by setomits at 12:38 |
Comments: 3
他の日の上を通ってリンクが変わってしまう。悲しい。
でも確かに、リンククリックにマウスを持って行くのが難しいｗ
あとでパクってCOREBlog2用を作ろうかなぁ‥‥
他の日の上をうまく避けてリンクまでたどり着けてこそ○○じゃないですか！
という意味不明なことは置いといて、この改善案。
1. リンクになっているからついクリックしようとカーソルを動かしてしまう。ので、リンクではなくしてタイトルをリストするにとどめる。
2. カーソルの周辺に div が現れるようにする。
3. 日にちアンカーのtitle属性にタイトルを並べるようにして、ブラウザのバルーン（？）で表示されるようにする。
はて、どれが正解なんでしょうかね。