2012-01-07 6 views
7

Hola, ¿alguien sabe dónde puedo obtener el complemento de desplazamiento infinito que tiene un botón en el que hace clic antes de cargarlo en más publicaciones?¿Hay un complemento de desplazamiento infinito con un botón de cargar más?

aquí es lo que estoy buscando (mirar en el botón más en la esquina inferior derecha)

example screenshot for the question

+1

Si tiene que pulsar un botón en realidad no es un desplazamiento infinito es? (Lo cual veo como algo bueno. El desplazamiento infinito automático es molesto.) – nnnnnn

Respuesta

8

Desde el documentation page de jQuery infinita plug-in de desplazamiento:

En 1.4 se puede desencadenar la carga de la siguiente página de contenido en voluntad. Primero desvinculará el comportamiento predeterminado. Y luego active cuando lo desee.

// 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'); 

Se debería resolver su problema.

0

Básicamente cuerpo debe tener el desbordamiento de css : desplazarse y el botón más conveniente añadir más html para que div contenedor usando agregar jQuery - http://api.jquery.com/append/

1

Si usted está buscando un desplazamiento infinito, eso es una cosa, pero solo un botón Más no debería requerir un complemento.

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 función .load hará una llamada AJAX a la URL indicada y el selector opcional se acaba de sacar ese particular elemento coincidente. En este caso, si el parámetro? Page de la página de visualización controla el desplazamiento a la consulta para extraer los elementos que desea, la carga de la URL anexará el siguiente conjunto de elementos cada vez que se llame.

Por supuesto, usted puede crear una página AJAX única que simplemente devuelve los fragmentos HTML para el siguiente conjunto de elementos, pero es un poco más complicado dependiendo de su arquitectura. Sin embargo, ahorrará ancho de banda/tiempo de ejecución.

2

Con la versión actual de desplazamiento infinito Plugin (2.1.0), que sólo puede hacer una pausa cuando se cargan los elementos, y luego reanudar y comprobar si el nuevo contenido debe ser cargado en un botón de clic (o cualquier otra 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') 
} 

y luego

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

Funciona muy bien. Gracias. – namal

Cuestiones relacionadas