Implémenter un lien "Lire la suite"

Version imprimable

25/08/2012, 23h40
CinePhil

Implémenter un lien "Lire la suite"

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.

:google: 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 ?
26/08/2012, 13h02
SpaceFrog

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

Le temps de retrouver le post ...

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

Code:

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>

26/08/2012, 15h43
CinePhil

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.
29/08/2012, 16h10
CinePhil

Voilà, billet publié et ouvert aux commentaires ici ou là-bas. :mrgreen:
29/08/2012, 16h43
SpaceFrog

Donc un ajax a chaque click ...
moi aucun ^^ j'epargne le reseau
29/08/2012, 17h12
CinePhil

Et si la requête récupère des dizaines de textes longs tu ramènes un gros paquet d'octets pour rien.

Dans mon cas, ça me semblait plus rationnel de faire ainsi car, bien sûr, la page est beaucoup plus complexe que ce simple affichage de textes !

Je préfère ramener 1 texte long sur demande de l'utilisateur tous les X secondes, voire minutes, nécessaires au temps de lecture que de le voir se lasser d'attendre le chargement de la page dont il ne lira peut-être que quelques pourcents du contenu.

Ça se discute comme disait quelqu'un qui vient de nous quitter !
14/06/2013, 01h06
onesat

implémenter dans un éditeur comme ckeditor ou tinymce

Salut tout le monde,
Sa fait un bon moment que je voulais faire la même chose avec un éditeur comme ckeditor ou tinymce! Donc, je voudrais savoir si la méthode de CinePhil pourrais m'aider ou celle proposer par SpaceFrog!?
Bref, je voudrais un fonctionnement du lien Lire la suite semblable à celui de Joomla!