Widget tabs – usuwanie zawartości taba przy przełączaniu

Korzystałem z jQueryUI tabs do ładowania contentu  przez ajax i próbowałem uzyskać efekt kółeczka które się ładuje podczas faktycznego ładowania zapytania. Kółeczko = loading

Problem w tym, że domyślnie widget tabs nie obsługuje takiej funkcjonalności.

Rozwiązanie:


<div class="tabs">
    <div>
        <ul>
            <li><a href="ajax1.php">Tab 1</a></li>
            <li><a href="ajax2.php">Tab 2</a></li>
        </ul>
    </div>
    <div class="loading" style="text-align: center;">
        <img src="images/loading.gif">
    </div>
</div>

 


$(".tabs").tabs({
    ajaxOptions: {
        cache: false
    },
    load: function() {
        $(".loading").hide();
    },
    beforeLoad: function(event, ui) {
        $(".loading").show();
        $(ui.panel).siblings('.ui-tabs-panel').empty();
    }
});

Najważniejsza część to $(ui.panel).siblings('.ui-tabs-panel').empty();. Ten kawałek powoduje, że przed załadowaniem treści przy pomocy ajax treść wszystkich tabów jest wyzerowana.

Do ściągnięcia działający przykład: tabs.rar

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>