web-dev-qa-db-ja.com

jQueryタブ-クリックされたときにのみコンテンツをロードする

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

JQueryUIタブを使用してタブを作成しています。

ただし、特定のタブを選択した場合にのみコンテンツをロードしたい。

jquery-uijquerytabs
15
aLL0i

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

onclickイベントの設定

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

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

handle_tab_click（）関数にはevent引数が与えられ、これにより、を起動した要素に関する情報を提供できます。イベント（この場合、クラス名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")) { /* ... */ }
}

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

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

myscript.phpを設計してtab_clickedパラメーターを処理し、適切なデータをフェッチして返す（つまり、書き込む）のはあなた次第です。クライアントにバックアウト）。

tab_fetch_cbの例を次に示します。

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

JQueryget関数 ここ 、およびJQuery ajax関数 ここ の詳細を読むことができます

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

幸運を。

28
wilsoniya

UI /タブは、Ajaxを介したオンデマンドのタブコンテンツの読み込みをサポートしています。チェック this の例。

14
CMS

デフォルトでは、タブウィジェットはonClickのタブ付きセクション間でスワップしますが、オプションを使用してイベントをonHoverに変更できます。タブにhrefを設定することで、Ajaxを介してタブコンテンツをロードできます。

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

1
Som

Ajaxを介してコンテンツをロードすると、ブックマーク/ブラウザーの戻るボタンの処理が複雑になります。状況に応じて、フルページリクエストで新しいコンテンツをロードすることを検討する必要があります。ブックマーク/ブラウザを元に戻すには、URLにアンカー情報を追加する必要があります。

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

1
ajma

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

Ajaxタブをサポートします。

0
Zack Xu