image
Inicio » Foros » JavaScript

JavaScript

Paginar al estilo twitter o facebook

Volver al foro | Responder | Añadir nuevo tema


De: matuha
Fecha: 14/11/2015
Mensaje:

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:

texto 1...

texto 2...

texto 3...

1 | 2 | 3 | 4

Me gustaría conseguir que los paginara así:

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

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:

(function($)
{$.fn.quickPagination=function(options){var
defaults=
{pageSize:2,currentPage:1,holder:null,pagerLoca
tion:"after"};var
options=$.extend(defaults,options);return
this.each(function(){var selector=$(this);var
pageCounter=1;selector.wrap("<div
class='simplePagerContainer'>
</div>");selector.parents(".simplePagerContaine
r").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.chi
ldren().hide();selector.children(".simplePagerP
age"+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;ca
se"both":selector.before(pageNav);selector.afte
r(pageNav);break;default:selector.after(pageNav
);}}
else{$(options.holder).append(pageNav);}
selector.parent().find(".simplePagerNav
a").click(function(){var
clickedLink=$(this).attr("rel");options.current
Page=clickedLink;if(options.holder)
{$(this).parent("li").parent("ul").parent(optio
ns.holder).find("li.currentPage").removeClass("
currentPage");$(this).parent("li").parent("ul")
.parent(options.holder).find("a[rel='"+clickedL
ink+"']").parent("li").addClass("currentPage");
}
else{$(this).parent("li").parent("ul").parent("
.simplePagerContainer").find("li.currentPage").
removeClass("currentPage");$(this).parent("li")
.parent("ul").parent(".simplePagerContainer").f
ind("a[rel='"+clickedLink+"']").parent("li").ad
dClass("currentPage");}
selector.children().hide();selector.find(".simp
lePagerPage"+clickedLink).show();return
false;});});}})(jQuery);


Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.