おすすめの書籍
基本的な使い方
jquery.js yuga.js、yuga.onload.js を head 内で読み込みます。
利用しないメソッドはコメントアウトしておきます。
HTML
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/yuga.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" />動作サンプル
カテゴリ内ページの場合の表示
「bodyのクラス」と「btnクラスを持つエレメントのクラス」が同じ場合に、ロールオーバー画像の表示します。
HTML
<body class="sample">
<img src="img/sample.gif" alt="サンプル" width="199" height="55" class="btn sample" />
</body>動作サンプル
※ロールオーバー画像になる
※ロールオーバー画像にならない
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
- 項目2
- 項目3
- 項目4
- 項目5
- 項目6
- 項目7
- 項目8
- 項目9
- 項目10
アイコン
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>ボックスの高さを揃える
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）
「真ん中」と「右」のボックスを揃える場合の例
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
トグルボックス
HTML
<dl>
<dt>Q. <a href="javascript:void(0);" class="toggle">項目1</a></dt>
<dd>A. この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</dd>
</dl>動作サンプル
ポップアップウィンドウ
HTML
<a href="popup.html" class="popup">ポップアップサンプル</a>動作サンプル
オプション
幅や高さ等、オプションで指定できます。
$.yuga.popup({width:600, height:400});
Tips
heightLine、toggle、 popup は、必要なページにだけ読み込んだ方がいいかも。
<script type="text/javascript">
$(function(){
$.yuga.toggle();
$.yuga.heightLine();
$.yuga.popup();
});
</script>