散財流生

« SPACEWARP 5000予約 | メイン | Fedora Core 2 -> 3 »

2004年12月10日

折りたたみ式追記

エントリーが長文になったときに後半を追記として記述しているのだが、全文を読むにはページを移動する必要があり面倒だという指摘がかねてからあった。
そこで、1クリックで追記を表示させたり、折りたたんだりできるようにしてみた。

going mame way : 追記部分とコメントTIPS

1ページにEntryを複数表示させる場合、長文だとどうしてもページ全体が文字ばかりになってしまい、読む気も失せるし見た目もよろしくない。 だからExtended(追記)の部分に続きを書いて<MTEntryIfExtended>で続きが読めるようにしてたんですが、これだとPermalinkに飛んでしまうので、また戻ったりしないといけなくなる。 どうしようかと思いながら海外のBLOGサイトを見ていると、Scriptygoddess: Collapsing entries AND COMMENTSというものを発見しました。

上記サイトで説明されているように手順としては、Main Indexテンプレートの下のほうにでも下記のJavaScriptを追加。

<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; }
}
</script>

<$MTEntryIfExtended$>から</$MTEntryIfExtended$>の間を下記の様に修正。

<MTEntryIfExtended>
<div id="varP<$MTEntryID$>">
<a title="続きを読む" href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,'<$MTEntryLink$>#a<$MTEntryID pad="1"$>');return false;">続きを読む</a>
</div>
<div id="varXYZ<$MTEntryID$>" style="display: none">
<a title="続きを隠す" href="#a<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,0);return true;">追記を隠す</a>
<$MTEntryMore$>
<a title="続きを隠す" href="#a<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,0);return true;">追記を隠す</a></div>
</MTEntryIfExtended>

JavaScript未対応ブラウザでもそれなりに表示できるように工夫されているのがすばらしいな。

投稿者 散財人 : 2004年12月10日 02:34

Trackback Pings

このエントリーのトラックバックURL:
http://www.sanzai.net/mt-tb.cgi/264

コメント

ivlqhzngy yieo ljybzpguq jhvywiup tliem iyvlnhe vkylcw

投稿者 xvhekwsg ubnmoxdv : 2008年07月27日 11:46

ivlqhzngy yieo ljybzpguq jhvywiup tliem iyvlnhe vkylcw

投稿者 xvhekwsg ubnmoxdv : 2008年07月27日 11:47

コメントしてください

名前:

メールアドレス:

URL:
保存しますか? はいいいえ

コメント: