おすすめの書籍

基本的な使い方

jquery.js yuga.min.js、yuga.onload.js を head 内で読み込みます。
yuga.onload.js 内の利用しないメソッドはコメントアウトしておきます。

他に共通の JavaScript ファイルを読み込んでいるような場合は、
yuga.onload.js 内の記述をそちらに書いていただいたほうが良いと思います。

HTML

<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/yuga.min.js"></script>
<script type="text/javascript" src="js/yuga.onload.js"></script>
</head>

yuga.onload.js

$(function() {
  $.yuga.rollover(); // → 利用する場合
  //$.yuga.externalLink(); //→ 利用しない場合
});

ページの先頭へ戻る

ロールオーバー

img要素に class="btn" と設定することでロールオーバー機能をつけることができます。

HTML

<img src="img/button.gif" alt="ボタン" width="199" height="55" class="btn" />

動作サンプル

ボタン

オプション

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

接尾語を _on に変更する場合

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

ページの先頭へ戻る

カテゴリ内ページの場合の表示

「bodyのクラス」と「btnクラスを持つエレメントのクラス」が同じ場合に、ロールオーバー画像の表示します。

HTML

<body class="sample">
  <img src="img/sample.gif" alt="サンプル" width="199" height="55" class="btn sample" />
</body>

動作サンプル

  • サンプル
    ※ロールオーバー画像になる
  • ボタン
    ※ロールオーバー画像にならない

オプション

パラメータ名 初期値 解説
buttonSelector .btn カテゴリ内ページの表示をさせたいイメージを指定するセレクタ
postfix -over カテゴリ内ページの表示をさせたい画像のファイル名につく接尾語

接尾語を _current に変更する場合

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

ページの先頭へ戻る

ドメインが違うa要素の場合、新規ウィンドウで表示します。

HTML

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

動作サンプル

どうのこうの

オプション

パラメータ名 初期値 解説
windowOpen true 別ウインドウで開くかどうか（true:別ウインドウ, false:無効）
externalClass external 外部ページにリンクしていた際にa要素に付加されるクラス

a要素に付加するクラス external-link に変更する場合

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

ページの先頭へ戻る

ページ内リンク

ページ内リンクの場合、イージングアニメーションスクロールします。

動作サンプル

オプション

パラメータ名 初期値 解説
duration 400 アニメーション完了までの時間（ミリ秒）

duration を 600 に変更する場合

$.yuga.scroll({
  duration: 600
});

ページの先頭へ戻る

first-child、last-child、nth-child

childクラスの子要素に対して、first-child、last-child、nth-child、odd、evenクラスを追加します。

HTML

<script type="text/javascript">
<!--
$(function(){
  $('.child').children().each(function(){
    var text = $(this).text();
    $(this).text(text + '（' + $(this).attr('class') + '）');
  });
});
//-->
</script>
<ol class="child">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li>項目4</li>
  <li>項目5</li>
  <li>項目6</li>
  <li>項目7</li>
  <li>項目8</li>
  <li>項目9</li>
  <li>項目10</li>
</ol>

表示サンプル

  1. 項目1
  2. 項目2
  3. 項目3
  4. 項目4
  5. 項目5
  6. 項目6
  7. 項目7
  8. 項目8
  9. 項目9
  10. 項目10

オプション

パラメータ名 初期値 解説
selector .child 各クラスを付与する親要素のセレクタ
oddClass odd 奇数番目の要素につけられるクラス
evenClass even 偶数番目の要素につけられるクラス
firstChidlClass first-child first-child 要素につけられるクラス
lastChidlClass last-child last-child 要素につけられるクラス

first-child 要素につけられるクラスを firstChildに変更する場合

$.yuga.child({
  firstChidlClass: 'firstChild'
});

ページの先頭へ戻る

アイコン

href属性の内容に合わせてアイコン用クラスを追加します。

動作サンプル

適用後HTML

<ul>
  <a href="http://dounokouno.com" class="external">別ドメイン</a>
  <a href="mailto:info@example.jp" class="mailto">info@example.jp</a>
  <a href="example.pdf" class="pdf">example.pdf</a>
  <a href="example.doc" class="doc">example.doc</a>
  <a href="example.docx" class="doc">example.docx</a>
  <a href="example.xls" class="xls">example.xls</a>
  <a href="example.xlsx" class="xls">example.xlsx</a>
  <a href="example.ppt" class="ppt">example.ppt</a>
  <a href="example.pptx" class="ppt">example.pptx</a>
  <a href="example.zip" class="zip">example.zip</a>
</ul>

オプション

パラメータ名 初期値 解説
ignoreSelector .noicon クラスを付与しないセレクタ

クラスを付与しないセレクタを .no-icon に変更する場合

$.yuga.icon({
  ignoreSelector: '.noicon'
});

ページの先頭へ戻る

ボックスの高さを揃える

heightline-parent、heightline-xxxクラスを持つ子要素のボックスの高さを揃えます。

HTML

<div class="heightline-parent"></div>
<div class="heightline-group1"></div>
<div class="heightline-group1"></div>

親ボックスで揃える（heightline-parent）

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

グループで揃える（heightline-xxx）

「左」と「真ん中」のボックスを揃える場合の例

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

グループで揃える（heightline-xxx）

「真ん中」と「右」のボックスを揃える場合の例

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

オプション

パラメータ名 初期値 解説
parentSelector .heightline-parent ボックスの高さを揃える親要素のセレクタ
groupClassPrefix heightline- グループ指定するクラスの接頭語

ボックスの高さを揃える親要素のセレクタを .heightlineParent に変更する場合

$.yuga.heightLine({
  parentSelector: '.heightlineParent'
});

ページの先頭へ戻る

トグルボックス

HTML

<dl>
  <dt>Q. <a href="javascript:void(0);" class="toggle">項目1</a></dt>
  <dd>A. この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</dd>
</dl>

動作サンプル

Q. 項目1
A. この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
Q. 項目2
A. この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
Q. 項目3
A. この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

オプション

パラメータ名 初期値 解説
selector .toggle トグルボックスの機能を利用するセレクタ
duration 400 アニメーション完了までの時間（ミリ秒）

トグルボックスの機能を利用するセレクタを .toggleBox に変更する場合

$.yuga.toggleBox({
  selector: '.toggleBox'
});

ページの先頭へ戻る

HTML

<a href="popup.html" class="popup">ポップアップサンプル</a>

動作サンプル

ポップアップサンプル

オプション

パラメータ名 初期値 解説
name （空）
width 600
height 400
status yes
scrollbars yes
directories yes
menubar yes
resizable yes
toolbar yes

幅620px、高さ620pxに変更する場合

$.yuga.popup({
  width: 620,
  height: 620
});

ページの先頭へ戻る

Tips

heightLine、toggle、 popup は、必要なページにだけ読み込んだ方がいいかもしれません。

<script type="text/javascript">
$(function(){
  $.yuga.toggle();
  $.yuga.heightLine();
  $.yuga.popup();
});
</script>

ページの先頭へ戻る

トップページへ戻る

ページの先頭へ戻る