シンプル

_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'
});

ナビゲーションなど、現在のページをハイライトしたい場合があります。yuga.jsを読み込むとa要素で自分にリンクしている場合、その内容になっているimg要素をハイライト画像（_crのついた画像）に変更します。またa要素にはclass="current"が付加されます。

サンプル

HTMLソース

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

実行後のDOMソース

<a href="./" class="current"><img src="img/btn_cr.png" alt="" /></a>

用意する画像

btn.png

btn_cr.png

ウェブサイトでは、カテゴリ内のページでは現在所属するカテゴリをハイライトしたいという場合がよくあります。そういった場合はディレクトリにリンクすることで現在のページにリンクした場合と同じようにハイライトが可能です。判定は現在見ているページ（http://example.com/company/map.html）のURLに完全に含まれているパスかどうかで判定しています（http://example.com/company/, http://example.com/へのリンクを設定していた場合ハイライト、http://example.com/company/index.htmlの場合はハイライトしません）。またa要素にはclass="parentsLink"が付加されます。

サンプル

HTMLソース

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

実行後のDOMソース

<a href="../" class="parentsLink"><img src="img/btn_cr.png" alt="" /></a>

用意する画像

btn.png

btn_cr.png

カスタムパラメータ

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

現在地ハイライトのfunction

28行目付近 $.yuga.selflink();

パラメータ名	デフォルト値	解説
selfLinkAreaSelector	'body'	現在のページへのリンクか判定する範囲を示すセレクタ (0.7.1）
selfLinkClass	'current'	自ページにリンクしていた際にa要素に付加されるクラス
parentsLinkClass	'parentsLink'	親ディレクトリにリンクしていた際にa要素に付加されるクラス
postfix	'_cr'	ハイライト画像のファイル名につく接尾語
changeImgSelf	true	自ページにリンクしていた際、img要素を_crに変えるかどうか（true:有効, false:無効）
changeImgParents	true	親ディレクトリにリンクしていた際、img要素を_crに変えるかどうか（true:有効, false:無効）

サンプル

ハイライト機能を無効にする

//$.yuga.selflink();

#globalNav内のみをハイライト範囲とする

$.yuga.selflink({
  selfLinkAreaSelector: '#globalNav'
});

クラス付加機能だけを使い、画像の差し替えを無効にする場合

$.yuga.selflink({
  changeImgSelf: false,
  changeImgParents: false
});

通常リンクにはtarget="_blank"などを指定して別ウインドウで開くことはユーザーの選択を狭めることになり、アクセシビリティ上問題があるため、良くないとされています。しかし、現状世の中にあるウェブサイトでは外部リンクを別ウインドウで開くようにしているサイトが多く、またウェブサイト制作者であればクライアントより別ウインドウで開くよう指示される場合もあります。yuga.jsでは外部リンクは別ウインドウで開くようにする機能を用意しています。また、外部リンクが指定されているa要素にはclass="externalLink"を付加します。

サンプル

example.com

HTMLソース

<a href="http://example.com/">example.com</a>

実行後のDOMソース

<a href="http://example.com/" class="externalLink">example.com</a>

カスタムパラメータ

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

外部リンクのfunction

30行目付近 $.yuga.externalLink();

パラメータ名	デフォルト値	解説
windowOpen	true	別ウインドウで開くかどうか（true:別ウインドウ, false:無効）
externalClass	'externalLink'	外部ページにリンクしていた際にa要素に付加されるクラス
addIconSrc	''	リンクに外部リンクのアイコンを付加する際、外部リンクの後ろにつく画像のパスを指定する。

サンプル

クラスは付加するが別ウインドウでは開かない

$.yuga.externalLink({
  windowOpen: false
});

付加されるクラスを「external」に変更

$.yuga.externalLink({
  externalClass: 'external'
});

外部リンクアイコンをリンクの後ろに追加

$.yuga.externalLink({
  addIconSrc: '/img/icon_external.png'
});

thickbox.jsを使うとclass="thickbox"とするだけで簡単にLightbox風の効果を得られます。このclass="thickbox"を省略し、画像に直リンクを張るだけでthickboxが動作するようにします。この機能を使うにはthickbox.js, thickbox.cssが読み込まれている必要があります。

サンプル

HTMLソース

<a href="img/large.jpg"><img src="img/thumb.jpg" width="75" height="75" alt="ホテルの灯り" /></a>

アンカーを使ったページ内リンクはたいていのブラウザで瞬時にその位置に画面が切り替わるようになっており、クリックしたとき何が起こったのか一瞬混乱することがあります。yuga.jsではこれを解決するため、ページ内リンクをクリック時にアニメーションします。アニメーションするのはhref属性の値が#から始っているa要素, area要素です。

サンプル

ページの先頭へ戻る

HTMLソース

<a href="#wrapper">ページの先頭へ戻る</a>

このドキュメントで使っているような簡単なタブ機能を提供するものです。tabNavというクラスを設定した中のa要素を調べ、リンク先に設定されているdiv要素の表示を切り替えるようになります。 最初はひとつめのa要素のタブが表示され、また、現在開いているa要素にはactiveというクラスが設定されます。 もっと高度な機能が必要な場合は jQuery UIのタブ機能を利用をおすすめします。

HTMLソース

<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>

実行後のDOMソース

<ul class="tabNav">
  <li><a href="#tab1" class="active">タブ1</a></li>
  <li><a href="#tab2">タブ3</a></li>
  <li><a href="#tab3">タブ3</a></li>
</ul>
<div id="tab1" style="display: block;">1のタブ内容</div>
<div id="tab2" style="display: none;">2のタブ内容</div>
<div id="tab3" style="display: none;">3のタブ内容</div>

カスタムパラメータ

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

外部リンクのfunction

30行目付近 $.yuga.tab();

パラメータ名	デフォルト値	解説
tabNavSelector	'.tabNav'	タブのナビゲーション部分を示すセレクタ
activeTabClass	'active'	タブが表示されている際にa要素に付加されるクラス

サンプル

アクティブなa要素に付加されるクラス名を「activeTab」に変更

$.yuga.tab({
  activeTabClass: activeTab
});

リストや表で交互に背景色などを指定したい場合がよくあります。こういった場合に簡単に設定できるようyuga.jsでは奇数(odd)と偶数(even)のクラスを追加します。

サンプル

• リスト1
• リスト2
• リスト3
• リスト4

HTMLソース

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>

実行後のDOMソース

<ul>
  <li class="odd">リスト1</li>
  <li class="even">リスト2</li>
  <li class="odd">リスト3</li>
  <li class="even">リスト4</li>
</ul>

表の場合はtr要素に奇数(odd)と偶数(even)のクラスを追加します。

サンプル

名前	yuga.js
言語	JavaScript
ライブラリ	jQuery
ライセンス	MITライセンス

HTMLソース

<table>
  <tr>
    <th>名前</th>
    <td>yuga.js</td>
  </tr>
  <tr>
    <th>言語</th>
    <td>JavaScript</td>
  </tr>
  <tr>
    <th>ライブラリ</th>
    <td>jQuery</td>
  </tr>
  <tr>
    <th>ライセンス</th>
    <td>MITライセンス</td>
  </tr>
</table>

実行後のDOMソース

<table>
  <tr class="odd">
    <th>名前</th>
    <td>yuga.js</td>
  </tr>
  <tr class="even">
    <th>言語</th>
    <td>JavaScript</td>
  </tr>
  <tr class="odd">
    <th>ライブラリ</th>
    <td>jQuery</td>
  </tr>
  <tr class="even">
    <th>ライセンス</th>
    <td>MITライセンス</td>
  </tr>
</table>

カスタムパラメータ

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

外部リンクのfunction

30行目付近 $.yuga.stripe();

パラメータ名	デフォルト値	解説
oddClass	'odd'	奇数番目の要素につけられるクラス
evenClass	'even'	偶数番目の要素につけられるクラス

サンプル

付加されるクラス名を「oddItem」「evenItem」に変更

$.yuga.stripe({
  oddClass: 'oddItem',
  evenClass: 'evenItem'
});