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> |
Implémenter un lien "Lire la suite"
m'a orienté vers ce billet qui parle du plugin jTruncate mais qui apparemment fixe la limite en mots.
Répondre avec citation
Partager