Loading:


Dynamicznie doładowywana lista List View z AJAX'em - jQuery Mobile

Skrypt pokazuje jak stworzyć dynamiczną listę AJAX, która będzie dodawać do siebie elementy na zasadzie inifity scroller czyli nieskończonego scrollowania.

 

Oznacza to, że podczas scrollowania do dołu elementy same będą się dopełniać, coś na zasadzie inteligętnego wczytywania stron na Facebooku.

 

UWAGA!

Przykład korzysta z biblioteki jQuery mobile.



Napisz Artyku³

Listing

$(window).bind('scrollstop', function () {
   //pobranie list view oraz aktualną pozycję scrolla
   var listContainer = $('.hpListView'),
       scrollPosition = listContainer.height() - $(document).scrollTop(),
       out = '';
   
   //sprawdzmy czy aktualnie nie pobierane już są jakies wyniki oraz kiedy pozycja scrolla jest większa niż 600px (może być inna na różnych urządzeniach), dodatkowo sprawdzamy czy posiadamy więcej wyników z AJAXu
   if(!loading && scrollPosition < 600 && haveMoreResults) {
           //wyświetlenie loading'u
           $.mobile.loading( 'show', {
                theme: 'a'
           });
           loading = true;
           offset++;
           if(region == null) {
               region = '';
           }
           //wywołanie AJAXu
           $.ajax({
                url: "http://hostparty.pl/api/get/hosts/region/"+region+"/offset/"+offset
           }).done(function(data) {
                //ukrywamy loader
                $.mobile.loading('hide');
                loading = false;
                var results = $.parseJSON(data);
                if(results.length == 0) {
                     //brak wyników, ustawiamy flagę aby zcachować wyniki
                     haveMoreResults = false;
                } else {
                     for(var i=0; i < results.length; i++) {
                          out += '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-thumb ui-focus ui-btn-up-c">Funkcje.net</li>';
                     }
                     //dodajemy elementy do listy i odświerzamy ją
                     listContainer.append(out);
                     listContainer.listview('refresh');
                }
        }).fail(function() {
            alert('Błąd przy próbie połączenia z serwerem. (103)');
        });
   }
});




Dodano przez: divix
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2024 v.1.5 | design: diviXdesign & rainbowcolors