Escrito por: Martín el 11-07-2011 05:00:01 y leído 1983 veces

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 XHTML

<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 XHTML

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

Categorías: Jquery • Plugin • Expander • Collapse •

Artículos relacionados:

• 20 plugins para jQuery que no pueden faltar en tus webs
• Excelente listado de 240 plugins para jquery
• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• jQuery Validate: la rápida validación de formularios.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

jquery expander • expander jquery • jquery cortar cadena • martin iglesias • jQuery Expander Plugin • blog martin iglesias • cortar cadena de texto y mostrar • blog de martin iglesias • cortar textos read more jquery • jquery div scroll expander • cortar cadena jquery • jquery plugin ver mas • jquery PLUGIN TEXTO • jquery cortar texto • cortar string jquery • barra expandible jquery • ver mas o menos div jquery • martiniglesias plugin blogger • cortar parrafos jquery • recortar cadena de texto jquery • martin plugins • easyzoom js jQuery js • div ver mas con jquery • div expandible jquery • expander y contraer div jquery • texto expandible jquery blogger • jquery palabras • lista expandible jquery • cortar texto con jquery • expander jquery plugin • acortar texto jquery ver mas • text expander para codigo javascript • jquery spander • listados colapse jquery • jquery cortar cadena al final de un div • blogger como ampliar la cantidad de texto de read more • plugin para expander contenidos • limitar string jquery • expander contraer textos jquery • blogger jquery • plugin jquery expandir o contraer parrafo • <script src=javascript/contarcaracteres js type=text/javascript></script> • validar cadena de texto con jquery • no recortar el contenido en una lista con jquery • expande jquery • elemento expandible jquery • expandir y colapsar un div jquery • jquery expander css • jquery expander youtube • jquery expander div • boton mostrar mas texto de youtube con jquery • jquer expander plugin • expandir un div con jquery • nube de tags jquery • funcion jquery cortar texto • ver mas texto jquery • jquery table text expander • cortar texto y ver mas php • div expandible • jquery expander plugin modificar read more • com cortar cadena jquery • cortar cadena php mostrar tooltip • recortar y expandir texto • texto contraer jquery • recortar texto jquery y expandir • contraer contenido jquery • blog iglesias jquery • jquery ampliar capa contenido • expanzor jquery • textarea con jquery q se expanda segun el texto • recortar cadena con jquery • separar cadenas en jquery • tutorial plugin jquery expander • pase de fotos ampliable jquery • contraer un div horizontal jquery • jquery expander color • expande y contrae con javascript • el bloc de martin iglesias • jquery expandir textarea segun texto • plugin menu cadena jquery • cortar una cadena de caracteres en jquery • galería de imágenes con detalle ampliable (jquery • expandir contraer div ver mas jquery • jquery contar cadena • jquery expansor • jquery cortar texto por palabras • jquery contar palabras cadena de texto • cortar cadena caracteres con jquery • jquery collapse expande y contrae de una vez • jquery plugins contraer • ampliar div segun texto jquery • detalle ampliable jquery • cortar palabras en jquery • expansor de imagenes jquery • classiPress • expandir y contraer un texto con jquery aplicacion movil • dividir cadenas jquery • jquery contraer expandir texto • jquery cortar string • plugin php para recortar cadenas de texto •