サイト構築にはなくてはならなくなったjQuery。
いろいろなことが簡単にできるjQueryですが、最近、「これは」というJavascriptを発見。
過日。
あるサイトのページ追加を行ったのだが、作業後に聞いたところ、全く縁もゆかりもない2人のデザイナーを経た後であった。
感想から申しますと、意味不明なフォルダ階層と共通使用か、該当ページ使用のみなのかわからない名称付けをしたIDとClassがいっぱい・・。
既存の設定に下手に手を入れると、どこのページが崩れるかわからない・・ページ追加だったので、新たにIDやClassを作ることになるのだが、非効率的な設定としかいえない。
そんなファイルセットだったが、一つだけ「おお。」と思えるものが一つ。
JQueryを利用した、Javascriptだ。
その名も。
このJavascriptを導入すると何ができるかといいますと。
- 画像のロールオーバー
- 現在開いているページのリンクをハイライト表示
- 外部リンクの別ウインドウ表示
- thickboxの利用(thickbox.cssとthickbox,jsの別途読み込みが必要）
- ページ内リンクのスムーズスクロール
- 簡易タブ機能
- リストや表などで交互に背景カラーを変える際に有効な奇数・偶数クラスの追加
- IE6対応の:first-child疑似クラス・:lastChild疑似クラスを利用可能とする（付加大らしいです）
・・とまあ、8つ（thickboxは別途cssとjsの追加が必要）のことが、yuga.jsを追加することでできてしまいます。
特に私が使いたいのは「2.現在開いているページのリンクをハイライト表示」。
段階を踏んでコンテンツを追加していく制作の場合、DWのライブラリ機能を使うと、グローバルメニューの変更などが簡単に行えますが、「開いているページをハイライト表示（オーバー状態にして）して」と指定が来ると、ライブラリ機能は使えません。
でも、このyuga.jsを使用することによって、htmlコードで書き換えなどをしなくても、自動的にハイライト表示にしてくれるので、ライブラリ機能を使ってのグローバルメニューの管理が可能になります。
嗚呼。
長年の悩みがほどけていくよ。(￣▽￣*)
「2.現在開いているページのリンクをハイライト表示」を利用する場合、
通常画像
ロールオーバー画像（_onをつける）
ハイライト画像（_cr）
の
3つが必要なわけですが、ハイライト画像を作るのが面倒だ・ロールオーバー画像をハイライト画像に使用したいという場合は、
yuga.js内71行目付近の
postfix: ‘_cr’
を
postfix: ‘_on’
に変更すると、ロールオーバー画像でハイライト表示ができます。
そのほか、パラメーターの解説等は
見ると非常にわかりやすいです。
親切設計ですな♪