BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

jQuery Expander plugin

11/JUL/2011 6.945 visitas Ver comentarios
jQuery Expander plugin

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Este plugin de jquery se encarga de cortar largas cadenas de texto para mostrar un ver más o ver menos al final del texto. Cortará el párrafo según la cantidad de palabras que especifiquemos y agregará automáticamente un botón para expandir el contenido. Una vez expandido, cambiará ese botón por otro para volver a contraer el texto a su formato original.

Realmente no tiene mucha explicación y no es difícil de aplicar. Es lo que estoy usando aquí abajo, en las palabras claves de este artículo, donde se irán agregando todos aquellos criterios de búsqueda por los que la gente encuentra este artículo. Una vez que pase la cantidad de palabras especificadas, el plugin, lo cortará y mostrará un ver más al final para expandir ese div y ver todas las palabras claves.

Requisitos.
Sólo necesitas, jQuery, el plugin jQuery Expander y un poquito de javascript para aplicarlo. Mírate los códigos a continuación y descarga el plugin (o mira las demos) en la web del autor.

Código 1 - HTML
<div class="expandable">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
</p>
<p>Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</div>
Código 2 - HTML
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.expander.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// simple example, using all default options
$('div.expandable p').expander();
// *** OR ***
// override some default options
$('div.expandable p').expander({
slicePoint: 80, // default is 100
expandText: '[...]', // default is 'read more...'
collapseTimer: 5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
userCollapseText: '[^]' // default is '[collapse expanded text]'
});
});
</script>

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018