« 先人に学ぶ~タイトルの横にカテゴリを表示する~ | メイン | 先人に学ぶ~カレンダーを月めくりに~ »

[ MovableType ] エントリを部分的に折りたたむ(v0.2)

エントリを部分的に折りたたむのスクリプトを微改造。

[隠す][表示する]のラベルを個別に指定できるようにしてみた。

デフォルトではこう。

デフォルトはこんな感じ

サンプルを兼ねて。



//
// 記事の折りたたみを制御する
// textcollapse.js ver 0.2
//

// 折りたたみ対象部分のコンテナになるtag
// 注)'div'以外で動作するかは未検証
gTextCollapseTagName = 'div';
// 折りたたみ対象部分のclass名
gTextCollapseClassName = 'TextCollapse';
// 折りたたみを切替えるスイッチのテキストを指定するAttribute名
gTextCollapseExpandAttrName = 'tcExpandLabel';
gTextCollapseCollapseAttrName = 'tcCollapseLabel';
// 折りたたみを切替えるスイッチ(ラベル)部のclass名
gTextCollapseSw1ClassName = 'TextCollapseLabel'; // 上部
gTextCollapseSw2ClassName = 'TextCollapseLabel'; // 下部
// 折りたたみを切替えるスイッチ(ラベル)部のid名のプレフィックス
gTextCollapseSw1IdPrefix = 'TextCollapseSW1'; // 上部
gTextCollapseSw2IdPrefix = 'TextCollapseSW2'; // 下部
// 折りたたみ部のclass名
gTextCollapseBodyClassName = 'TextCollapseBody';
// 折りたたみ部のid名のプレフィックス
gTextCollapseBodyIdPrefix = 'TextCollapseBody';
// 折りたたみを切替えるスイッチ(ラベル)の表示位置
// 0:上部のみ 1:下部のみ 2:上部下部両方
gTextCollapseSwPosition = 2;
// 折りたたみを切替えるスイッチのデフォルトのテキスト
gTextCollapseExpand = '[詳細を表示]';
gTextCollapseCollapse = '[詳細を隠す]';


//--------------------------------------
// 展開リンク組み立て
//--------------------------------------
function makeTextExpandLink( aIdNum, aLabel )
{
var lnkText = ( ( aLabel ) ? aLabel : gTextCollapseExpand );

return ( '<a href="#' + lnkText + '" ' +
'onclick="return( SwitchTextCollapse(' + aIdNum + ') );" ' +
'onkeypress="return( SwitchTextCollapse(' + aIdNum + ') );">' +
lnkText + '</a></span>' );
}

//--------------------------------------
// 折りたたみリンク組み立て
//--------------------------------------
function makeTextCollapseLink( aIdNum, aLabel )
{
var lnkText = ( ( aLabel ) ? aLabel : gTextCollapseCollapse );

return ( '<a href="#' + lnkText + '" ' +
'onclick="return( SwitchTextCollapse(' + aIdNum + ') );" ' +
'onkeypress="return( SwitchTextCollapse(' + aIdNum + ') );">' +
lnkText + '</a></span>' );
}

//--------------------------------------
// 折りたたみの初期化
//--------------------------------------
function initTextCollapse()
{
var tagObjs = this.document.getElementsByTagName( gTextCollapseTagName );
var sw1Text = ''
var sw2Text = ''
var sw1Link = ''
var sw2Link = ''
var sw1Label = ''
var sw2Label = ''
var bdyText = ''

for ( var i = 0; i < tagObjs.length; i++ )
{
if ( tagObjs[i].className == gTextCollapseClassName )
{
bdyText = tagObjs[i].innerHTML;
bdyText = bdyText.replace(/^<br>/ig, '' );
bdyText = bdyText.replace(/\r\n$/ig, '' );
bdyText = bdyText.replace(/\r$/ig, '' );
bdyText = bdyText.replace(/\n$/ig, '' );
bdyText = bdyText.replace(/<br>$/ig, '' );

sw1Label = tagObjs[i].getAttribute(gTextCollapseExpandAttrName);
sw2Label = tagObjs[i].getAttribute(gTextCollapseCollapseAttrName);

sw1Link = makeTextExpandLink ( i, sw1Label );

sw1Text = '<span id="' + gTextCollapseSw1IdPrefix + i + '" ' + 'class="' + gTextCollapseSw1ClassName + '"';

if ( sw1Label )
{
sw1Text += ' ' + gTextCollapseExpandAttrName + '="' + sw1Label + '"';
}
if ( sw2Label )
{
sw1Text += ' ' + gTextCollapseCollapseAttrName + '="' + sw2Label + '"';
}

sw1Text += '>' + sw1Link + '</span>';

if ( gTextCollapseSwPosition > 0 )
{
sw2Link = makeTextCollapseLink ( i, sw2Label );

sw2Text = '<span id="' + gTextCollapseSw2IdPrefix + i + '" ' + 'class="' + gTextCollapseSw2ClassName + '"';

if ( sw2Label )
{
sw2Text += ' ' + gTextCollapseCollapseAttrName + '="' + sw2Label + '"';
}

sw2Text += '>' + sw2Link + '</span>';
}

tagObjs[i].innerHTML = sw1Text +
'<div id="' + gTextCollapseBodyIdPrefix + i + '" ' +
'class="' + gTextCollapseBodyClassName + '">' +
bdyText + '</div>' + sw2Text;

document.getElementById( gTextCollapseBodyIdPrefix + i ).style.display = "none";
if ( gTextCollapseSwPosition > 0 )
{
document.getElementById( gTextCollapseSw2IdPrefix + i ).style.display = "none";
}
}
}
}

//--------------------------------------
// 折りたたみ/展開の切替え
//--------------------------------------
function SwitchTextCollapse( idNum )
{
var objSW1 = document.getElementById( gTextCollapseSw1IdPrefix + idNum );
var objSW2 = document.getElementById( gTextCollapseSw2IdPrefix + idNum );
var objBody = document.getElementById( gTextCollapseBodyIdPrefix + idNum );

if ( objBody )
{
if ( objBody.style.display == 'none' )
{
if ( objSW1 )
{
if ( gTextCollapseSwPosition == 1 )
{
objSW1.style.display = "none";
}
else
{
objSW1.innerHTML = makeTextCollapseLink ( idNum,
objSW1.getAttribute(gTextCollapseCollapseAttrName) );
}
}

objBody.style.display = "block";

if ( objSW2 )
{
objSW2.style.display = "block";
}
}
else
{
if ( objSW1 )
{
if ( gTextCollapseSwPosition == 1 )
{
objSW1.style.display = "block";
}
else
{
objSW1.innerHTML = makeTextExpandLink ( idNum,
objSW1.getAttribute(gTextCollapseExpandAttrName) );
}
}

objBody.style.display = "none";

if ( objSW2 )
{
objSW2.style.display = "none";
}
}
}

return false;
}


設置方法などは改造前と同じ。

投稿者 Kobito : 2005年04月28日 00:10

このエントリーのトラックバックURL

トラックバックはご自由にどうぞ。報告は不要です。

http://kobito.dnsalias.com/kobito/mt/mt-application/mt-tb.cgi/9

このエントリーへのトラックバック

» エントリを部分的に折りたたむ(v0.3) from Kobito's weblog
エントリを部分的に折りたたむのスクリプトを微改造。 折りたたみ範囲が大きい場合に... [続きを読む]

トラックバック時刻: 2005年05月07日 22:17

このエントリーへのコメント

fKnoQf

投稿者 Yryncmgx : 2009年07月16日 22:21

コメントしてください

ご感想など残してもらえると励みになります




保存しますか?