yuga.js

Download

0.7.2 (33.2 KB)

お知らせ

0.7.1以下にXSSがありましたので、お使いの場合はお手数ですが更新してください。
malaさんご指摘ありがとうございます

ライセンス

このスクリプトはMIT License日本語訳)です。ライセンスに従う限り許可なく自由にご利用いただけます。

yuga.jsって?

ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。

制作者

Kyosuke

設置方法

  1. まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。
  2. yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。
    <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/thickbox.js"></script>
    <script type="text/javascript" src="js/yuga.js" charset="utf-8"></script>
  3. ほとんどの機能が読み込ませるだけで機能します。ロールオーバーしたい画像にはクラスを設定してください。

機能紹介

ロールオーバー

シンプル

_onと名前を付けたロールオーバー用画像を用意し、img要素にclass="btn"と設定することでロールオーバー機能を付けることができます。

サンプル

HTMLソース
<img src="img/btn.png" alt="" class="btn" />
用意する画像

btn.png

btn_on.png

グループ

通常ロールオーバーが反応する範囲は画像1つでカバーできますが、場合によって2つ以上の画像や画像とテキストが含まれたリンクなど、複数の個所でロールオーバー効果を連動させたい場合があります。そういった場合にはグループ化することで合わせて反応させることができます。設定するには反応する範囲を囲む要素にclass="btngroup"、実際に反応する画像にclass="btn"を設定します。

サンプル

リンクテキスト

HTMLソース
<a href="dummy1.html" class="btngroup"><img src="img/btn.png" alt="" class="btn" /><img src="img/btn.png" alt="" /><img src="img/btn.png" alt="" class="btn" /> リンクテキスト</a>
用意する画像

btn.png

btn_on.png

範囲

グローバルナビゲーションすべてにロールオーバーを設定する場合、class="allbtn"を親の要素に指定することにより、allbtnが設定された要素以下にあるimg要素すべてにclass="btn"を指定したのと同じ効果になります。

サンプル
HTMLソース
<div class="allbtn"><img src="img/btn.png" alt="" /> <img src="img/btn.png" alt="" /></div>
用意する画像

btn.png

btn_on.png

カスタムパラメータ

yuga.jsではパラメータを指定することで細かな動作を変更できます。パラメータは対応する機能にオブジェクトの形で渡します。指定しなかった場合はデフォルト値が使われます。

ロールオーバーのfunction

29行目付近 $.yuga.rollover();

パラメータ名 デフォルト値 解説
hoverSelector '.btn, .allbtn img' ロールオーバーのさせたいイメージを指定するセレクタ
groupSelector '.btngroup' グループ指定する要素のセレクタ
postfix '_on' ロールオーバー画像のファイル名につく接尾語
サンプル

ロールオーバーさせたいimg要素につけるクラスを「roll」、グループを「rollgroup」に変更する場合

$.yuga.rollover({
  hoverSelector: '.roll',
  groupSelector: '.rollgroup'
});

ImageReadyでのデフォルトロールオーバー画像名、_overに変更する場合

$.yuga.rollover({
  postfix: '_over'
});

#globalNav内のイメージをすべてロールオーバー対象にする場合

$.yuga.rollover({
  hoverSelector: '.btn, #globalNav img'
});