JavaScriptでページナビゲーション

2008.08.27 13:12:53 , Posted
2008.08.27 13:13:47 , Update by Gyokuei

私立晶嵐学園あにめ部で使用している目次リンクスクリプト

※JavaScriptをオフにしている環境だと見られません。

実際に使用しているページはここらへんなのですが
ITメディアとかそういうニュース系のサイトでは必ず見かけるこんなかんじのやつ

たぶんカテゴリを統一してみるとか、php化して記事分割するとかいう方法が考えられると思いますが、私の場合、

◎カテゴリをまたがった記事をシリーズ物として扱いたい。
◎1 2 3 ...　の場合に、当該記事へのリンクは貼らず、他すべての同シリーズ記事へのリンクをはりたい。
◎記事一覧も表示したい。
◎シリーズ物は全何話になるか決まっておらず、後のページに追加していく。後のページがないうちは、「次の話」へのリンクははらない。
◎上記の記述を、既にupした記事の本文を書き直さず、urlを記述する場所を１カ所にして実現したい。

という相当わがままな仕様要求になった為、JavaScriptで組んでみました。

◆urlリストは .js ファイル内に用意し、本文記事中や目次のページにはスクリプト名・番号・フラグを書くことで目次リンク機能を呼び出します。

なお、lightbox系のスクリプトとは共存できないことを確認しています。他にもPrototype系のやつと一緒だとダメかもです。改造してくれたかたご報告いただけるとうれしいです。

目次を用意するスクリプト(.jsファイル)

以下のようなスクリプトをテキストで書き、.jsファイルとして保存します。タイトルに日本語を使っていると思いますので、文字コードは必ず表示したいサイトのhtmlと同じにしてください。

//ページのタイトルとURL
Kiji_No = eval(Kiji_No);

var A_ITEM = new Array();
var A_URL = new Array();

A_ITEM[0] = "１ページ目のタイトル";
A_URL[0] = "1.html";
A_ITEM[1] = "２ページ目のタイトル";
A_URL[1] = "2.html";
A_ITEM[2] = "３ページ目のタイトル";
A_URL[2] = "3.html";

//前へ次へ

if(Kiji_top){
	if(Kiji_No != 0){
		prevno = Kiji_No - 1;
		document.write("<a href=\"" + A_URL[prevno] + "\" class=\"prev\" title=\"" + A_ITEM[prevno] + "\">前へ</a>");
	}
	document.write(" ∞ ");
		nextno = Kiji_No + 1;
	if(nextno != A_ITEM.length){
		document.write("<a href=\"" + A_URL[nextno] + "\" class=\"next\" title=\"" + A_ITEM[nextno] + "\">次へ</a>\n");
	}

Kiji_top = false;
}

//その章の全ページへのページ番号リンク

if(Kiji_pageno){
	count = 0;
	document.write("<div style=\"text-align:center;\">\n<table style=\"margin:auto;\"><tr><td> ");

for (var i in A_ITEM) {
		if(i == Kiji_No){
			document.write("<div style=\"color:#555555;font-weight:bold;text-decoration:none;display:block;font-size:15px;text-align:center;width:24px;height:24px;line-height:24px;vertical-align:middle;background:#EEEEEE;border:1px solid #C0C0C0;margin-right:4px;float:left;\">");
		}else{
			document.write("<a href=\"" +A_URL[i]+ "\" class=\"\" title=\"" +A_ITEM[i]+ "\" style=\"color:#FFFFFF;font-weight:bold;text-decoration:none;display:block;font-size:15px;text-align:center;width:24px;height:24px;line-height:24px;vertical-align:middle;background:#C0C0C0;border:1px solid #888888;margin-right:4px;float:left;\">");
		}
		count++;
		if(i == Kiji_No){
			document.write(count + "</div> ");
		}else{
			document.write(count + "</a> ");
		}
	}

document.write(" </td></tr></table>\n</div>\n");
	Kiji_pageno = false;
}

//記事下の次へ

if(Kiji_bottom){
		nextno = Kiji_No + 1;
	if(nextno != A_ITEM.length){
		document.write("<div style=\"border:1px solid #C0C0C0;background:#E0E0E0;padding:3px;margin:10px auto;\">\n 次の記事 <a href=\"" + A_URL[nextno] + "\">" + A_ITEM[nextno] + "</a> >>\n</div>\n");
	}

Kiji_bottom = false;
}

//その章の全ページへの記事リスト 話数入り

if(Kiji_list){
	count = 0;

for (var i in A_ITEM) {
		count++;
		document.write("\t<li><a href=\"" +A_URL[i]+ "\">" + count + ".「" + A_ITEM[i] + "」</a></li>");
	}

Kiji_list = false;
}

A_ITEM[0] = ""; //ページのタイトル
A_URL[0] = ""; //ページのURL（フルパスで）
の""にはタイトルとurlを手動入力します。
[]の中の数字を+1しながら記事の数だけ入力してください。

目次を呼び出す部分(.html中に記述)

表示したい部分に以下のように記述します。

2行目
var Kiji_No = "2";
何番目の記事であるかを、0から指定します。.jsファイルのurlリストの[]内の数字と同じにしてください。list表示時には何番にしてもかまいません。

3行目
var Kiji_top = true;
タイトル部分の「前へ」「次へ」を表示する場合はtrue、表示しない場合はfalseを指定します。

4行目
var Kiji_pageno = true;
1 2 3 ...を表示する場合はtrue、表示しない場合はfalseを指定します。

5行目
var Kiji_bottom = true;
「次の記事へ　（タイトル） >」を表示する場合はtrue、表示しない場合はfalseを指定します。

6行目
var Kiji_list = false;
記事リストを表示する場合はtrue、表示しない場合はfalseを指定します。

8行目

.js ファイルの位置を記述します。
目次ページなど、１つのページで複数のjsファイルを使うときには、jsファイルの名前を変えてください。

ナビゲーション部分のスタイルの変更は.js内で適宜

サンプルファイルのダウンロードはこちら(.lzh、4.87kb)