Implémenter un lien "Lire la suite"

**CinePhil** · 25/08/2012, 23h40

Bonjour,

Je dois afficher seulement les 200 premiers caractères de messages et un lien "Lire la suite..." si le message est plus long, comme sur les CMS.

m'a orienté vers ce billet qui parle du plugin jTruncate mais qui apparemment fixe la limite en mots.

En connaissez-vous un autre ou auriez-vous un tuto pour implémenter ça ?

PS je programme en PHP / Javascript / Jquery / MySQL.

EDIT :
En fait d'après la doc du plugin la limite est bien fixée en caractères et pas en mots.

Ceci dit, je me demande s'il vaut mieux charger tous les messages en entier dans la page et mettre une ready function qui va tout "truncater", quitte à ce qu'aucun long message ne soit affiché, ou au contraire limiter le chargement aux 200 premiers caractères de chaque message par la requête SQL puis faire un chargement en Ajax sur demande de l'utilisateur du message qu'il veut voir en entier.

Qu'en pensez-vous ?
Avez-vous déjà eu à faire ce genre de choix ?

**SpaceFrog** · 26/08/2012, 13h02

Il ma semble que ce sujet à déja été abordé ici ...

Le temps de retrouver le post ...

**SpaceFrog** · 26/08/2012, 13h55

tu veux couper au nombre de caractères à la brutale ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE HTML>
<html>
<head>
<title>Nouvelle page 1</title>
<style type="text/css">
.short{
 border: solid 1px silver;
 width : 400px;
 }
.lien {cursor:pointer;}
</style>
<script type='text/javascript' src="http://code.jquery.com/jquery.js"></script>
<script type='text/javascript'>
function shorten(){
	$(this).data('texte',$(this).text())
	$(this).text($(this).text().substr(0,100)).append( $("<span>").text('... lire la suite').css( {'color':'navy','font-style':'italic', 'cursor':'pointer'} ) )
	} 
 
function full(){
	$(this).text( $(this).data('texte') )
}	
 
$(function(){
$(".short").each(  shorten ).toggle(full,shorten )
 
 
})
</script>
</head>
<body>
<div class="short">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et velit 
lorem. Sed at magna ut tortor varius luctus. In laoreet tristique sem at
 scelerisque. Nullam non varius nulla. Sed dapibus urna at dolor aliquam
 id commodo eros sollicitudin. Phasellus molestie ligula id enim 
scelerisque laoreet. Curabitur ultrices nulla eget dui tempus molestie. 
Phasellus quis purus nulla, at venenatis ipsum. Etiam consectetur 
venenatis est eget scelerisque. Praesent sodales consequat nibh vel 
mollis.
</div>
<div class="short">
Nulla vehicula enim sed nulla lobortis a tincidunt tortor varius. Morbi 
venenatis, arcu nec sagittis ultrices, nibh ante accumsan magna, eget 
suscipit lacus tortor vitae urna. Fusce suscipit eros et erat dictum 
mattis. Etiam felis justo, condimentum at lacinia et, dapibus non ipsum.
 Fusce luctus turpis sed augue viverra aliquet. Praesent ut tempor 
turpis. Mauris blandit eros in libero luctus pulvinar. Vivamus ac enim 
magna, eu sagittis libero.
</div>
<div class="short">
Proin in tellus laoreet elit fermentum mollis. Quisque varius semper 
lectus ac molestie. Vestibulum elementum nunc vitae sapien commodo non 
vulputate eros placerat. Nam mollis malesuada eros a posuere. Donec et 
metus quis ante vehicula accumsan. Integer id orci quis lacus tempor 
aliquam. In consequat feugiat erat, id porta risus gravida eu. Ut ac 
erat et nunc imperdiet placerat. Quisque vulputate interdum dui, eget 
suscipit mi scelerisque non. Sed consectetur fringilla lectus, eget 
hendrerit tellus sodales in. Sed fermentum rhoncus dui sit amet 
vestibulum. Vivamus mattis, augue facilisis tristique adipiscing, odio 
leo vehicula ligula, vitae scelerisque neque erat ac eros. Aenean 
iaculis sagittis sem, vel gravida diam bibendum nec. In semper sagittis 
odio at blandit. Nullam ultricies imperdiet lectus eu facilisis. 
Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas.
</div>
 
</body>
</html>

**CinePhil** · 26/08/2012, 15h43

Merci pour la réponse mais j'ai opté pour la solution Ajax.

Je ne récupère de la BDD que les 200 premiers caractères du message et la longueur totale du message.
Si la longueur est supérieure à 200, j'ajoute le lien "Lire la suite" (traduit selon la langue de l'utilisateur.
Le lien lance un Ajax qui récupère la totalité du message et l'affiche avec un lien pour réduire le message.

Je publierai peut-être un billet de blog avec ce truc.