JMiur [E]

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
});

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.

100 | 200 | 300

Más opciones:

fill es una cadena de texto (o etiquetas html) que se insertan al final y por defecto es '&hellip;' 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.

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.


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; '
});

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.


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:

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.


¿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


4 comentarios:

Magoplup  

JMiur el último ejemplo nos redirecciona a esta misma entrada algo fallo en el truco de contraer y expandir

JMiur  

Eso fue debido a cambios importantes en la versión 1.9 de jQuery. Hay funciones internas que directamente, no existen más. Ya está arreglado. Es algo que podrá empezar a afectar a muchos scripts de muchos sitios.

Responder
Teksukamen  

Hola, interesante este trunk8, pero que pasa si necesitamos que no acorte los textos, me explico, digamos que tienes varios párrafos "trunkados" y necesitas hacer una impresión de la página, en el preview del navegador también aparecen los textos "trunkados,", aqui es donde necesitas que se impriman completos, alguna idea? saludos

JMiur  

Tendrás que buscar algun script que haga eso.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR