当研究室では一部のコンテンツで記事の折りたたみと展開を行っています。このページでは当研究室で採用もしくは検討した方法を紹介します。実際の動作を確認することができます。
[ 戻る ]
2013年6月30日から2015年7月10日まで当研究室のトップページで使用していた方法です。
展開および折りたたみをしたいタグに"info_0", "info_1", ...と順にIDを振り、これらのIDに対して個別に表示/非表示の設定を行います。複数箇所でそれぞれ独立に制御を行うときでも、ページ内全体のIDに対して表示/非表示の設定を行う必要があります。
javascript のソースコードです。disp_info関数の引数は可変長で、1番目から"info_0", "info_1", ...の順で、表示するIDには true、表示しないIDには false をセットします。
function disp_info () {
/* 「続きを読む」等の制御 */
/* 引数：可変長、true = 表示、false = 非表示 */
var ele = document;
var arg = disp_info.arguments;
for (var i = 0, len = arg.length; i < len; i++) {
ele.getElementById('info_'+i).style.display = (arg[i])? 'block' : 'none';
}
}2015年7月10日まで実際にトップページで使用していたHTMLコードとその実行結果です。
<p>プログラミング研究室で天体の位置推算ソフト Planet Mate を公開しています。また、</p>
<p id="info_0" style="font-size:80%;">
<a href="javascript:void(0)" onclick="disp_info(false,true,true,false,false);">【続きを見る?】</a>
</p>
<p id="info_1" style="display:none;">
9年ぶりに全てのソフトウェアをバージョンアップしました。是非ご利用下さい。
</p>
<p id="info_2" style="font-size:80%;display:none;">
<a href="javascript:void(0)" onclick="disp_info(false,true,false,true,true);">【もっと見る?】</a>
</p>
<p id="info_3" style="display:none;">
短波研究室でVoice of Koreaのスケジュール（3月29日改編、A15）を公開しています。
</p>
<p style="font-size:80%;display:none;" id="info_4">
<a href="javascript:void(0)" onclick="disp_info(true,false,false,false,false);">【隠す?】</a>
</p>プログラミング研究室で天体の位置推算ソフト Planet Mate を公開しています。また、
[ 戻る ]
2015年7月11日から、当研究室のトップページ並びにソフトウェア紹介のページで使用している方法です。アルゴリズム【1】のように、段階的に展開していくことはできなくなりましたが、複数箇所が独立に制御できるようになりました。
javascriptのソースコードです。引数のtargetIDには表示/非表示の操作対象となるタグのID、visibleには対象を表示するときは
true、非表示のときは false をセットします。ソース中の
display = '' は、該当する要素のCSSのdisplayプロパティ値を既定値に戻すことを意味しています。
function disp_info (targetID, visible) {
/* 「続きを読む」等の制御 */
var ele = document;
if (visible) {
ele.getElementById(targetID).style.display = ''; //本文表示
ele.getElementById(targetID + '_open').style.display = 'none'; //「続きを読む」非表示
ele.getElementById(targetID + '_close').style.display = ''; //「たたむ」表示
} else {
ele.getElementById(targetID).style.display = 'none'; //本文非表示
ele.getElementById(targetID + '_open').style.display = ''; //「続きを読む」表示
ele.getElementById(targetID + '_close').style.display = 'none'; //「たたむ」非表示
}
}トップページで使用しているHTMLコードとその実行結果です。表示/非表示の制御対象となるタグのIDが"abc"のとき、「続きを読む」など展開操作のリンクのIDは末尾に"_open"を付加した"abc_open"、「たたむ」など折りたたみ操作のリンクのIDは末尾に"_close"を付加した"abc_close"とする必要があります。
<p>
プログラミング研究室でグループ分けツール Gruop Mateを公開しました。同時に
<span id="info_open">
... <a href="javascript:void(0)" onclick="disp_info('info',true);" style="font-size:80%;">【続きを見る】</a>
</span>
<span id="info" style="display:none;">
、天体の位置推算ソフト Planet Mate を公開しています。合わせてご利用下さい。<br>
また、短波研究室では、Voice of Koreaのスケジュール（3月29日改編、A15）を公開しています。
</span>
<p id="info_close" style="display:none;">
<a href="javascript:void(0)" onclick="disp_info('info',false);" style="font-size:80%;">【隠す?】</a>
</p>プログラミング研究室でグループ分けツール Gruop Mateを公開しました。同時に... 【続きを見る】
ソフトウェア紹介のページの「バージョンアップ概要」と「サポート」で使用しているHTMLコードとその実行結果です。ここでは、▼が展開ボタン、▲が折りたたみボタンになります。
<h4>
Version 2.21 <a href="javascript:void(0)" id="v221_open" onclick="disp_info('v221',true);" title="表示">▼</a>
<a href="javascript:void(0)" id="v221_close" onclick="disp_info('v221',false);" style="display:none;" title="非表示">▲</a>
</h4>
<ul id="v221" style="display:none;">
<li>九星計算で西暦4300年頃から8500年頃に120日周期が出現し不連続になるバグを修正しました。</li>
<li>誤字を修正（赤経、黄経）しました。</lii>
<li>Windows95を対応OSから除外しました。</li>
<li>exeファイルのプロパティの会社名を"OkaSoft"から"Oka Laboratory"に変更しました。</li>
<li>ヘルプメニューの「Webサポート」を「Oka Laboratory Webページ」に変更しました。</li>
</ul>Version 2.21 ▼ ▲
[ 戻る ]
アルゴリズム【1】から変更する際に検討したものです。ソフトウェア紹介のページでは使いやすいものでしたが、当研究室のトップページでは使い難いため却下しました。
javascriptのソースコードです。引数のtargetIDには表示/非表示の操作対象となるタグのIDをセットします。targetIDの要素が表示されているときは非表示に、非表示の時には表示するアルゴリズムとなっています。
function disp_info (targetID) {
/* クリックにより、targetIDの要素の表示と非表示を切り替え */
var ele_style = document.getElementById(targetID).style;
var ele_event; // onclick eventが発生した要素
if (window.event) {
ele_event = window.event.srcElement;
} else {
/* FireFox用 */
ele_event = arguments.callee.caller.arguments[0].target;
}
if (ele_style.display == 'none') {
ele_style.display = '';
ele_event.title = '詳細を隠す';
} else {
ele_style.display = 'none';
ele_event.title = '詳細を表示';
}
}FireFoxにはwindow.eventオブジェクトが実装されていないため、argumentsオブジェクトを利用しイベントオブジェクトを取得しています。
| arguments.callee | 現在実行している関数本体を示すFuctionオブジェクト |
|---|---|
| arguments.callee.caller | 現在実行している関数の呼び出し元関数 |
| arguments.callee.caller.arguments | 呼び出し元関数の引数 |
| arguments.callee.caller.arguments[0] | 呼び出し元関数がキャプチャしたイベントオブジェクト（window.eventに相当） |
| arguments.callee.caller.arguments[0].target | 最初にイベントが送られたオブジェクト（window.event.srcElementに相当） |
HTMLコードとその実行結果です。
<h4>
<a href="javascript:void(0)" onclick="disp_info('v211')" title="詳細を表示">Version 2.11</a>
</h4>
<ul id="v211" style="display:none;">
<li>惑星の日心黄経シミュレーションで惑星名を表示するようにしました。</li>
<li>地球と月のシミュレーションで春分点γ等への方位線を追加しました。</li>
<li>日食シミュレーションで月の視半径に視差を加味するようにしました。</li>
<li>シミュレーションウィンドウの夜明/日暮〜天文薄明の背景色をRGB(0, 0, 192)からRGB(0, 64, 128)に変更しました。</li>
<li>exeファイルのプロパティの会社名を""OkaSoft"から"Oka Laboratory"に変更しました。</li>
<li>ヘルプメニューの「Webサポート」を「Oka Laboratory Webページ」に変更しました。</li>
</ul>Version 2.11
[ 戻る ]
[ 戻る ]
