2012-01-07 5 views
7

Ciao qualcuno sa dove posso ottenere il plugin di scroll infinito che ha un pulsante su cui fai clic prima che venga caricato in altri post?Esiste un plugin scroll infinito con un pulsante carica in più?

qui è quello che im cercando (guarda il pulsante più in basso a destra)

example screenshot for the question

+1

Se si deve premere un pulsante non è davvero un rotolo infinito è vero? (Che vedo come una cosa buona. Lo scroll automatico automatico è fastidioso.) – nnnnnn

risposta

8

Dal documentation page di plugin jQuery scroll infinito:

In 1.4 è possibile innescare il caricamento della pagina successiva del contenuto a sarà. Per prima cosa separerai il comportamento predefinito. E poi attiva il tiro successivo di quando vuoi.

// unbind normal behavior. needs to occur after normal infinite scroll setup. 
$(window).unbind('.infscr'); 
// call this whenever you want to retrieve the next page of content 
// likely this would go in a click handler of some sort 
$(document).trigger('retrieve.infscr'); 

Dovrebbe risolvere il problema.

0

Fondamentalmente si corpo dovrebbe avere l'overflow css : scorrere e il pulsante più dovrebbe aggiungere più HTML a voi div contenitore utilizzando jQuery accodamento - http://api.jquery.com/append/

1

Se siete alla ricerca di un rotolo infinito, che è una cosa, ma solo un pulsante Altro non dovrebbe richiedere un plug-in.

HTML

<div id="items"> 
    <!-- Run your query using the page parameter to offset items, then display the items here --> 
</div> 
<button id="more">More</button> 

JS

var page = 0; 
$('#more').click(function(){ 
    page++; 
    $('<div/>').appendTo('#items').load('the/same/url/?page='+page+' #items'); 
}); 

La funzione .load farà una chiamata AJAX all'URL fornito e il selettore opzionale sarà solo tirare fuori quel particolare elemento abbinato. In questo caso, se il parametro? Page della pagina di visualizzazione controlla l'offset della query per estrarre gli elementi che desideri, il caricamento dell'URL aggiungerà il successivo insieme di elementi ogni volta che viene chiamato.

Ovviamente si può creare una pagina AJAX unica che restituisce solo i frammenti HTML per il prossimo set di elementi, ma è un po 'più impegnativa a seconda dell'architettura. Tuttavia, risparmierai larghezza di banda/tempo di esecuzione.

2

Con la versione corrente di Infinite Scroll Plugin (2.1.0), si può semplicemente mettere in pausa quando gli elementi sono caricati, per poi riprendere e verificare se il nuovo contenuto deve essere caricato su un pulsante di scatto (o qualsiasi altra cosa):

$('.container').infinitescroll({ 
     // infinite scroll options 
    }, 
    function(){ 
     // pause when new elements are loaded 
     $('.container').infinitescroll('pause') 
    } 
); 

function resume_infinite_scroll(){ 
    // resume 
    $('.container').infinitescroll('resume') 
    // check if new elements should be loaded 
    $('.container').infinitescroll('scroll') 
} 

e poi

<button onclick="resume_infinite_scroll()">load more</button> 
+0

Funziona bene. Grazie. – namal

Problemi correlati