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

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

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

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





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

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


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

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

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



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

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

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 ファイルの位置を記述します。
目次ページなど、1つのページで複数のjsファイルを使うときには、jsファイルの名前を変えてください。

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



サンプルファイルのダウンロードはこちら(.lzh、4.87kb)
このエントリーをはてなブックマークに追加 はてなブックマーク - JavaScriptでページナビゲーション RSS mailform

見る

▲このページを読み返す

次に書いたページ  swfobject 2.x を使ってFLASH埋め込み

前に書いたページ  写真からグラデーションを写し取る方法

関連する本
このページへリンクする


このページへトラックバック

※ このページに言及してない記事からのトラックバックはSPAMとみなして削除します。
※ 管理人が承認するまでトラックバックは表示されません。

コメントする

あにめはっく.jpとは?
イラスト等の講座サイトです。
個人でやってます。
本館は 銀の月動画計画

玉英って誰?
アニメ作ったりイラスト描いたり
プラグインやフォントや素材作ったり
色々してる謎の人です。
プロフィール

■無料フォントダウンロード等
よく訓練されたフォント屋
■背景素材・絵コンテ用紙等
よく訓練された素材屋@あにめはっく.jp
西洋ファンタジー風誤変換人名辞書データベース もめいよふ オンラインボイスの総合カタログ VoiceFL@G▼
■参考サイト リンク集
アキツセントラルTV
■作品のサイト
超法戦隊S.T.7
霊珠

玉英/ザラスドットコム作品一覧

リンク・RSS

リンクはご自由にどうぞ。

相互リンクご希望の方

このサイトは、次のライセンスで保護されています:
CCライセンス■表示-非営利-継承
クリエイティブ・コモンズについて

購読する このブログの読者になる

QRコード モバイル版こちら

作品購入

このサイトのバナー
Powered by Movable Type 4.01