3

jqueryタブにアイテムをロードしました。ページの読み込み時に、タブ内で利用可能な各タブに読み込み中のスピナー画像を表示したい。カウントラベルが表示されたら、スピナー画像を削除したい。私のコードは

HTMLコード:

<div id="tabs" >
    <ul>
        <li>
            <a id="storesa">
                <p class="tablip">
                    Store 
                    <img id="imgStore" src="ajax-loader6.gif" style="display:none;"/>  
                    <span id="store_count"/>
                </p>
            </a>
        </li>
    </ul>
</div>

Jクエリコード：

$(window).load(function () {
    if ($('#store_count').is(':visible')) {
        $('#imgStore').hide();
    }       
});

どうやってするか？

4

1 に答える 1

6

EDIT 1：以下はリモートタブ（ロードされたajax）に対して機能します。これを実行するには、 beforeLoadおよびloadイベントを使用する必要があります。

HTML :

<div id="tabs" >
    <ul>
        <li>
            <a id="storesa" href="http://url-on-wich-the-ajax-request-will-be-done/">
                <p class="tablip">
                    Store 
                    <img id="imgStore" src="ajax-loader6.gif"/>  
                    <span id="store_count"/>
                </p>
            </a>
        </li>
    </ul>
</div>

CSS :

#imgStore {
    display: none;
}

JS :

$(function() {
    $("#tabs").tabs({

        /* Called before tab content is loaded */
        beforeLoad: function(event, ui) {
            $('#imgStore').show();
            /* if ajax call to retrieve tab content failed */
            ui.jqXHR.error(function() {
                $('#imgStore').hide();
                ui.panel.html("An error occured while loading store infos");
            });
        },

        /* Called when tab is loaded */
        load: function(event, ui) {
            $('#imgStore').hide();
            $('#store_count').html(/* your count here */);
        }
    });
});

EDIT 2 : @senthil-nathan :go_to_page()関数がタブの内容を読み込んでいると仮定すると、私はこのjsFiddleを書きました。

于 2013-08-09T17:21:01.307 に答える