クイックジャンプ

サンプル

JavaScriptがoffになっていると表示されません。

▲ToPageTop

ダウンロード

ソース

▲ToPageTop

スクリプトの概要

サイトのコンテンツを選択するだけで、そのページへ移動できます。また、外部ファイルで一括管理ができるので、コンテンツの増減にも柔軟に対応できます。

▲ToPageTop

カスタマイズ

ダウンロードしたファイルの約100行目〜「カスタマイズここから〜カスタマイズここまで」の部分に

o.push( new SelectOption( URL, ラベル, 階層の深さ ) ) ;
o.push( new SelectOption( URL, ラベル, 階層の深さ ) ) ;
o.push( new SelectOption( URL, ラベル, 階層の深さ ) ) ;
.
.
.

引数の説明

URL
文字通りそのページのURLを記述します。URLが未記入の場合、この項目を選択してもページの移動は行われません。絶対URL、相対URLのどちらでも可。ただし相対URLの時はpath + "基底ディレクトリからの相対パス"という風に記入します(下の「参考(ここで実際に使用しているもの)」参照)。
ラベル
そのページのタイトル。「トップページ」や「ゲーム攻略」などなど。
階層の深さ
0〜3の数字を記入。数が大きいほど階層が深い。(下のexample参照)

をつらつらと記述します。参考(ここで実際に使用しているもの)

-- example --

/*
このような階層だとすると

トップページ
	コンテンツ1
		サブコンテンツ1-1
	コンテンツ2
		サブコンテンツ2-1
		サブコンテンツ2-2
	コンテンツ3
		サブコンテンツ3-1
		サブコンテンツ3-2
 */

o.push( new SelectOption( "",                                      "コンテンツ一覧",    0 ) ) ;
o.push( new SelectOption( "http://www.hoge.co.jp/index.html",      "トップページ",      1 ) ) ;
o.push( new SelectOption( "http://www.hoge.co.jp/contents1/",      "コンテンツ1",       2 ) ) ;
o.push( new SelectOption( "http://www.hoge.co.jp/contents1/sub1/", "サブコンテンツ1-1", 3 ) ) ;
o.push( new SelectOption( "http://www.hoge.co.jp/contents2/",      "コンテンツ2",       2 ) ) ;
o.push( new SelectOption( "http://www.hoge.co.jp/contents2/sub1/", "サブコンテンツ2-1", 3 ) ) ;
o.push( new SelectOption( "http://www.hoge.co.jp/contents2/sub2/", "サブコンテンツ2-2", 3 ) ) ;
o.push( new SelectOption( "http://www.hoge.co.jp/contents3/",      "コンテンツ3",       2 ) ) ;
o.push( new SelectOption( "http://www.hoge.co.jp/contents3/sub1/", "サブコンテンツ3-1", 3 ) ) ;
o.push( new SelectOption( "http://www.hoge.co.jp/contents3/sub2/", "サブコンテンツ3-2", 3 ) ) ;

終わったらアップロードします。

▲ToPageTop

タグの埋め込み

次に、クイックジャンプを設置したいページのヘッダに以下のコードを記述します。

<script src="./quickJump.js" type="text/javascript"></script>
-- example --

<html>
<head>
<script src="./quickJump.js" type="text/javascript"></script>
<title></title>
</head>

そしてクイックジャンプを表示させたい部分に以下のコードを記述します。

<script type="text/javascript">
<!--
 displayJumpForm( path ) ;
//-->
</script>

引数の説明

path
上で説明したURLの記述の仕方で異なります。
  • 絶対URLで記述した時…無記入でOKです。
  • 相対URLで記述した時…クイックジャンプを表示させるページから基底ディレクトリへの相対URLもしくは基底ディレクトリの絶対URLを記述します。
-- example1(URLを絶対URLで記述したとき) --

<script type="text/javascript">
<!--
 displayJumpForm( ) ;
//-->
</script>
-- example2(URLを相対URLで記述したとき) --


-- example2_1(基底ディレクトリへの相対URL) --

<script type="text/javascript">
<!--
 displayJumpForm( "../" ) ;
//-->
</script>


-- example2_2(基底ディレクトリへの絶対URL) --

<script type="text/javascript">
<!--
 displayJumpForm( "http://www.hoge.co.jp/" ) ;
//-->
</script>

これをアップロードして完成です。おつかれさまでした。

▲ToPageTop

免債等

簡単なプログラムなので著作権は放棄します。ご自由にどうぞ。

▲ToPageTop

独り言

▲ToPageTop

履歴

▲ToPageTop