J’ai ajouté un paramètre draggable à la boîte sommaire modifiée dans son css. Maintenant, cela fonctionne pil poil me semble-t-il.
Reste à faire :
J’ai tout repris car cela ne fonctionnait pas avec IE7 comme par hasard. Voici le principe du sommaire du plugin Couteau suisse : il a un fond de palette sommaire avec un background que j’ai fixé à son bas pour avoir l’arrondi du bas de palette, on modifie le bg de la partie titre et maintenant cela fonctionne sous IE 7.
J’ai ôté la partie fermeture de la palette sommaire qui ne sert pas à grand chose contrairement à ce que je pensais. En plus, cela merdouille complètement sous IE7 aussi.
Le principe est de surcharger les fichiers gérant le sommaire du couteau suisse. Surcharger consiste à copier lesdits fichiers dans votre dossier squelettes en respectant la même hiérarchie que dans le dossier du couteau suisse. Le couteau suisse, lorsqu’il appelle une fonction va regarder d’abord dans le dossier squelettes s’il trouve un fichier de même nom. Dans l’affirmative, il va utiliser celui du dossier squelettes en lieu et place de l’original. Vous pouvez donc réécrire, modifier le contenu de cette copie comme bon il vous semble et les fichiers originaux peuvent être mis à jour par le couteau suisse sans que votre beau travail soit détruit.
Les fichiers source sont en téléchargement.
Il vous faut créer un dossier « fonds », un dossier « img », un sous dossier « sommaire » dans le dossier « img » et un dossier « outils » dans votre dossier squelettes. Vous copiez le fichier sommaire .html dans le dossier fonds, le fichier sommaire.css.html dans le dossier outils et les fichiers d’images dans le sous dossier « sommaire » du dossier « img ».
Vous avez donc :
- squelettes/fonds/sommaire.html
- squelettes/outils/sommaire.css.html
- squelettes/img/sommaire/bg_titre.png
- squelettes/img/sommaire/bg_titre_bas.png
- squelettes/img/sommaire/bg_sommaire.png
Le source du fichier fonds/sommaire.html
[(#REM) l'appel à jquery pour la fonction draggable ]
<script type="text/javascript" src="[(#CHEMIN{lib/jquery-ui-1.8.9/ui/minified/jquery-ui.min.js})]"></script>
<script type="text/javascript">
//Ajout de la fonction draggable pour la boite sommaire
//version du 12 avril 2011, 19h05
//jean-philippe guihard
//je court-circuite en surchargeant la fonction cs_sommaire_init()
//de la lame sommaire automatique du couteau suisse
//le but du jeu est de déplacer la boite, de récupérer l'event stop pour
//court-circuiter le changement de class de la barre de titre
//On initialise la variable $dragge à faux, puis on la met a vrai
//si draggage de la boite ce qui court-circuite le toggleClass
//via le .click( function)
//j'initialise la variable $dragge a false. Cette variable recueille si la boite de sommaire
//a été ou pas déplacée
$dragge = false
//surcharge de la fonction du CS
function cs_sommaire_init() {
//met la boite en draggable via son id outil_sommaire
$("#outil_sommaire").draggable({
// applique une opacite de 45 lors du draggage
opacity: 0.45 ,
scroll: false ,
//met la variable dragge a vraie car vient d'etre deplace via l'event stop
stop: function() {
$dragge = true;
}
});
jQuery(sommaire_sel, this)
.cs_todo()
.click( function(){
// recupere l'event click, si dragge est vrai, donc si sommaire deplace
// je ne demande pas a replier/deplier le sommaire
//si faux, pas de deplacement du sommaire, alors je plie/deplier le sommaire
if (!$dragge){
jQuery(this).toggleClass('cs_sommaire_replie')
.next().toggleClass('cs_sommaire_invisible')
// annulation du clic
return false;
}else{
if($dragge){
$dragge = false;
}
}
});
}
[(#REM)
Ce fond est surchargeable dans vos squelettes.
Utilisation d'un cookie pour stocker l'etat du sommaire au moment de quitter la page.
Champs disponibles :
fond_css : 'avec' ou 'sans'
sommaire : les liens du sommaire en <li></li>
Indispensable :
<div class="cs_sommaire_titre_XXX"> et <ul> places a la suite l'un de l'autre
Par defaut : sommaire deplie
Pour un sommaire replie a la premiere visite de la page :
- ajouter la classe 'cs_sommaire_replie' a : <div class="cs_sommaire_titre_XXX">
- ajouter la classe 'cs_sommaire_invisible' a : <ul>
]
[(#REM)
j'ai juste ajouté le lien de retour vers le haut de la page
]
<div class="cs_sommaire cs_sommaire_[(#ENV*{fond_css})]_fond" id="outil_sommaire">
<div class="cs_sommaire_inner">
<div class="cs_sommaire_titre_[(#ENV*{fond_css})]_fond" title="Replier déplier déplacer le sommaire"> <:couteau:sommaire_titre:> </div>
<ul>
[(#ENV*{sommaire})]
<li><a href="#hautDePage" title="Revenir en haut de la page">Retour en haut de page</a></li>
</ul>
</div>
</div>Lien :
Le couteau suisse sur sip-contrib : http://www.spip-contrib.net/Le-Couteau-Suisse.
Vous trouverez sur ces pages tout ce qu’il faut savoir sur les multiples possibilités de ce plugin développé par Patrice Vanneufville. Son principe de base est, comme son nom l’indique, de fournir des outils divers nommés en toute logique « lame ».
J’utilise sur ce site les lames suivantes :
- Sommaire automatique ;
- Découpe en pages et onglets qui découpe un article en plusieurs pages. Allez sur cette page pour voir cette lame en action. L’avantage de ce système est que la page n’étant pas chargée en entier, elle est de fait allégée dans sa vitesse de chargement ;
- Blocs Dépliables ;
- Ancres douces.
