JavaScriptでページナビゲーション
2008.08.27 13:12:53 , Posted
2013.05.04 17:22:07 , Update by Gyokuei
私立晶嵐学園あにめ部で使用している目次リンクスクリプト
※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)
このページを読み返す
コメントする