Un peu de Jquery dans SPIP
28 août 2009
Par Matias Grenn - Spip - Lien permanent
Réalisons simplement avec jQuery un petit menu dynamique sous SPIP avec apparation des titres des articles lors du survol du logo.
Pas la peine ici de faire la promo ni de SPIP, ni de Jquery, mais juste vous montrer une chose assez simple à réaliser.
L'idée est d'afficher dans une liste une suite de logos d'articles d'une rubrique précise et qu'au survol le titre s'affiche sous cette liste de logos.
La liste avec la boucle dans la page rubrique se présente ainsi :
le style CSS :<B_cinq>
<ul id="cinq"><BOUCLE_cinq(ARTICLES){id_rubrique}{par num titre}>
[<li><div id="logo#ID_ARTICLE">(#LOGO_ARTICLE|#URL_ARTICLE|image_reduire{140}|image_recadre{67,67,center}|inserer_attribut{'alt',#TITRE})</div>
<div id="#ID_ARTICLE">#TITRE</div>
</li>]
</BOUCLE_cinq>
</ul>
</B_cinq>
Bon jusque là rien de compliqué...#container #content ul#cinq li{
float:left;
margin-right:9px;
width:67px;
}
Maintenant on va faire disparaître grâce à jQuery la div qui contient le titre de l'article, puis le faire apparaître lorsque la souris survole le logo :
Et voilà...<script type="text/javascript">
$(document).ready( function () {
<BOUCLE_div(ARTICLES){id_rubrique}{par num titre}>
$('#container #content ul#cinq li div##ID_ARTICLE').css("display","none");
$('#container #content ul#cinq li div#logo#ID_ARTICLE').mouseover(function(){
$('#container #content ul#cinq li div##ID_ARTICLE').css({ display: "inline", position: "absolute", left: "0px", top: "120px"});
});
$('#container #content ul#cinq li div#logo#ID_ARTICLE').mouseout(function(){
$('#container #content ul#cinq li div##ID_ARTICLE').css({ display: "none"});
});
</BOUCLE_div>
})
</script>
On peut aussi ajouter un effet typo avec cufón en ajoutant dans la boucle du jQuery :
Voilà, votre effet fonctionne...Cufon.set('fontFamily', 'nomDeVotreFichierPoliceEnJsCufon')
.replace('#container #content ul#cinq li div##ID_ARTICLE', {color:'#333333',fontSize:'15px'});
Bientôt je vais pouvoir vous montrer un exemple concret sur une réalisation de site qui se termine...




Commentaires
Bonjour,
Pouvez-vous m'indiquer où vous placez le script : dans <head> ?
ou faut-il l'imbriquer dans la boucle qui appel les logos ?
Merci pour votre aide
Dan
Dangénéralement il est conseillé de mettre le code jQuery en bas de page avant la fermeture du body, mais cela fonctionne aussi dans le head... pas besoin de l'imbriquer dans la boucle qui appelle les logos, ici jQuery agit sur le DOM et fait disparaître (display : none) ou apparaître (display:inline) des éléments en fonction des critères spécifiés...
Erwan