追記:どうもIE6ではJSエラーが発生するようです。
現在問題調査中。
さらに追記:無事解決しました。
→IE6以前でのエラー発生 無事解決です
他のブログサイトではよくある「続きを読む」機能。
あまりにも長い記事にはこの機能を用い、ページを無駄に使わない効果がありますが、実はこのBloggerには「続きを読む」機能がありません。
なので、あくまでも「続きを読む」風なJavaScriptを作成しました。
今回の処理は、簡単に言えば「消している」だけなので、画面ロード時に全て取得しています。
他のブログのような「続きを読む」機能とは(おそらく)処理が違うことを先に断っておきます。
完成品としては、以下のようになります。
今回参考にさせていただいたサイトはこちらです。
JAVAscriptコレクション・文章を折りたたんだり表示したり
SyntaxHighlighter リンク変更の時と同じように、ほるめすメモ帳inSeesaaにhtmとjsを置いて使用しています。
以下が作成したソースです。
▼続きを読む/たたむ
まずは「showhide.js」から。
と言っても、上記参考サイトのソースをそのまま使わせてもらっているので、ソースのみ。解説も割愛します。
function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。
if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する
//指定されたIDのstyle.displayがnoneなら
if( document.getElementById(targetID).style.display == "none") {
//blockに変更する
document.getElementById(targetID).style.display = "block";
} else { //noneでなければ、つまりblockなら
//noneにする
document.getElementById(targetID).style.display = "none";
}
}
}
続いて、「showhide.htm」のソース。
こちらもほぼソースを書き換えていないので解説不要ですね。
<html>
<head>
<title>「続きを読む」風JavaScript</title>
<meta http-equiv="Content-Type" content="text/html;CHARSET=SHIFT_JIS">
<script language="JavaScript" src="showhide.js"></script>
</head>
<body>
<pre>
<a href="#" onclick="showHide('SH-001');return false;">▼続きを読む/たたむ</a>
<div id="SH-001" style="display: none">
このように続きが表示されます。
閉じる場合は再度クリックします。</div>
</pre>
</body>
</html>
投稿
0 件のコメント:
コメントを投稿