WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

yuga.js

yuga.js :: Kyosuke.jp

ちょっとした実装を自動でしてくれたり、追加したりすることができるJavaScriptライブラリ

基本的に読みこむだけで動作する

機能一覧

画像ロールオーバー

通常のボタン画像とロールオーバー用の画像を用意し、
ロールオーバー用の画像の名前を「通常ボタンの画像の名前_on」とする。
さらにimgタグに class="btn"を追加するとロールオーバー機能を設定することができる。

<img src="img/btn.png" alt="" class="btn">

現在のページをハイライト表示

aタグで自分にリンクしている場合class="current"を付加|

<a href="./"><img src="img/btn.png" alt=""></a>

外部のサイトを別窓で表示

画像へ直リンクするとthickboxで表示

aタグのhrefを画像のパスにする

#でスムーススクロール

ボタンとなる要素のaタグに移動したい要素のid名を記述する。

タブ切替え

最初はひとつめのaタグのタブが表示されている。

<ul class="tabNav">
  <li><a href="#tab1">タブ1</a></li>
  <li><a href="#tab2">タブ3</a></li>
  <li><a href="#tab3">タブ3</a></li>
</ul>
<div id="tab1">1のタブ内容</div>
<div id="tab2">2のタブ内容</div>
<div id="tab3">3のタブ内容</div>

奇数・偶数を自動追加

奇数 class="odd"を付加
偶数 class="even"を付加

最初・最後の要素、空の要素

重い処理なため不要だったら切った方が良い

最初の要素 class="firstChild"を付加
最後の要素 class="lastChild"を付加
空の要素 class="empty"を付加

使用しない処理を切る

yuga.jsの中身を見ると、一番最初に関数を呼び出している箇所がある。

$(function() {
  //現在のページをハイライト表示
  $.yuga.selflink();
  //画像ロールオーバー
  $.yuga.rollover();
  //外部のサイトを別窓で表示
  $.yuga.externalLink();
  //画像に直リンクでthickboxで表示
  $.yuga.thickbox();
  //#でスムーススクロール
  $.yuga.scroll();
  //簡易タブ切り替え
  $.yuga.tab();
  //奇数、偶数をクラス自動追加
  $.yuga.stripe();
  //最初・最後の要素、空の要素をクラス自動追加
  $.yuga.css3class();
});

使用しない処理をコメントアウトする。