Comunidad de diseño web y desarrollo en internet online

Paginar al estilo twitter o facebook

Citar            
MensajeEscrito el 14 Nov 2015 01:39 pm
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:

Código :

texto 1...

texto 2...

texto 3...

 1 | 2 | 3 | 4 


Me gustaría conseguir que los paginara así:

Código :

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í:

Código :

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:

Código Javascript :

(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;});});}})(jQ[/code]uery);

Por matuha

3 de clabLevel



 

chrome
Citar            
MensajeEscrito el 26 Nov 2015 12:45 pm

Por ipalmeros

45 de clabLevel



 

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.