yuga.js 0.6.0 優雅なWeb制作のためのJS「yuga.js」
jQueryを使い、優雅なWeb制作をするためのJavaScript「yuga.js」
そのyuga.jsがバージョンアップしたようです。
このyuga.js一つで、様々な機能をつけることができる便利なJavaScriptなんですよね。
例えば、画像のロールオーバー機や、画像を自動的にthickboxで表示、外部リンクは別ウィンドで開いたり、ぺージ内スクロール。
これを考えたくれたKyosukeさんは凄いです！それに凄く感謝してます！
yuga.jsダウンロード
yuga.jsダウンロードと基本的な使い方については本家サイトinputlogからお願い致します。
yuga.js本家サイトで解説していない使用方法
ページ内スクロール
<a href="#header">ページトップへ</a>
上記の用にhrefに#をつけて指定すると、スルスルっと移動してくれます。
画像のロールオーバー
<img src="sample.jpg" alt="" class="btn" width="200" height="100" />
ロールオーバーさせたい画像を上記のソースに例えて説明します。
- まずsample.jpg（ロールオーバー前）の画像とsample_on.jpg（ロールオーバー後）の画像準備します。
- ロールオーバーさせたいimg要素にclass="btn"を入れます。
これだけで画像のロールオーバーが出来ちゃいます。
奇数、偶数を自動追加
<ul>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
<li>偶数</li>
<li>奇数</li>
</ul>
ul li {
background: #FFF;
}
ul li.odd {
background: #CCC;
}
上記の用に指定すると、奇数のbackgroundの色が#CCCになり、偶数のbackgroundの色が#FFFになります。
他にも便利な機能がついているんですが、検証してからエントリーしたいと思います。
