Consejos Blogger: Truncar textos y resumir entradas con JQuery

trunk8 es un plugin para jQuery pensado para mostrar textos largos en espacios pequeños.

Una vez que lo descargamos desde la página del desarrollador y lo agregamos antes de </head&/gt; ya se copiándolo directamente entre etiquetas script, como haríamos con cualquier otro:

<script type='text/javascript'>
//<![CDATA[
  // acá pegamos el contenido del archivo
//]]>
</script>

o alojándolo en un servidor externo:

<script type='text/javascript' src='url_archivo'></script>

No requiere nada más que ejecutar la función para que funcione, indicándole la clase o id de la o las etiquetas que queremos truncar. Por ejemplo, si el texto estuviera en un div de este tipo:

<div id="ejemplo" class="truncar">
  ... cualquier texto ...
</div>

bastaría usar algo así:

$(document).ready(function() {
  $('#ejemplo').trunk8();
  // o bien esto otro si queremos hacer referencia a la clase
  $('.truncar).trunk8();
})

En Blogger y otros sitios, se suele usar un resumen de ciertas entradas pero este plugin sólo está pensado para textos así que si queremos usarlo para aplicarlo en etiquetas que contienen otras etiquetas (imágenes, formatos, enlaces, etc) lo que debemos hacer es modificar levemente el script. En lugar de la versión minimizada, conviene bajar la versión normal desde github y abrir el archivo con cualquier editor de textos.

Allí veremos esta línea:

this.original_text = this.$element.html();

y, simplemente, la cambiamos de este modo:

var elhtml = this.$element.html();
var eltxt = elhtml.replace(/<[^>]+>/g,'');
this.original_text = eltxt;

lo que hemos hecho es decirle al script que no use el texto sino que, primero, elimine las etiquetas.

Vamos a lo concreto, supongamos que tenemos un contenido como este:

<div class="truncar">
  ... cualquier contenido ...
</div>

Phasellus aliquet, orci at faucibus vehicula, quam arcu accumsan ipsum, eu porta nunc sapien vel arcu. Maecenas pretium venenatis pellentesque. Duis pretium nibh quis eros ultricies faucibus. Suspendisse potenti. Curabitur commodo metus elit, quis consequat ipsum. Nulla varius blandit arcu. Donec egestas orci sed lacus tincidunt sed cursus turpis molestie. Duis hendrerit gravida lorem quis placerat. Proin laoreet pellentesque tellus nec imperdiet.

Nullam pretium pretium ornare. Proin bibendum, dolor non vestibulum volutpat, est felis consectetur justo, quis feugiat mauris sapien sed urna. Vivamus pharetra nulla quis magna pellentesque at bibendum.

Aunque posee una serie de opciones, me parece que, para usarlo en Blogger, sólo nos interesarán algunas de ellas. La más importante sería la que nos permite definir la altura; para eso, podemos elegir entre:

lines indica la cantidad de líneas de texto y debe ser un número (por defecto es 1)

$('.truncar').trunk8({
  lines: 5
});

pero, si el contenedor es complejo porque tiene propiedades CSS, es mejor utilizar otra opción llamada width que, por defecto es 'auto' y que nos permite establecer la cantidad de caracteres a mostrar

$('.truncar').trunk8({
  width:100
});

100 | 200 | 300

Más opciones:

fill es una cadena de texto (o etiquetas html) que se insertan al final y por defecto es '…' o sea, tres puntitos …

$('.truncar').trunk8({
  fill: '<span class="trunkfill"> ... y otras cosas</span>'
});

como en este ejemplo se usa una etiqueta con una clase (trunkfill) basta establecer una regla de estilo para ella para mostrarla de cualquier modo, diferenciándola del resto.

side nos permite seleccionar la forma en que se verá ese resumen y por defecto es 'right' o sea, se mostrarán una serie de palabras y al final los tres puntitos; pero podemos hacerlo al revés poniendo 'left' en cuyo caso, se mostrará el final del texto o bien 'center' y se mostrará un poco del inicio, los tres puntitos y un poco del final:

$('.truncar').trunk8({
  width:80,
  side:'center',
  fill: ' &hellip; '
});

Así como podemos utilizar cualquier etiqueta para agregar al final del texto, también podemos transformar esa etiqueta en un enlace que nos permita expandir o contraer su contenido, agregando un par de funciones extras:

$('.truncar').trunk8({
  tooltip: false,
  fill: ' … <a class="trunkmas" href="#">expandir</a>'
});

$(document).on('click', '.trunkmas', function(e){
  e.preventDefault();
  $(this).parent().trunk8('revert').append(' <a class="trunkmenos" href="#">colapsar</a>');
  return false;
});

$(document).on('click', '.trunkmenos', function(e){
  e.preventDefault();
  $(this).parent().trunk8();
  return false;
});

Nuevamente, como usamos etiquetas y clases, podemos estabelcer reglas de estilo para trunkmas y trunkmenos:

¿La última? Si ponemos el cursor encima de cualquiera de los divs, veremos que el tooltip nos muestra el contenido completo, eso, podemos eliminarlo con:

tooltip: false

Consejos Blogger

lunes, 21 de enero de 2013

Truncar textos y resumir entradas con JQuery

No hay comentarios:

Publicar un comentario

Datos personales