エントリを部分的に折りたたむのスクリプトを微改造。
[隠す][表示する]のラベルを個別に指定できるようにしてみた。
デフォルトではこう。
サンプルを兼ねて。
//
// 記事の折りたたみを制御する
// 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
コメントしてください
ご感想など残してもらえると励みになります