前の記事 ≪:ベクター形式の汎用の矢印アイコンセット
次の記事 ≫:エクスプローラー風のツリー型テーブルを実現できるjQueryプラグイン...

現ページのリンクの非アクティブ化にもう面倒なif分岐処理は不要 「CurrentPage.js」を公開

2009年03月09日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法

 

現ページのリンクの非アクティブ化にもう面倒なif分岐処理は不要 「CurrentPage.js」を公開しました。

「 トップページ | リンク | 掲示板 」といったナビゲーションメニューがあると思いますが、アクティブな場合に、太字にして<a>を消すっていう処理をphpなどで書いている場合があると思いますが、非常にコードが見づらくなって、メニューが増えるたびに面倒な分岐処理を追記しなければなりませんでした。

(面倒な分岐の例)
<?php if ($current_url == "link.php") { ?>
<strong>リンク集</strong>
<?php } else { ?>
<a href="link.php">リンク集</a>
<?php } ?>

ということで、CurrentPage.jsを作りました。

デモページはこちら

設置は簡単で、<a> タグに class="currentpage" を指定して、後ほどcurrentpage.jsを読み込むだけです。

<a href="index.php" class="currentpage">toppage</a> |
<a href="2.php" class="currentpage">links</a> |
<a href="3.php" class="currentpage">profile</a> |
<a href="4.php" class="currentpage">bbs</a> |
<a href="5.php" class="currentpage">diary</a><br>
<script type="text/javascript" src="currentpage.js"></script>

単体でも使えるよう、jQueryのプラグインとかにはなっていないので、そうしたい方は書き直すのもよいかもしれません。
jQueryだと数行で実現できそうです(^^;
aタグの後で読み込むのがダサいという方はonloadイベントに記述してください。

currentpage.js のConfig

currentpage.js 内の変数を変えることで若干ですが挙動を変更できます。

// カレントページの文字の色 style.color の値
var current_color = 'black';
// カレントページのボールディング style.fontWeightの値
var current_fontWeight = 'bold';
// カレントページの style.textDecorationの値
var current_textDecoration = 'none';
// ディレクトリルートにアクセスした場合のデフォルトページの定義。デフォルトでも問題ないかと思いますが index.jspみたいな方は調整が必要
var defaultpages = ['index.html','index.htm','index.php','index.asp','default.htm'];

ページ構築にお役立て頂けると幸いです。

関連の記事検索:JavaScript, ナビゲーション, Web制作, jQuery
スポンサード リンク

By.KJ : 2009年03月09日 07:09 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)