IMPLEMENTER « LIRE LA SUITE » EN JQUERY
- CONSIGNES
- Votre page doit être liée à la dernière version de jQuery (jquery-1.4.2.js)
- Si ce n’est pas le cas, vous pouvez télécharger ce fichier sur http://api.jquery.com/
- Ensuite, placez le code suivant entre les balises <head></head> : <script type="text/javascript" src="jquery-1.4.2.js"></script>
Collez ce code dans l’éditeur de votre choix et enregistrez le avec une extension de type .html ou .php à la racine de votre site.
<!doctype html>
<html>
<head>
<title>Une classe en jQuery pour "LIRE LA SUITE" de vos articles</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style>
/*Style general de la page*/
body {font:14px verdana, sans-serif;background:#000000;color:#C0C0C0;font-weight:bold;}
/*Style des articles et de chaque titre*/
.rubrique {border:1px solid #fff;width:50%;}
h2 {color:#FFFF00;}
/*Style du lien « Lire la suite »*/
.suite {color:#FF4500;}
</style>
<script type="text/javascript">
//noConflict() permet d’éviter les conflits entre d’éventuels plugins
jQuery.noConflict();
//Préchargement des actions liées au clic sur le lien “Lire la Suite”
jQuery(document).ready(function(){
jQuery(".suite").click(function(){
//La partie de l’article incluse entre les balises span apparait si elle est masquée et inversement.
jQuery("#" + this.name + " span").slideToggle();
//Changement du libellé du lien.
if (jQuery(this).text() == "Lire la suite..."){
jQuery(this).text("Replier");}else
{jQuery(this).text("Lire la suite...");}
});
});
//Tout le contenu des balises span des articles appartenant à la classe //« rubrique » est masqué au chargement de la page.
jQuery(function(){
jQuery(".rubrique span").toggle();
});
</script>
</head>
<body>
<--Présentation de la page-->
<font style="color:#FFFF00">UNE CLASSE EN JQUERY POUR "LIRE LA SUITE"</font><br>
<font style="color:#FFFFFF">Implémentez cette classe pour afficher l'intégralité de vos articles</font><br>
Affichez le code source ou cliquez <a href="newsletter.php" style="color:#FFFF00;text-decoration:none">ici</a> pour recevoir le tutoriel par mail.<br><br>
<br>
<br>
<--Exemple d’un article appartenant à la classe « rubrique » On insère la partie invisible du texte entre des balises span -->
<div id="Un" class="rubrique">
<h2>Voici le titre de mon article</h2>
Ce texte est visible puisqu'il s'agit du début de mon article
mais j'ai inséré dans celui-ci de quoi le raccourcir et vous
permettre de...<span>le faire apparaitre entièrement si le
sujet vous intéresse. Cette fonctionnalité ne vous coutera que
quelques lignes de Jquery et permettra à vos lecteurs de lire
toutes vos rubriques sans cliquer dans tous les sens.</span><br><br>
</div>
<--Exemple de lien « Lire la suite… » On veille bien à ce que l’attribut name du lien soit égal à l’id de l’article (Div) correspondant -->
<a href="#" name="Un" class="suite" >Lire la suite...</a><br>
<br>
<div id="Deux" class="rubrique">
<h2>Un deuxième article</h2>
Ici aussi nous n'affichons au départ que les premiers mots
d'un article afin de gagner de la place sur la page et pour
plus de confort en terme de lecture...
<span>et c'est tellement facile à mettre en oeuvre ! Alors faites-vous
plaisir et sachez qu'un bout de code est toujours perfectible. L'important
est d'être bien inspiré.</span><br><br>
</div>
<a href="#" name="Deux" class="suite" >Lire la suite...</a><br>
<br>
</body>
</html>
Page de démonstration : http://www.patrickcleder.com/tuto_31.php