Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Paginar al estilo twitter o facebook

JavaScript - Paginar al estilo twitter o facebook

Volver
Nuevo Tema
<<>>
 
Vista:

Paginar al estilo twitter o facebook

Publicado por olivares (2 intervenciones) el 13/04/2016 12:13:07
Hola, estoy muy verde con javascript y tengo un código que he conseguido para mi proyecto. Dicho código me pagina listas en html (<ul><li></li></ul>). Me los pagina de este modo:

1
2
3
4
5
6
7
texto 1...
 
texto 2...
 
texto 3...
 
 1 | 2 | 3 | 4

Me gustaría conseguir que los paginara así:

1
2
3
4
5
6
7
texto 1...
 
texto 2...
 
texto 3...
 
Ver más

Al estilo Twitter o Facebook que al clickar en "Ver más" a continuación me mostrara tres mas sin ocultar los tres anteriores quedando así:

1
2
3
4
5
6
7
8
9
10
11
12
13
texto 1...
 
texto 2...
 
texto 3...
 
texto 4...
 
texto 5...
 
texto 6...
 
Ver más


He encontrado varios ejemplos sobre como paginar al estilo twitter con jquery+php+mysql pero lo que yo quiero es simplemente paginar listas <ul><li></li></ul> sin obtener los datos desde una base de datos y no hay ningún ejemplo por google.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 91
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Paginar al estilo twitter o facebook

Publicado por Alfredo (36 intervenciones) el 13/04/2016 16:34:23
Saludos Olivares,

Puedes utilizar un arreglo con las direcciones e ir mostrando las direcciones a medida que hagas click en el link de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<ul id='direccionesWeb'>
 
</ul>
<a href='javascript:verMas()' id='ver'>Ver Mas</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
var arregloDeDirecciones = [
"http://www.lawebdelprogramador.com",
"http://www.google.com",
"http://www.yahoo.com",
"http://www.microsoft.com",
"http://www.oracle.com",
"http://www.dell.com",
"http://www.hp.com"
];
var indice=0;
function verMas()
{
 
  for(var i = indice;i < indice + 3;i++)
  {
  $("#direccionesWeb").append("<a href='" + arregloDeDirecciones [i] + "'>" + arregloDeDirecciones [i] + "</a><br/>");
  }
  indice+=3;
}
verMas();
$("#ver").click(verMas);
 
</script>

Tienes que agregar un codigo que verifique si ya no hay mas direcciones, pero esto te apunta en la dirección que estás buscando.

Suerte,
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Jordi
Val: 4
Ha aumentado su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Paginar al estilo twitter o facebook

Publicado por Jordi (76 intervenciones) el 14/04/2016 07:00:45
Hola Olivares,

Puedes hacer lo que comenta Alfredo, que es que al pinchar en "Ver más" se haga un append del resto de <li>.
Como segunda opción y lo que yo sugeriría es aplicar todos los <li>, los de "Ver más" como ocultos, y cuando le des a "Ver más" que se muestren.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
   <li>lista1</li>
   <li>lista2</li>
   <li>lista3</li>
   <span id="more">Ver más</span>
   <li class="more-li" hidden>lista4</li>
   <li class="more-li" hidden>lista5</li>
</ul>
 
<script>
   $("#more").click(function() {
      $(".more-li").show();
   }
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar