Le code javascript
Les éléments portant la class .slide_button seront des boutons qui au click feront apparaître (et disparaître) l’élément suivant avec un effet slide.
<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
$('.slide_button').css('cursor','pointer').click(function(){
$(this).next().slideToggle('slow');
});
});
// ]]>
</script>Les boucles SPIP
La boucle suivante présente tout les articles de la rubrique. Si on clique sur le titre d’un article, on a l’intro de l’article qui apparaît avec un effet slide.
Important : glisser un display : none dans les styles de l’élément à camoufler. (bien sûr, c’est mieux si c’est dans une feuille de style externe)
Important : Il ne faut pas oublier de replacer le contenu de la div "invisible" dans une balise "noscript" pour que les navigateurs ayant javascript désactivé puissent avoir accès à son contenu.
<BOUCLE_articles(ARTICLES) {id_rubrique}>
<h3 class="slide_button">#TITRE</h3>
<div style="display: none;">#INTRODUCTION<br />
<a href="#URL_ARTICLE">Accéder à l'article</a></div>
<noscript>
<div>#INTRODUCTION<br />
<a href="#URL_ARTICLE">Accéder à l'article</a></div>
</noscript>
</BOUCLE_articles>Exemple
Voir un exemple en ligne sur le site de La Vie des Idées, le système est utilisé ici pour les sites syndiqués mais le principe est le même (cliquez sur [Voir les derniers articles] ) :
http://www.laviedesidees.fr/spip.ph...
Vos commentaires
# Le 12 novembre 2008 à 19:40, par Bibeuwt En réponse à : jQuery slide sur l’intro des articles avec SPIP
Quel dommage tout ce spam, excellent site que le tien ! Merci pour l’astuce jquery
# Le 21 mars 2009 à 17:30, par Abel En réponse à : jQuery slide sur l’intro des articles avec SPIP
Merci !
J’ai un peu fait le ménage au niveau des spams, c’est vrai que c’était l’invasion...
Répondre à cet article
Suivre les commentaires :
| 