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