先日参加したセミナーで便利なモノ教えてもらいました。
そのご紹介です。

yuga.js。何で今まで教えてくれなかったの？？

ﾒﾓﾒﾓﾒﾓ_φ(._.φ(ﾟ-ﾟ;φ(._.φ(ﾟ-ﾟ;φ(._.φ(ﾟ-ﾟ;)です。

先日、Dreamweaverの活用セミナーに出席したとき、ボタンとかグローバルナビのロールオーバーのソース記述方法の歴史、、、みたいな話があったんですね。

そこで、はじめてききました。
yuga.js。

何でこんな便利なもの、今まで誰も教えてくれなかったんですかぁ(｡□｡；)

てか、こんな便利なもの自由に使っていいですよ、ってどんだけ親切な方なんですかぁっっΣ(T□T)

そのときのセミナーの講師の方からもお話があったのですが、制作者のKyosukeさんという方は、Webデザイナーが働きすぎだと、少しでも楽に、『優雅』に制作できるよう作られた、jQueryのプラグイン、『yuga.js』らしいです。

おはずかしながら、私、javascriptちっともわかりません。。。r(^ω^*)))
必要なときは調べまくって、よくわからんまま、それっぽいのを、ぴろん、とコピペ、
よくわからんけど、動いたﾗｯｷｰ(〃´・ω・`)ゞ♪
くらいの勢いです。

そんな私でも使えこなせちゃったのでほんとありがたいです。

機能としては、

• ロールオーバー
• 現在のページをハイライト表示
• 外部リンクは別ウインドウを設定
• 画像へ直リンクするとthickboxで表示(thickbox.js利用)
• ページ内リンクはするするスクロール
• 簡易タブ機能
• 奇数、偶数を自動追加
• 最初・最後の要素、空の要素

私が今まで制作したサイトの中で、『ロールオーバー』と『ページ内リンク』は、必要ないサイトはありませんでした。
必ずどんな形にせよ、つけてました。

それが、yuga.jsを利用することで、ほんとにかなり簡単に設定ができます。

さっそく現在制作中のサイトで利用させてもらいました。

yuga.jsのマウスオーバー

yuga.jsを利用した場合、＜img src=”btn.gif” width=”52″ height=”15″ alt=”ぼたん” class=”btn”＞
通常用のボタン画像、▲▲▲.jpg、あとオーバー時用の画像、▲▲▲_on.jpgこの画像2種類用意して、class=”btn”つけると、かってにめんどくさいことやってくれるんですね!
素敵です！

また、機能の一つの□現在のページをハイライト表示のために、▲▲▲_cr.jpgを用意しておくとこれまた簡単、class=”current”をつけるだけで「自分のページにいるときナビ画像が違う、ｵﾚは今ここだぜっ」ってのが簡単に設定できるんですね。ありがたい。

これまで、ナビゲーションなんかはincludeしたファイル内でdirname() やらfilename() で切り分けて、うんちゃらかんちゃらwwwwwって、必死に長いソースを書いてましたが、これだとclassつけるだけ、簡単です。

yuga.jsのするするスクロール

ページするする～に関しては、このブログ内でも使ってる、smoothScroll.jsをよく使ってます。

で、yuga.jsはこれも入ってますね。
アニメーションするのはhref属性の値が#から始っているa要素, area要素、らしいです。

普通のアンカーって絶対よくないと思うんですよね。
カチッと一瞬で変わると、何が起こったかわかん。
そして何より、びゅーんと動くときもちくて、動かしてる感がよいですよね。

私のような人にも簡単に使えるんです

今制作してるサイトは上記の2つを活用したのですが、その他、色々機能がありつつ、でも使わないときは▲▲行目を削除してね、っって、親切にも書いてくださってるんですよねo(；△；)o

サイトによっては、thickboxもtab機能も必ずいつかは使う機能です。
また、あのサイト作ったときこれ知ってりゃよかったｗｗって思うものもたくさん。

これからたくさん活用させてもらいたいと思います！！