Pour un de mes articles, j’ai eu envie de mettre le sommaire de la rubrique en palette flottante afin que vous puissiez le déplacer comme bon il vous semble. En outre, j’ai eu envie de même de proposer la possibilité de diminuer cette zone de l’écran.
Comme vous avez pu le voir, j’avais déjà effectué ce genre de manipulation avec le sommaire du couteau suisse. L’idée pour cette fois est de pouvoir le faire indépendamment du sommaire.
Pour cela, j’ai utilisé jQuery fourni en standard avec Spip. Vous pouvez aussi consulter http://www.jquery.info et http://planete-jquery.fr/ qui sont en français. C’est tout simple et cela doit pouvoir être mis en plugin, mais je ne sais pas comment écrire cela.
Pour faire fonctionner ce script, je vous conseille d’installer le plugin jQuery UI pour SPIP. Pour configurer ce plugin, et donc pour charger automatiquement les librairies utiles de jQUery, dans notre exemple, vous sélectionnez :
- UI draggable (la librairie qui rend « bougeable ») ;
- Effet slide (la librairie qui anime l’affichage de la partie centrale.
Automatiquement, les autres librairies liées vont se sélectionner.
Pour cet exemple, j’ai choisi menu_meme-rubrique comme préfixe des div de la palette. Le principe général est de dire à jQuery quel morceau de la page doit être draggable. Nous indiquons donc que ce sera <div id="menu_meme-rubrique"> que jQuery devra faire bouger. Attention, vous devez utiliser une div qui est en id et non une div qui est en class. Cela se traduit en javascript tout simplement en $("#menu_meme-rubrique").draggable();. Rien qu’avec ce petit bout de code, toutes les pages qui possèdent une div menu_meme-rubrique vont pouvoir la bouger.
Maintenant que l’on peut bouger la palette, on va faire en sorte de celle-ci puisse se replier ou se déplier suivant les envies ou besoins du visiteur.
Le principe est le suivant : Lorsque l’on clique sur la div que j’ai nommée jePlie, la partie centrale de la palette se replie si elle est visible et se déplie si elle est cachée. Pour ce faire, vous créez une div englobante que vous découpez en au moins 4 sous div :
<div englobante>
<div head>
<div zone jePlie></div>
</div>
<div main>
blabla
</div>
<div footer></div>
</div>Le source du squelette de cette page est le suivant :
[MàJ du 10/08/2011] : les slideUp et slideDown ne fonctionnent pas sous IE 7. Utilisez à la place un toggleClass qui va masquer la <div id="menu_meme-rubrique-main">.
Dans le head du squelette, vous écrivez le bout de code suivant :
//le lien vers le fichier css de la palette
[<link rel="stylesheet" href="(#CHEMIN{css/palette.css})" type="text/css" media="all" />]
<script type="text/javascript">
//appel de la fonction des que la page est chargee
$(document).ready(function() {
//je rends la palette draggable
//vous remplacez #menu_meme-rubrique par n'importe quel nom de DIV ID
$("#menu_meme-rubrique").draggable();
//lorsque je clique sur la div palette-head-jePlie
$("#menu_meme-rubrique-head-jePlie").click(function () {
// test si Internet Explorer est inferieur a 8 qui ne comprend pas les slideUp et slideDown
//je rempace par un toggleClass moins esthetique, mais que voulez vous !!
if($.browser.msie && $.browser.version < 8){
$("#menu_meme-rubrique-main").toggleClass("hide");
}else{
//pour les autres navigateurs normaux
//je teste si la partie centrale de la palette
//est cachée (hidden)
if ($("#menu_meme-rubrique-main").is(":hidden")) {
//si elle est cachee, je deplie avec un effet slideDown
$("#menu_meme-rubrique-main").slideDown();
} else {
//si elle est visible, je plie avec un effet slideUp
$("#menu_meme-rubrique-main").slideUp();
}
}
//je change la class css de la partie haute pour
//passer le petit triangle de bas a droite
$("#menu_meme-rubrique-head").toggleClass("hide");
});
});
</script>Comme vous l’avez peut-être remarqué, vous pouvez déplacer aussi la zone affichant les dernières publications. Dès que vous survolez cette zone, le curseur change. J’ai tout simplement ajouté au script précédent ceci : $( "#last-news" ).draggable(); car la div concernée se nomme sur cette page div id="last-news".
Plus fort et sans aucun intérêt, vous pouvez déplacer ce gros bloc de texte car j’ai ajouté dans le code du script : $( "#content" ).draggable();. Allez-y, bougez moi histoire de...
Dernier élément à avoir en tête : jouez bien avec la propriété css z-index pour que votre fenêtre-palette soit placée au dessus des autres éléments de la page. Pour plus d’informations sur cette propriété : http://www.alsacreations.com/astuce/lire/84-comment-fonctionne-la-proprit-css-z-index.html.
À vous de jouer avec la css pour améliorer le tout.
