マウスオーバを使用したタブの切り替え

ここでは、タブを切り替えるために mouseover イベントを使用します。 例えば、このイベントは、次のような製品のプレゼンテーションのセットアップに使用することができます:

 

Lorem ipsum dolor

Consectetur adipiscing elit. Curabitur tempus, massa at facilisis aliquet, urna metus interdum felis, sit amet adipiscing justo neque eget risus.

Nullam ut ligula id dolor dapibus aliquam.

Maecenas molestie

Lacus ut blandit malesuada, sem magna varius enim, eu mattis elit justo in quam. Curabitur in magna. Nam luctus aliquet ante. Nam ut nunc. Quisque ligula nunc, molestie non, gravida sit amet, consequat eu, lectus. Proin aliquet nulla eget massa. Vestibulum ac dolor a tortor porta commodo.

In hac habitasse platea dictumst

Quisque mattis gravida est. Vestibulum orci nisl, egestas vel, pharetra quis, auctor nec, lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales massa quis nunc. Sed velit risus, feugiat ut, pharetra a, venenatis et, arcu.

HTML コード

タブ・ツールは、いかなる特定のHTML構造にも依存しないことに注意してください。 この例では、特定のルート要素を持たないタブとペインとして img を使用しています:

<!-- tabs -->
<div id="products">
	<img src="/web/jQuery/jQueryTools/img/free.png" alt="Free version" />
	<img src="/web/jQuery/jQueryTools/img/commercial.png" alt="Commercial version" />
	<img src="/web/jQuery/jQueryTools/img/multidomain.png" alt="Multidomain version" />
</div>

<!-- panes -->
<div class="description" id="free"> .. content .. </div>
<div class="description" id="commercial"> .. content .. </div>
<div class="description" id="multidomain"> .. content .. </div>

スタイルは、この CSS ファイル で定義しています。

JavaScript コード

構成は簡単です。event コンフィグレーション・オプションを mouseover へ設定します:

$("#products").tabs("div.description", {event:'mouseover'});