15

私はjQueryとWeb開発に比較的慣れていません。

jQuery UI Tabs を使用してタブを作成しています。

しかし、特定のタブを選択したときにのみコンテンツがロードされるようにします。

4

5 に答える 5

28

OK、ユーザーがタブをクリックしたときに、AJAX を介してコンテンツを動的にフェッチするつもりだと思います。これには、タブに対しても onclick を設定することと、 ajax を介してデータをフェッチすることの 2 つのことが実際に関係しています。

onclick イベントの設定

タブにmy_tabなどのクラスを指定します。ユーザーがタブをクリックしたときにhandle_tab_click()関数を起動するとします。onclickイベントをmy_tabタブにバインドする例を次に示します。

$(".my_tab").bind("click", handle_tab_click);

handle_tab_click ()関数には、イベントを発生させた要素 (この場合、クラス名が my_tabの要素)に関する情報を提供できるイベント引数が与えられます。

function (event) {
    if ($(event.target).hasClass("my_tab")) { /* handle tab click */ }
    if ($(event.target).hasClass("my_tab_2")) { /* a different tab click */ }
    if ($(event.target).hasClass("my_tab_3")) { /* ... */ }
}

詳細については、こちらの JQueryイベントのドキュメントを参照してください。

ajax経由でデータを取得する

データをフェッチするには、(適切な情報をフェッチするために) クリックされたタブに関する情報を提供しながら、リモート スクリプトを呼び出す必要があります。次のスニペットでは、リモート スクリプトmyscript.phpを呼び出し、HTTP GET 引数tab_clicked=my_tabを指定し、スクリプトが返されたときに関数tab_fetch_cbを呼び出しています。最後のパラメーターは、返されるデータのタイプです (選択するのはあなた次第です)。

$.get("myscript.php", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml")

tab_clickedパラメータを処理し、適切なデータを取得して返す (つまり、クライアントに書き戻す) ようにmyscript.phpを設計するのは、あなた次第です。

以下はtab_fetch_cbの例です:

function tab_fetch_cb(data, status) {
    // populate your newly opened tab with information 
    // returned from myscript.php here
}

JQuery get関数の詳細についてはこちらを、JQuery ajax 関数の詳細についてはこちらをご覧ください。

申し訳ありませんが、具体的な例を示すことができませんが、多くの処理は実際にはタスクに依存しています。すでに指摘されているように、問題の定型的な解決策としていくつかの JQuery プラグインに目を向けることができます。そうは言っても、JQueryを使用して手動でこれを行う方法を学ぶことは決して悪いことではありません。

幸運を。

于 2009-02-02T07:16:09.670 に答える
14

UI/タブは、Ajax を介したオンデマンドのタブ コンテンツの読み込みをサポートしています。この例を確認してください。

于 2009-02-02T06:56:57.260 に答える
1

デフォルトでは、タブ ウィジェットは onClick でタブ付きセクション間を切り替えますが、オプションを使用してイベントを onHover に変更できます。タブに href を設定することで、タブのコンテンツを Ajax 経由で読み込むことができます。

ソース: http://docs.jquery.com/UI/Tabs

于 2011-02-15T21:58:23.457 に答える
1

Ajax 経由でコンテンツをロードすると、ブックマークやブラウザーの [戻る] ボタンの処理が複雑になります。状況によっては、完全なページ リクエストで新しいコンテンツを読み込むことを検討する必要があります。ブックマーク/ブラウザーのバックを処理するには、URL にアンカー情報を追加する必要があります。

また、タブの選択については、 LavaLampを確認してください。それはかなり気の利いた見た目です。

于 2009-02-02T06:59:56.847 に答える
0

Rails を使用している場合は、この gem bettertabsを試すことができます

ajax タブをサポートしています。

于 2014-10-03T13:30:10.743 に答える