February 29, 2004

エントリー、コメントの折りたたみ-2

以前のエントリーコメントの折りたたみで、コメントの折りたたみを行ったが、コメントも一応折りたたみ、展開表示があまり違和感なく表示できるように変更した。
  ↓
変更記録自分用メモです。

サイトは、
Scriptygoddess:Scripts: Collapsing entries AND COMMENTS
を参考にしました。
また、コメントの展開・折りたたみによりコメントだけの表示は必要なしと考え、TrackBack数表示の後に、コメントの数の表示と展開・折りたたみのエリアを表示するようにしました。

Maim Indexにjavascriptを追加:

Javascript追加部分:
<div id="content">
<div class="blog">
の後辺りに以下を追加:


<!-- Foldable Entry -->
<script language="javascript">
function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}

function showMoreComments(varA12, varB12){
var1232 = ('varXYZ2' + (varA12));
varABC2 = ('varP2' + (varA12));
if( document.getElementById ) {
if( document.getElementById(var1232).style.display ) {
if( varB12 != 0 ) {
document.getElementById(var1232).style.display = "block";
document.getElementById(varABC2).style.display = "none";
} else { document.getElementById(var1232).style.display = "none";
document.getElementById(varABC2).style.display = "block"; }
} else { location.href = varB12;
return true; }
} else { location.href = varB12;
return true; }
}
</script>

Main Indexの以下の部分を、変更します。

<MTEntryIfExtended>
<span class="extended"><a href="<$MTEntryPermalink$>#more">Continued... "<$MTEntryTitle$>"</a></span><br />
</MTEntryIfExtended>

<div class="posted">Posted by <$MTEntryAuthor$> : <a href="<$MTEntryPermalink$>"><$MTEntryDate format="%X"$></a>
<MTEntryIfAllowComments>
| <a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">TrackBack (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>
の部分を、

下記のように変更(TrackBack URLの表示を含んでいます)。


<MTEntryIfExtended>
<span id="varP<$MTEntryID$>"><a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');return false;">Read More » »</a><br /></span><div id="varXYZ<$MTEntryID$>" style="display: none"><p><$MTEntryMore$></p><a href="#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,0);return
true;">« « Hide More</a></div><br />
</MTEntryIfExtended>

<div class="posted">Posted by <$MTEntryAuthor$> : <a href="<$MTEntryPermalink$>"><$MTEntryDate format="%X"$></a>
<MTEntryIfAllowPings>
| <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">TrackBack (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings> |
<MTEntryIfAllowComments>
<span id="varP2<$MTEntryID$>" class="extended"><a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="showMoreComments(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');return false;">Comments(<$MTEntryCommentCount$>) » »<br /></a></span><div id="varXYZ2<$MTEntryID$>" style="display: none">
<MTComments>
<$MTCommentBody$>
<p>Posted by <$MTCommentAuthorLink$> at <$MTCommentDate$></p><br /><br />
</MTComments>
<a href="#<$MTEntryID pad="1"$>" onclick="showMoreComments(<$MTEntryID$>,0);return
true;">« Hide Comments</a></div>
</MTEntryIfAllowComments>
TrackBack URL: <$MTEntryTrackbackLink$>


今のところ、コメントを含めたこの表示の仕方が一番違和感がないかなというところです。
又違うscriptを見つけたら変更の可能性ありです。

Posted by Hiro : February 29, 2004 12:54 AM
Add this entry to your bookmark
ブックマークに追加する
TarackBack URL
http://herethere.cressel.com/mt/htb-tr2.cgi/322
TarackBack List
追記を更新せずに開閉する
SUUMARY:
 ここのブログでは、記事の一番下の左にある「追記を読む」のリンクをクリックすると、記事全体をもう一度更新して、追記部分が表示されています。それでは、「追記...
WEBLOG NAME: yozoの気が向いたと記2.0
TIME: October 10, 2006 07:06 PM

COMMENTS
Place Your Comment





Address required but will not be shown
(メールアドレスは必須ですが、表示されません)




Remember Name, E-mail, URL ? 

Check to receive E-mail when new comments arrived:
コメントに返信があった場合メールで受け取る: