CodeS-SourceS
Rechercher un code, un tuto, une réponse

Implémenter un lien "lire la suite..." à vos articles en jquery

Mars 2017


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>
  • HTML, jQuery, CSS


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>


<!--Présentation de la page-->


UNE CLASSE EN JQUERY POUR "LIRE LA SUITE"


Implémentez cette classe pour afficher l'intégralité de vos articles


Affichez le code source ou cliquez ici pour recevoir le tutoriel par mail.

    


<!--Exemple d’un article appartenant à la classe « rubrique » On insère la partie invisible du texte entre des balises span -->


== Voici le titre de mon article ==

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...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.


<!--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 --> 


Lire la suite...


== Un deuxième article ==

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...


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é.


Lire la suite...


</html>


Page de démonstration : http://www.patrickcleder.com/tuto_31.php

Adresse d'origine

A voir également

Publié par pjcleder.
Ce document intitulé «  Implémenter un lien "lire la suite..." à vos articles en jquery  » issu de CodeS-SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Concevez en quelques lignes votre shadow box en jquery
Animation en boucle avec jquery