本文へジャンプ

通常のロールオーバー

動作テスト

more

サンプルのソース

<p>
<img src="./img/yuga/btn_more.gif" alt="more" class="btn" />
</p>

説明

img要素にclass="btn"が有る場合、src属性を「_on」付きのものに差し替える

[New]グループ化されたロールオーバー

動作テスト

テキスト。more

サンプルのソース

<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"が有る場合テキストにマウスカーソルを当てても画像がロールオーバーする。

現在のページにリンク

動作テスト

more

現在のページ
現在のページだけどアンカー

サンプルのソース

<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行目のコメントを取る