14/07/2011, 19:54
|
| | Fecha de Ingreso: febrero-2011
Mensajes: 12
Antigüedad: 13 años, 9 meses Puntos: 0 | |
Respuesta: mostrar parte de un texto y luego con un "leer mas" mostrar el resto al in Hola pablopgp_lm. Hace tiempo que necesitaba hacer algo como lo que planteaste y, antes de ayer, me puse a buscar una solución de una vez por todas y encontré este tema.
Entre tantas páginas que visité y, tomando un poco de cada una, logré hacer lo que necesitaba (con PHP, JavaScript, y consulta a Base de Datos). Te paso algo simplificado de lo que hice (sin consulta a Base de Datos) y espero que te sirva:
Supongamos que tenemos una tabla con un texto muy largo dentro de una de sus celdas y queremos mostrar una parte de él, y al hacer click sobre una imagen expandir y mostrar el texto completo y al final de éste otra imagen para contraer de nuevo al texto mas corto.
En la página incluís este código donde lo necesites.
<table>
<tr>
<td>
<?php
echo "<div id='puntoCortoId'>";
echo truncar($texto, 250)." <a id='puntoEnlaceId' onclick='MostrarOcultar(\"Id\");' style='cursor:pointer'><img src='expandir.png' border='0' /></a>";
echo "</div>";
echo "<div id='Id' style='display:none'>";
echo $texto."<br /><a id='puntoEnlaceId' onclick='MostrarOcultar(\"Id\");' style='cursor:pointer'><img src='contraer.png' border='0' /></a>";
echo "</div>";
?>
</td>
</tr>
</table>
Función PHP que trunca el texto con un mínimo de 250 caracteres y sin cortar ninguna palabra:
function truncar($texto, $limite, $terminacion = '...') {
$subcadena = substr($texto, 0, $limite);
$indiceUltimoEspacio = strrpos($subcadena, " ");
return substr($texto, 0, $indiceUltimoEspacio).$terminacion;
}
Script que se encarga de hacer la expansión y contracción de los divs. Incluilo entre <head> y </head>:
<script language="javascript" type="text/javascript">
function MostrarOcultar(id){
var puntoContraible = document.getElementById(id);
var puntoCorto = document.getElementById("puntoCorto" + id);
if (puntoContraible.style.display == 'none'){
puntoContraible.style.display = 'block';
puntoCorto.style.display = 'none';
}else{
puntoContraible.style.display = 'none';
puntoCorto.style.display = 'block';
}
}
</script>
Consideraciones:
- Si necesitas más de una celda cada Id tiene que ser único e irrepetible.
- $texto = variable que almacena el texto largo (más de 250 caracteres).
Saludos.
Última edición por lea14_9; 15/07/2011 a las 06:47 |