通常のロールオーバー
動作テスト
サンプルのソース
<p> <img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </p>
説明
img要素にclass="btn"が有る場合、src属性を「_on」付きのものに差し替える
[New]グループ化されたロールオーバー
動作テスト
サンプルのソース
<p> <a href="./hoge.shtml" class="btngroup"> テキスト。<img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </a> </p>
説明
img要素の親要素にclass="btngroup"があり、img要素にclass="btn"が有る場合テキストにマウスカーソルを当てても画像がロールオーバーする。
現在のページにリンク
動作テスト
サンプルのソース
<p> <a href="./index.shtml"> <img src="./img/yuga/btn_more.gif" alt="more" /> </a> </p> <p> <a href="./index.shtml">現在のページ</a><br /> <a href="./index.shtml#hoge">現在のページだけどアンカー</a> </p>
説明
- リンク先が現在のページにリンクしている場合に動作する。
- 同ページでもアンカーリンクやURLにアンカーが付くと解除される
- a要素にclass「current」が付く。
- 画像は、src属性を「_cr」付きのものに差し替える。
サンプルのCSS
.current {
font-weight: bold;
border: 1px solid #F96;
}
外部リンクは別ウインドウを設定
動作テスト
サンプルのソース
<ul> <li><a href="./index.shtml#sample04_area">内部リンク</a></li> <li><a href="http://kyosuke.jp/">外部リンク（Kyosuke.jpが別窓で開く）</a></li> </ul>
説明
- http:// からリンクを張った場合に別ウィンドウで開く。
- 同一ドメイン内でもhttp://から始まる絶対パス指定の場合には別ウィンドウで開くため、MT等ではリンク先が全て別ウィンドウになってしまう可能性有り
画像へ直リンクするとthickboxで表示
動作テスト
サンプルのソース
<ul> <li> <a href="./img/yuga/100.jpg" rel="group"> <img src="./img/yuga/100_s.jpg" alt="100km" /> </a> </li> <li> <a href="./img/yuga/road.jpg" rel="group"> <img src="./img/yuga/road_s.jpg" alt="100kmの道" /> </a> </li> <li> <a href="./img/yuga/road.jpg" class="thickbox"> <img src="./img/yuga/road_s.jpg" alt="100kmの道" /> </a> </li> </ul>
説明
- class="thickbox"を付けてしまうと、2重に画像が出てしまうので注意！
- 本来はclass="thickbox"が必要だが、直接画像にリンクを張っている場合、自動的にthickboxで表示される。
- 通常のthickboxの機能が使えるのでrel属性でグループ化ももちろん可能
奇数、偶数を自動追加
動作テスト
- 奇数
- 偶数
- 奇数
- 偶数
- 奇数
| th 奇数 | td 偶数 |
|---|---|
| テーブルへの奇数、偶数自動追加テスト | テーブルへの奇数、偶数自動追加テスト |
| テーブルへの奇数、偶数自動追加テスト | テーブルへの奇数、偶数自動追加テスト |
サンプルのソース
<ul> <li>奇数</li> <li>偶数</li> <li>奇数</li> <li>偶数</li> <li>奇数</li> </ul> <table> <caption>テーブルへの奇数、偶数自動追加テスト</caption> <tr> <th>th 奇数</th> <td>td 偶数</td> </tr> <tr> <th>テーブルへの奇数、偶数自動追加テスト</th> <td>テーブルへの奇数、偶数自動追加テスト</td> </tr> <tr> <th>テーブルへの奇数、偶数自動追加テスト</th> <td>テーブルへの奇数、偶数自動追加テスト</td> </tr> </table>
説明
ul要素のli要素とtable要素のtr要素にclass「add」「even」を自動で追加。
サンプルのCSS
#main #sample06_area ul {
margin-left: 0;
}
#main #sample06_area ul li {
padding: 5px 15px;
border-bottom: 1px dotted #CCC;
}
#main #sample06_area table tr.odd td,
#main #sample06_area ul li.odd {
background: #F4EAE5;
}
#main #sample06_area table td,
#main #sample06_area table th {
padding: 5px;
border: 1px solid #999;
}
#main #sample06_area table tr.odd th {
background: #E9E5F4;
}
:first-child, :last-childをクラスとして追加
動作テスト
サンプルのソース
<ul class="childTest"> <li><a href="#sample01_area">通常のロールオーバー</a></li> <li><a href="#sample02_area">グループ化されたロールオーバー</a></li> <li><a href="#sample03_area">現在のページにリンク</a></li> <li><a href="#sample04_area">外部リンクは別ウインドウを設定</a></li> <li><a href="#sample05_area">画像へ直リンクするとthickboxで表示</a></li> </ul>
説明
- :first-child, :last-childをクラスとして追加してくれる。
サンプルのCSS
ul.childTest li.firstChild {
background: #F3EDE9;
}
ul.childTest li.lastChild {
background: #ECF3E9;
}
css3の:emptyをクラスとして追加
動作テスト
| th emptyテスト | |
|---|---|
| th emptyテスト | ↑が空っぽ |
サンプルのソース
<table class="emptyTable"> <tr> <th>th emptyテスト</th> <td></td> </tr> <tr> <th>th emptyテスト</th> <td>↑が空っぽ</td> </tr> </table>
説明
- E という要素のうち、子要素 （テキストノードも含めて） をまったく持たない E 要素にのみスタイルを適用します。つまり、空のタグに適用される。
サンプルのCSS
table.emptyTable {
width: 100%;
}
table.emptyTable td,
table.emptyTable th {
padding: 5px;
border: 1px solid #999;
}
table.emptyTable th {
width: 150px;
background: #EFEFEF;
}
table.emptyTable td.empty {
background: #D7D7F1;
}
ページ内リンクはするするアニメーション
今回のサンプルで使っているjQueryのバージョンが新しいために、エラーが出てしまうのでコメントにしてます。（yuga.js 116行目～）
使う場合の手順
- jQueryのバージョンを1.1.4に変更
- head要素内、interface.jsを読み込む（jquery.jsとthickbox.jsの間に）
- yuga.jsの118行目、123行目のコメントを取る