yuga.js 0.6.0 優雅なWeb制作のためのJS「yuga.js」

yuga.js Logo

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" />

ロールオーバーさせたい画像を上記のソースに例えて説明します。

  1. まずsample.jpg(ロールオーバー前)の画像とsample_on.jpg(ロールオーバー後)の画像準備します。
  2. ロールオーバーさせたい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になります。

他にも便利な機能がついているんですが、検証してからエントリーしたいと思います。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article