yuga.js 0.4.2 - 優雅なWeb制作のためのJS サンプル

[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;
}

外部リンクは別ウインドウを設定

動作テスト

• 内部リンク
• 外部リンク（Kyosuke.jpが別窓で開く）

サンプルのソース

<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属性でグループ化ももちろん可能

奇数、偶数を自動追加

動作テスト

• 奇数
• 偶数
• 奇数
• 偶数
• 奇数

サンプルのソース

<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をクラスとして追加

動作テスト

• 通常のロールオーバー
• グループ化されたロールオーバー
• 現在のページにリンク
• 外部リンクは別ウインドウを設定
• 画像へ直リンクするとthickboxで表示

サンプルのソース

<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をクラスとして追加

動作テスト

サンプルのソース

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