Crimson Report

<< 蜘蛛男2、マッハ!!!を観た | てんこくへの段階 >>


スポンサーサイト

Fri 18 11, 2005

Permalink : http://sug.jugem.cc/?eid=

一定期間更新がないため広告を表示しています

| posted at | filed under - | - | - |

Latest entry


プレパゲ・ネクパゲ【4】

Fri 10 12, 2004

Permalink : http://sug.jugem.cc/?eid=229

説明しよう。プレパゲ・ネクパゲとは、Preview Page / Next Page の略で前後のページへの移動、あるいは案内表示のことである。

tukinavi

パン屑ナビでの縦の移動とプレパゲ・ネクパゲの横の移動とは、切っても切れない金太郎飴であり、統合的・総括的・混線的ナビゲーションの確立のためにはかかせないものなのだ(牽強付会)今回は月別アーカイブを表示している時に前後月へのプレパゲ・ネクパゲを作る。

じゅげむのカレンダー部分には、前後月へのリンクがある。2004/12月現在、右の’>>’をクリックすると2005/1月に移動する。いきなり A HAPPY NEW YEAR!である(もちつけ)そこには、まだ書かれていない日記があって(更新しないでいいので楽だ!)、その時がやってくると書かれた通りの出来事が起きる。

「うわーん!ドラえも〜ん、なんとかしてよー」
あらかじめ日記〜 チャラリラッタラー

いや、ムリをしてスマン。私の年代だと恐怖新聞の方がイメージしやすい。(やはり未来の出来事が書かれてあり、読むと寿命が縮まる。しかも月刊だ)

さらにスマン。上に書いたようなことは起きない。すべてウソだ。本当はクリックしても空白のページに移動するだけである。また、過去に遡る場合でも記事が0件の月のページも表示してしまう。ここら辺をなんとかしてみよう。

月別ページへのリンクには {archives_list}というのが別にある。こちらの方が一般的であろう。このリストと現アドレスを解析してプレパゲ・ネクパゲを作り出す。

[ javascript ]

<script type="text/javascript">
<!--
function getEL(id) {
if (document.getElementById) return document.getElementById(id);
else if (document.all) return document.all(id);
}
function getTag(obj,name) {
if (document.getElementsByTagName) return obj.getElementsByTagName(name);
else if (document.all) return obj.all.tags(name);
}
// 以上サブルーチン

function makeMonthnavi(navi,list) {
var re = new RegExp(/.+month=(¥d+).*/);

if ( document.URL.match(re) ) { // 月別表示なら
var sMonth = RegExp.$1; // 年月を取得する

var objNavi = getEL(navi); // ナビの出力先を探す
if ( !objNavi ) return;
var objFocus = getEL(list); // アーカイブリストの親を探す
if ( !objFocus ) return;
var objAList = getTag(objFocus,'LI'); // アーカイブリストを分割
if ( !objAList || objAList.length < 2 ) return;

var outStr;
for ( var i=0;i<objAList.length;i++ ) {
if ( objAList[i].innerHTML.indexOf(sMonth) > -1 ) { // 現ページのアドレスと比較
if ( i == 0 ) { // 現ページは最新月
outStr = "&lt; 前月分".link(getTag(objAList[i+1],'A')[0].href) +' |';
} else if ( i == objAList.length-1 ) { // 現ページは最古月
outStr = '| ' +"次月分 &gt;".link(getTag(objAList[i-1],'A')[0].href);
} else { // 現ページは中間月
outStr = "&lt; 前月分".link(getTag(objAList[i+1],'A')[0].href) +' | ';
outStr += "次月分 &gt;".link(getTag(objAList[i-1],'A')[0].href);
break;
}
}
}
objNavi.innerHTML = outStr; // ナビ表示部分へ挿入
}
}

window.onload = function() {
makeMonthnavi('ナビを表示させる要素のID','アーカイブリストを内包する要素のID');
}
//-->
</script>

注意点:月別表示ではない、ナビ表示先がない、アーカイブリストがない、またはアーカイブリストの項目がひとつしかない場合には表示されません。

スクリプトを書く場所は<head>〜</head>内です。ナビを表示させる要素(タグ)・アーカイブリストを内包する要素にIDがなければ、それぞれ適宜設定してください。

月別表示では読み込み量が多くなりがちです。ナビの表示スピードを早めるには

window.onload = function() {
makeMonthnavi('ナビを表示させる要素のID','アーカイブリストを内包する要素のID');
}

の部分を削除し、ナビを表示させる要素・アーカイブリストを内包する要素、両方の記述よりも後の位置に以下のように記述します。</body>の直前でもOK。

<script type="text/javascript">
<!--
makeMonthnavi('ナビを表示させる要素のID','アーカイブリストを内包する要素のID');
//-->
</script>

関連記事

| posted at 19:56 | filed under Memo | comments(0) | trackbacks(0) |


スポンサーサイト

Fri 18 11, 2005

Permalink : http://sug.jugem.cc/?eid=

| posted at | filed under - | - | - |


Comments & Trackback


Search this site

about this site

Categories

Archives

Appddix