JavaScript - Paginar al estilo twitter o facebook

   
Vista:
Imágen de perfil de matuha

Paginar al estilo twitter o facebook

Publicado por matuha (4 intervenciones) el 14/11/2015 14:36:20
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


este es el código que tengo con el que logro paginar listas mediante el método tradicional:

1
2
3
4
5
6
7
8
9
10
(function($){$.fn.quickPagination=function(options){var defaults={pageSize:2,currentPage:1,holder:null,pagerLocation:"after"};var options=$.extend(defaults,options);return this.each(function(){var selector=$(this);var pageCounter=1;selector.wrap("<div class='simplePagerContainer'></div>");selector.parents(".simplePagerContainer").find("ul.simplePagerNav").remove();selector.children().each(function(i){if(i<pageCounter*options.pageSize&&i>=(pageCounter-1)*options.pageSize){$(this).addClass("simplePagerPage"+pageCounter);}
else{$(this).addClass("simplePagerPage"+(pageCounter+1));pageCounter++;}});selector.children().hide();selector.children(".simplePagerPage"+options.currentPage).show();if(pageCounter<=1){return;}
var pageNav="<ul class='simplePagerNav'>";for(i=1;i<=pageCounter;i++){if(i==options.currentPage){pageNav+="<li class='currentPage simplePageNav"+i+"'><a rel='"+i+"' href='#'style='padding:7px;'>"+i+"</a></li>";}
else{pageNav+="<li class='simplePageNav"+i+"'><a rel='"+i+"' href='#' style='padding:7px;'>"+i+"</a></li>";}}
pageNav+="</ul>";if(!options.holder){switch(options.pagerLocation)
{case"before":selector.before(pageNav);break;case"both":selector.before(pageNav);selector.after(pageNav);break;default:selector.after(pageNav);}}
else{$(options.holder).append(pageNav);}
selector.parent().find(".simplePagerNav a").click(function(){var clickedLink=$(this).attr("rel");options.currentPage=clickedLink;if(options.holder){$(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("currentPage");$(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");}
else{$(this).parent("li").parent("ul").parent(".simplePagerContainer").find("li.currentPage").removeClass("currentPage");$(this).parent("li").parent("ul").parent(".simplePagerContainer").find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");}
selector.children().hide();selector.find(".simplePagerPage"+clickedLink).show();return false;});});}})(jQuery);
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