2

だから私はいくつかのjQueryUIタブを持っています。ソースコードは次のとおりです。

HTML：

<div class="tabs">
    <ul>
        <li><a href="#ranges">Ranges</a></li>
        <li><a href="#collections">Collections</a></li>
        <li><a href="#designs">Designs</a></li>
    </ul>
    <div id="ranges"></div>
    <div id="collections"></div>
    <div id="designs"></div>
</div>

jQuery：

$(document).ready(function() {
    $(".tabs").tabs();
});

私の問題は、関連するリンクをクリックすると、各タブがコンテンツパネルにページをロードするようにしようとしていることです。まず、リンクをクリックしてすべてのパネルのhtmlを設定しようとしています。以下のコードから、方法1を使用すると、すべてのリンクで機能します。ただし、方法2を使用する場合は使用しませんが、タブ内のリンク（つまり、クリックしてタブを選択するラベル）に対してのみ使用します。

方法1（常にすべてのリンクで機能しますが、これが呼び出された後に追加されるリンクには適用されません）：

$("a").click(function () {
    $("#ranges, #collections, #designs").html("clicked");
});

方法2（「タブ化」されていないすべてのリンクで機能します）：

$("a").live("click", function () {
    $("#ranges, #collections, #designs").html("clicked");
});

なぜそれがこのように振る舞うのか誰かが知っていますか？ページが最初にロードされた後に追加されるクリックイベントを追加する必要があるリンクがある可能性があるため、メソッド2を正しく機能させたいと思います。

前もって感謝します、

リチャード

PSはい、関数はそれが問題である可能性があると誰かが言う前に、関数が要求し.live、.click両方が関数内$(document).ready()にあります-そうでなければ、それはまったく機能しません。

編集：

私が思いついた解決策には、アンカーの追加属性（data-url）と次のコード（ページを読み込めない場合に404​​ not foundエラーを出力する）が含まれます。私はこれを今後数週間/数ヶ月にわたって拡大し、より強力にすることを目指しています。

$(".tabs").tabs({
    select: function (event, ui) {
       $(ui.panel).load($(ui.tab).attr("data-url"), function (responseText, textStatus, XMLHttpRequest) {
           switch (XMLHttpRequest.status) {
               case 200: break;
               case 404:
                   $(ui.panel).html("<p>The requested page (" + $(ui.tab).attr("data-url") + ") could not be found.</p>");
                   break;
               default:
                   $(ui.panel).html("<p title='Status: " + XMLHttpRequest.status + "; " + XMLHttpRequest.statusText + "'>An unknown error has occurred.</p>");
                   break;
           };
       });
   }
});
4

3 に答える 3

1

何をしようとしているのかわかりませんが、基本的にはタブをクリックしたら何かしたいですか？ タブを選択するためのコールバック関数を設定するためのドキュメントは次のとおりです。

編集：そのリンクが正しく機能しているかどうかわからない、あなたはselectイベントの下で見たいです。しかし、基本的には次のとおりです。

$("#tabs").tabs({
    select: function(event, ui) { ... }
});

uiクリックされたタブの情報はどこにありますか。

于 2011-01-28T06:36:21.070 に答える
1

return false;jQuery UIタブには、の代わりにが使用されるという未解決の問題がありevent.preventDefault();ます。これにより、ライブが依存するイベントのバブリングを効果的に防ぐことができます。これはjQueryUI1.9で修正される予定ですが、それまでの間、@rolfwaffleによって提案された組み込みのselectイベントを使用するのが最善のアプローチです。

于 2011-12-15T14:49:39.777 に答える
-1

おそらく、使用しているtabs（）プラグインは、タブを作成した後でevent.preventDefault(); （Reference）を呼び出しています。

次に、クリックイベントをキャプチャし、バブリングが停止するため、クリック機能は呼び出されません。jQueryではこれは次のように行われます

$(element).click(function(){
    // Do stuff, then
    return false; // Cancels the event
});

tabs（）プラグインコードを変更し、これを削除してfalseを返す必要があります。ステートメント、または運が良ければ、プラグインにその動作を無効にするオプションがあるかもしれません。

編集：jQueryUIを使用していることがわかりました。次に、そこでドキュメントを確認する必要があります。これは素晴らしいプラグインであるため、htmlを正しく実行し、適切なオプションを渡すと、必要なことをすべて実行できます。

于 2011-01-28T06:36:36.443 に答える