it-swarm-eu.dev

Qual è il modo migliore per implementare ajax infinite scroll verso una visualizzazione elenco componenti personalizzata?

Qual è il modo consigliato di ignorare la classe standard jPagination per ottenere ajax infinite scroll su un joomla! 3 visualizzazione elenco componenti personalizzati?

Idealmente, vorrei inserire lo stato e la cronologia del browser dopo ogni impaginazione/caricamento di più elementi nell'elenco.

Ho trovato questo plugin jQuery , che afferma di essere semplice da implementare in joomla e funziona sovrascrivendo i collegamenti di impaginazione - non funziona ancora. Pubblicherò del codice quando arrivo da qualche parte.

Qualcuno l'ha raggiunto con successo?

Grazie

5
user2097091

Sfortunatamente, non ci sono funzioni come questa nel core. Ma puoi ottenerlo con le sostituzioni dei modelli fino all'implementazione dei servizi web e del layout di impaginazione.

Non esiste una soluzione pronta all'uso, ma in linea di principio è sufficiente modificare la visualizzazione della categoria (-layout) per fornire un markup facoltativo "solo articoli". Se non hai familiarità con php e js potresti aver bisogno di un aiuto professionale.

1
Nils Rückmann

Questo pratico piccolo pezzo di codice ti aiuterà nello sviluppo di componenti personalizzati. Lo sto usando per lo scorrimento infinito di elementi nel mio componente personalizzato e funziona magnificamente. Puoi combinarlo con simpleScoll.js per nascondere le barre di scorrimento.

In sostanza, fai un ciclo tra i tuoi oggetti all'interno del div a scorrimento. L'ascoltatore controlla quindi l'altezza del contenitore e fa un po 'di matematica per determinare quando estrarre un altro set di dati dalla tua impaginazione e aggiungerlo al div #listings.

<style type="text/css">#infiniteScroll{overflow:auto; height:300px; width:100%}</style>

<div id="infiniteScroll">
    <div id="items">
        <?php foreach($this->items as $item){?>
            <div class="item">
                SOME INFO THAT IS BEING DISPLAYED
            </div>
        <?php }?>
    </div>
</div>    
<div id="allShown" class="hidden">All Items have been displayed.</div>

<script type="text/javascript">
var itemsToFetch = 10;
var offset = itemsToFetch;
$('#infiniteScroll').bind('scroll', function(){
    var urlVar = '?start=';
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
        $.get(urlVar + offset, function(data){

            var items = $(data).find('#listings .listing');
            $('#listings').append(items);
            if((offset + itemsToFetch) > <?php echo $this->pagination->total;?>){
                offset += (<?php echo $this->pagination->total;?> - offset);
                $("#allShown").removeClass("hidden");
            }else{
                offset += itemsToFetch;
            }
        });
    }
});
</script>
0
Terry Carter