これは、アクションの組込みエフェクト·フレームワークを示す最初のデモです。 外部ページから、ペイン内容をロードするために ajax と呼ばれるエフェクトを使用します:
もちろん、ロードできるコンテンツは、HTMLだけではなく、ここに示すような簡単なテキストや画像も可能です。 また、scrollables や overlays のような他のjQueryツールを初期化することが可能な script タグを、 読込んだページ内に配置することもできます。 イベントは、AJAXによってロードされるページでは始動しないので、スクリプトタグは、 document.ready() イベントの中ではなく、HTML要素の下に置くべきです。
今回は、すべてのAJAXリクエストに同じペインを使用するため、1つだけのペインを利用可能にします。 最初は、このペインにはコンテンツがありません - AJAXを使用してロードされます。
<!-- タブ --> <ul class="css-tabs"> <li><a href="ajax1.htm">Tab 1</a></li> <li><a href="ajax2.htm">Second tab</a></li> <li><a href="ajax3.htm">An ultra long third tab</a></li> </ul> <!-- 単一のペイン。常に表示する --> <div class="css-panes"> <div style="display:block"></div> </div>
上記のペイン構造は、1つだけの div 要素でしたが、CSSファイルは、 .css-panes div要素のラッピングに依存するように構築されています。 （The above pane structure could just have been a single div element but our CSS file is built so that it depends on a wrapping .css-panes div element.）
JavaScript 設定は簡単です。単に、effect プロパティを定義するだけです:
$(function() {
$("ul.css-tabs").tabs("div.css-panes > div", {effect: 'ajax'});
});
オープンされる最初のときだけページをロードしたい場合、キャッシングを可能にするために、サーバのHTTPヘッダ の設定を調整する必要があります。
これと同じ効果は、必要なアクティビティを実行する2番目の引数である onBeforeClick コールバックによって達っせ られます。これによって、例えば "Fade" のような別の効果を使用することができるようになります。 ここでスタンドアロンのデモを見ることができます。