SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 187 visiteurs en ce moment

Accueil > Outils pour plugins > Le Couteau Suisse > Des blocs dépliables

Des blocs dépliables

6 janvier 2008 – par mj, Patrice Vanneufville – 474 commentaires

73 votes

Cet outil vous permet de créer des blocs dont le titre cliquable peut rendre un contenu visible ou invisible, voire de les munir d’une adresse pour que le bloc visible soit récupéré en AJAX. Ces blocs sont disponibles dans tous vos contenus SPIP (articles, rubriques, etc.) ainsi que dans vos squelettes.

Cet outil est livré en tant que plugin autonome ou alors sous forme de lame du couteau site.

Présentation

Cet outil permet de créer des blocs dont le titre cliquable peut rendre un contenu visible ou invisible, voire de les munir d’une adresse pour que le bloc visible soit récupéré en AJAX. Ces blocs sont disponibles dans tous vos contenus SPIP (articles, rubriques, etc.) ainsi que dans vos squelettes (fichiers .html). Ils sont facilement configurables et imbricables.

Le plugin est aussi disponible en version autonome ou sous forme de lame du Couteau Suisse .

Dans les contenus SPIP

Les rédacteurs ont à disposition les nouvelles balises <bloc> (ou <invisible>) et <visible> à utiliser dans leurs textes (articles, rubriques, etc.) comme ceci :

  1. <bloc>
  2. Un titre qui deviendra cliquable
  3.  
  4. Le texte, initialement caché, à montrer/cacher, après deux sauts de ligne...
  5. </bloc>

Télécharger

  1. <visible>
  2. Un titre qui deviendra cliquable
  3.  
  4. Le texte, initialement affiché, à cacher/montrer, après deux sauts de ligne...
  5. </visible>

Télécharger

• Résumé

Pour qu’un résumé puisse alterner avec le contenu du bloc initialement caché, vos rédacteurs peuvent utiliser les balises <resume></resume> après le double saut de ligne comme ceci :

  1. <bloc>
  2. Le titre
  3.  
  4. <resume>Un résumé</resume>
  5. Le contenu du bloc plus développé
  6. </bloc>

Télécharger

Dans les squelettes

Vous avez à votre disposition les nouvelles balises #BLOC_TITRE, #BLOC_RESUME, #BLOC_DEBUT et #BLOC_FIN à utiliser comme ceci :

  1. #BLOC_TITRE
  2. Mon titre
  3. #BLOC_RESUME
  4. Le résumé de la suite
  5. #BLOC_DEBUT
  6. Mon bloc dépliable
  7. #BLOC_FIN

Télécharger

• Résumé

La balise #BLOC_RESUME est facultative. En cas d’utilisation, le résumé entre #BLOC_RESUME et #BLOC_DEBUT sera masqué lorsque le bloc est rendu visible.

Toutefois, seul le titre reste cliquable.

• Ajax

Pour utiliser Ajax, il faut préciser l’URL à charger grâce à la balise #BLOC_TITRE{mon_URL} à laquelle vous ajoutez un paramètre. Le fichier (ou l’adresse) pointée par l’url sera alors chargée dans le BLOC (entre #BLOC_DEBUT et #BLOC_FIN) avant que le bloc ne soit rendu visible.

Exemple dans une boucle (ARTICLES) : [(#BLOC_TITRE{[(#URL_PAGE{monajax}|parametre_url{id_article,#ID_ARTICLE})]})]
Ici, le fond monajax.html ne sera donc appelé que lorsque le visiteur voudra déplier le bloc.

Ce mécanisme permet d’alléger le poids de la page initiale et pourra augmenter la vitesse de navigation...

Notez cependant que #URL_PAGE n’aime pas les sous-répertoires sous SPIP : vous risquez un accès interdit. Remplacez donc #URL_PAGE{inc/qqchose} par #URL_PAGE{qqchose}.

Un exemple appelant le 1er article en base et transmettant le paramètre var_mode indispensable développement du site :

  1. [(#BLOC_TITRE{[(#URL_PAGE{monajax}|parametre_url{id_article,1}|parametre_url{var_mode,#ENV{var_mode}})]})]
  2. My qualifications
  3. #BLOC_DEBUT
  4. Wait please...
  5. #BLOC_FIN

Télécharger

• Bloc visible

Pour produire un bloc déplié (dont le contenu est visible), ajoutez simplement l’argument {visible} à la balise #BLOC_TITRE. Exemple : #BLOC_TITRE{visible}Sommaire

Installation

L’outil décrit ici est une fonctionnalité du plugin « Le Couteau Suisse » que vous pouvez trouver ici : Le Couteau Suisse.

Pour avoir accès aux raccourcis et aux balises décrits dans cet article, il vous faut donc avoir préalablement installé ce plugin en suivant la procédure normale d’installation des plugins SPIP.

Ensuite, veuillez activer l’outil « Blocs Dépliables » en vous rendant sur la page d’administration du plugin en espace privé (Bouton Configuration, et onglet "Le Couteau Suisse").

Une fois cet outil activé, vous aurez enfin la possibilité d’insérer dans vos articles ou dans vos squelettes des blocs dépliables/repliables.

Dépendances

Cet outil a besoin de la librairie jQuery. Le site officiel (en anglais) est : http://jquery.com/. D’autres informations sont disponibles en français ici : http://www.jquery.info/. Cette librairie de fonctions JavaScript a été complètement intégrée dans SPIP à partir de la version 1.92. Pour les versions antérieures, il vous faudra installer un plugin spécifique que vous pouvez télécharger ici : http://files.spip.org/spip-zone/jqu....Sommaire

Si vous remarquez un conflit avec votre squelette ou un autre plugin (dysfonctionnement des blocs par exemple), tentez de modifier l’option de configuration « Balise pour les titres ». La valeur par défaut est h4, mais elle peut être changée en h5 ou même div.

Personnalisation des blocs

Les CSS doivent être ajoutées dans le fichier habituel de vos squelettes. En ce qui concerne la dist SVN de SPIP, il s’agit du fichier "habillage.css". On le surcharge souvent à la racine du squelette utilisé pour le site.

Il y a une autre possibilité encore, celle de surcharger directement le fichier couteau_suisse/outils/blocs.css.html en le recopiant dans monsquelette/outils/blocs.css.html et en y modifiant les styles proposés ou en y ajoutant vos propres styles.

Attention : toute modification d’un fichier surchargé nécessite une recompilation des outils du Couteau suisse, obtenue en se rendant simplement sur la page de configuration du plugin ou en ré-affichant celle-ci. N’hésitez pas à vider également les caches de SPIP, ou de travailler sans cache durant le développement du site.

Un bloc <bloc> (ou un #BLOC_XXX) est construit comme ceci :

  1. <div class="cs_blocs">
  2. <h4 class="blocs_titre blocs_replie">
  3. <a href="#">un titre</a></h4>
  4. <div class="blocs_invisible">le contenu</div>
  5. </div>

Télécharger

Si l’on veut en modifier l’apparence, il suffit donc de déclarer un style perso comme ceci :

  1. div.cs_blocs>div {
  2. border:solid 2px;
  3. }
  4.  
  5. h4.blocs_titre, h4.blocs_replie {
  6. background:transparent none;
  7. }

Télécharger

Dans cet exemple, tous les <bloc> auront un cadre noir autour du contenu et les tous les titres de blocs repliables h4 seront privés de leur petit triangle.

Pour y voir plus clair, je conseille toujours de débuguer son site avec FireFox et l’excellente extension FireBug. On peut y gérer les CSS et débugger le JS à la volée, c’est très pratique.

Il se peut que, si vous placez une image dans un bloc dépliable, le bloc ne soit pas correctement déplié. Essayez alors d’ajouter le style CSS suivant :

.blocs_destination { overflow: hidden; }Sommaire

Blocs numérotés

Vous avez la possibilité d’ajouter un numéro à vos raccourcis, afin de mieux cibler l’apparence que vous pourriez donner à vos blocs dépliables. La numérotation des blocs est également fort utile pour créer des blocs imbriqués. En utilisant par exemple <bloc#2> (ou <invisible#2> ou <visible#2>), la classe « cs_bloc2 » sera ajoutée au bloc <div principal :

  1. <bloc#2>
  2. Un titre qui deviendra cliquable
  3.  
  4. Le texte à cacher/montrer, après deux sauts de ligne...
  5. </bloc#2>

Télécharger

Ce bloc <bloc#2> est construit comme ceci :

  1. <div class="cs_blocs cs_bloc2">
  2. <h4 class="blocs_titre blocs_replie">
  3. <a href="#">un titre</a></h4>
  4. <div class="blocs_invisible">le contenu</div>
  5. </div>

Télécharger

Si l’on veut en modifier l’apparence, il suffit donc de déclarer un style perso comme ceci :

  1. div.cs_bloc2>div {
  2. border:solid 2px;
  3. }
  4.  
  5. div.cs_bloc2 h4.blocs_titre, div.cs_bloc2 h4.blocs_replie {
  6. background:transparent none;
  7. }

Télécharger

Dans cet exemple, tous les <bloc#2> auront un cadre noir autour du contenu et seuls les titres de ces blocs h4 seront privés de leur petit triangle.

Petite précision : l’ancienne syntaxe <bloc2></bloc2> (sans le dièse) devient obsolète et doit être évitée car SPIP 2.0 considère désormais que cette notation est un modèle. Si vos rédacteurs ont utilisé cette notation, je crains qu’il faille corriger toutes les occurrences directement en base de données... Pour rechercher les fautifs, la syntaxe SQL à utiliser est par exemple : SELECT id_article FROM spip_articles WHERE texte REGEXP '</?bloc[[:digit:]]+>'. Pour effectuer les remplacements, alors essayez peut-être : UPDATE spip_articles SET texte = REPLACE(texte, 'bloc2>', 'bloc#2>') (je ne pense pas qu’on puisse utiliser les regexp avec un replace...)

Dans vos squelettes, la balise titre à utiliser est alors :
#BLOC_TITRE{un_numero} ou #BLOC_TITRE{un_numero, mon_URL} à la place de : #BLOC_TITRE ou #BLOC_TITRE{mon_URL}. Les classes générées sont les mêmes que précédemment. Exemples : #BLOC_TITRE{1} ou #BLOC_TITRE{#ID_ARTICLE}. Pour un bloc déplié (bloc dont le contenu est visible), utilisez alors la syntaxe #BLOC_TITRE{visible, un_numero, mon_URL}. L’ordre des arguments n’importe pas.Sommaire

Balise <h4>

Puisque le titre du bloc est transformé en titre HTML (balise <h4> par défaut), il est bien entendu déconseillé de rédiger un bloc comme :

  1. <bloc>
  2. {{{Un intertitre à éviter !!}}}
  3.  
  4. Ceci est une mauvaise syntaxe...</bloc>

Télécharger

De même, il est conseillé d’agir directement sur les styles, plutôt que de mettre un attribut en dur sur un titre de bloc. Exemple :

  1. <bloc>
  2. {{Un titre en gras}}
  3.  
  4. Le gras sur le titre est complètement inutile si vous avez défini ce style :
  5. h4.blocs_titre {
  6. font-weight:bold;
  7. }
  8. </bloc>

Télécharger

Enfin, si le choix de la balise <h4> ne vous convient pas pour le titre cliquable de vos blocs, il suffit de la modifier sur la page d’administration du Couteau Suisse en indiquant h5, h6 ou h7, en fonction de vos CSS.... Si vous voulez utiliser la balise <h3> que SPIP utilise lui-même pour les intertitres (notation : {{{Mon intertitre}}}), alors le sommaire automatique prendra en compte vos titres de blocs.Sommaire

L’attribut title du titre

Depuis la version 1.8.15.01 du plugin, le titre d’un bloc est automatiquement affublé d’un title par défaut : "Déplier" ou "Replier". La source brute du bloc ne possède pas de title, mais JavaScript s’en charge au chargement de la page en cherchant le dernier div de classe blocs_titre (cette classe est invisible par défaut). Si cette classe est trouvée, JavaScript en lit le contenu HTML qui doit contenir le séparateur « || » et modifie le title du titre du bloc en fonction de son état (déplié ou replié).

Exemple : <div class="blocs_title">Déplier||Replier</div>.

Personnalisation : dans le fichier mes_fonctions.php de votre squelette, créez la fonction blocs_title($titre='', $corps='', $num=''). Celle-ci doit renvoyer un tableau contenant le texte pour chaque état du bloc (déplié ou replié). Exemple :

  1. function blocs_title($titre='', $corps='', $num='') {
  2. $titre = couper($titre, 30);
  3. return array("D&eacute;plier le bloc &laquo;$titre&raquo;", "Replier le bloc &laquo;$titre&raquo;");
  4. }

Télécharger

Pour un bloc dans un squelette, il suffit d’ajouter la div.blocs_title décrite ci-dessus en clair :

  1. #BLOC_TITRE #TITRE
  2. #BLOC_RESUME #INTRODUCTION
  3. #BLOC_DEBUT #TEXTE
  4. <div class="blocs_title">Déplier mon bloc||Replier mon bloc</div>
  5. #BLOC_FIN

Télécharger

Déplier un bloc au chargement de la page

Cela peux se faire directement en jQuery (code JavaScript à insérer dans votre squelette) en simulant un clic de souris.

Blocs classiques

La fonction eq(index) permet de choisir le bloc à déplier, sachant que la variable index commence à zéro. L’exemple suivant déplie le premier bloc de la page :

  1. jQuery(document).ready(function() {
  2. jQuery('h4.blocs_titre').eq(0).click();
  3. });

Télécharger

Dès la version de SPIP 2.0, utilisez plutôt la balise #BLOC_DEPLIER{index} que vous pouvez placer n’importe où dans la page. Exemple pour déplier le 5e bloc une fois la page chargée : #BLOC_DEPLIER{4}.

Blocs numérotés

Le code jQuery est plus facile : il suffit de repérer le sélecteur "div.cs_blocXX" où XX est le numéro du bloc. L’exemple suivant déplie le bloc #4 de la page :

  1. jQuery(document).ready(function() {
  2. jQuery('div.cs_bloc4')
  3. .children('.blocs_titre').eq(0).click();
  4. });

Télécharger

Dès la version de SPIP 2.0, utilisez plutôt la balise #BLOC_DEPLIER_NUM{index} que vous pouvez placer n’importe où dans la page. Exemple pour déplier le bloc #4 une fois la page chargée : #BLOC_DEPLIER_NUM{4}.

Ancre et paramètres d’URL

Le but ici est de faciliter les dépliages/repliages de blocs par URL. Pour déplier plusieurs blocs, il faut lister leur identifiant séparés par une virgule. Voici la syntaxe à utiliser pour vos liens (NN, XX, YY et ZZ sont les identifiants numériques de vos blocs) :

  • Blocs numérotés : &deplier_num=NN ou &deplier_num=XX,YY,ZZ
  • Blocs simples : &deplier=NN ou &deplier=XX,YY,ZZ

Attention, les blocs non numérotés sont repérés à partir de zéro : 0 = 1er bloc, 1 = 2e bloc, etc. Ce chiffrage inclus tous les blocs de la page finale, y compris les blocs numérotés éventuels.

Les ancres#deplierNN et #deplier_numNN fonctionnent aussi, mais seuls les blocs numérotés ont un id pour l’instant et provoqueront un défilement de la page jusqu’au bloc voulu... Il est en effet plus prudent d’ancrer des blocs numérotés, histoire d’éviter toute erreur en cas de modification du contenu de la page.

Variable JS

Dès que la page est chargée, le plugin consulte deux variables JavaScript pour savoir qu’il faut ouvrir un bloc ou non. En fonction des besoins, cette variable peut donc être initialisée (avant l’appel des scripts du Couteau suisse) de cette façon :

  1. // déplier le 2e bloc non numéroté :
  2. var bloc_actif = 1;
  3. // déplier le bloc numéroté #2 :
  4. var bloc_actif_num = 2;

Télécharger

Si l’URL de la page comporte un paramètre sur les blocs (voir paragraphe précédent), alors ces variables (dans la catégorie concernée) seront ignorées.

Pagination à l’intérieur d’un bloc

Pour être sûr que le bloc contenant une pagination s’ouvre automatiquement au rechargement de la page, il vous faut d’abord numéroter vos blocs en utilisant pour le titre le même numéro que celui de la pagination.

Par exemple : #BLOC_TITRE{#ID_ARTICLE} pour un critère de pagination comme celui-ci : {pagination 5 #ID_ARTICLE}.
Vous pouvez aussi remplacer l’exemple #ID_ARTICLE par #COMPTEUR_BOUCLE, #_NomDeMaBoucle:COMPTEUR_BOUCLE, ou tout autre numéro.

Enfin, insérez simplement dans votre page le code Javascript suivant [1] :

  1. jQuery(document).ready(function() {
  2. if(blocs_pagination) {
  3. jQuery('div.cs_bloc' + blocs_pagination
  4. + ' .blocs_titre').eq(0).click();
  5. window.location.hash = '#pagination' + blocs_pagination;
  6. }
  7. });

Télécharger

La variable blocs_pagination est automatiquement calculée par le plugin. Elle représente le numéro de la pagination appelée (ce numéro est présent dans l’ancre de l’URL).
Exemple : "11" si l’url contient l’ancre "#pagination11".

Impression

Dans votre navigateur, ajouter à l’adresse d’une page le paramètre « cs=print » force le Couteau Suisse à déplier les blocs en vue d’une impression. Par exemple : www.monsite.ici/spip?article999&cs=print
Aussi, ce paramétrage est automatique dans les squelettes suivants : "print.html", "imprimer.html", "imprimir_articulo.html", "imprimir_breve.html" ou "article_pdf.html" (donc ici : "page=print", "page=imprimer", etc.). Lisez ici le paragraphe "Particularités" pour en savoir davantage.Sommaire

Autre méthode (astuce de Commetou) : Javascript. « Si on veut faire un bouton imprimer (sans passer par une page intermédiaire) avec la commande onclick="window.print(); return false;" sur un lien, il faut modifier [2] la CSS d’impression avec le code div.cs_blocs div.blocs_invisible{display: block;} pour que les blocs soient ouverts. »

Zoom sur vos squelettes...

Les balises #BLOC_TITRE, #BLOC_RESUME, #BLOC_DEBUT et #BLOC_FIN ne font qu’envelopper vos blocs à l’aide de trois balises HTML : <div>, <h4> et <a>.

Allez, un exemple vaut mieux qu’un long discours. Voici comment le plugin transforme :

  1. #BLOC_TITRE Un dépliage simple sans résumé
  2. #BLOC_DEBUT COUCOU !!
  3. #BLOC_FIN
  4.  
  5. #BLOC_TITRE Un dépliage simple avec résumé
  6. #BLOC_RESUME Un résumé...
  7. #BLOC_DEBUT COUCOU !!
  8. #BLOC_FIN

Télécharger

en :

  1. <div class="cs_blocs"><h4 class="blocs_titre blocs_replie "><a href="javascript:;"> Un dépliage simple sans résumé
  2. </a></h4><div class="blocs_invisible blocs_destination"> COUCOU !!
  3. </div></div>
  4.  
  5. <div class="cs_blocs"><h4 class="blocs_titre blocs_replie "><a href="javascript:;"> Un dépliage simple avec résumé
  6. </a></h4><div class="blocs_resume"> Un résumé...
  7. </div><div class="blocs_invisible blocs_destination"> COUCOU !!
  8. </div></div>

Télécharger

Notez que les retours à la ligne sont respectés.

Donc, attention à votre syntaxe HTML !

Il faut veiller à ce que les blocs entre les différentes balises #BLOC (#BLOC_TITRE et #BLOC_DEBUT, puis entre #BLOC_DEBUT et #BLOC_FIN par exemple) soient corrects dans leur syntaxe HTML : pas de balise ouverte non fermée ou fermée et non ouverte.
-  Exemple incorrect : <b>#BLOC_TITRE[(#DATE|annee)]</b>
-  Exemple correct : #BLOC_TITRE<b>[(#DATE|annee)]</b>

Étant donné que le plugin place entre <h4><a> et </a></h4> tout ce qui se trouve entre #BLOC_TITRE et #BLOC_DEBUT, n’y placez pas des liens ou des balises block (<hX>, <p> ou <div>). Les balises inline (comme <span>) en revanche sont permises. En cas de doute référez-vous à la syntaxe HTML des balises imbriquées.
-  Exemple incorrect : #BLOC_TITRE{#ID_RUBRIQUE}<a href="#URL_RUBRIQUE">#TITRE</a>#BLOC_DEBUT
-  Exemple correct : #BLOC_TITRE{#ID_RUBRIQUE}#TITRE#BLOC_DEBUT

De même, au sein de vos articles, ne mettez pas de liens dans le titre du bloc, et surtout par d’intertitre non plus.

Voici un exemple de tri des articles par date, utilisant les listes <ul><li> :

  1. <B1><ul>
  2. <BOUCLE1(ARTICLES){par date}{inverse}{fusion YEAR(date)}>
  3. <li>#BLOC_TITRE<b class="texte">[(#DATE|annee)]</b>
  4. <B2>
  5. #BLOC_DEBUT<ul>
  6. <BOUCLE2(ARTICLES){annee_relatif}{par date}{inverse}{lang_select=non}{fusion MONTH(date)}>
  7. <li>#BLOC_TITRE<small>[(#DATE|nom_mois)]</small>
  8. <B3>
  9. #BLOC_DEBUT<ul>
  10. <BOUCLE3(ARTICLES){mois_relatif}{par date}{inverse}>
  11.  
  12. <li><small><a href="#URL_ARTICLE">#TITRE</a></small></li>
  13. </BOUCLE3>
  14. </ul>#BLOC_FIN
  15. </B3>
  16. </BOUCLE2>
  17. </ul>#BLOC_FIN
  18. </B2></li>
  19. </BOUCLE1></ul>
  20. </B1>

Télécharger

Voici un exemple listant les brèves dans un bloc avec une pagination :

  1. <B_breves><ul><li>
  2. #BLOC_TITRE
  3. Les Br&egrave;ves du site !
  4. #BLOC_DEBUT
  5. #ANCRE_PAGINATION
  6. [<p class="pagination">(#PAGINATION)</p>]
  7. <ul>
  8. <BOUCLE_breves(BREVES){tous}{par date}{inverse}{pagination 5}>
  9. <li>
  10. <divclass="titredebreve">#TITRE ([(#DATE|affdate_court)])</div>
  11. [<div class="textedebreve">(#TEXTE)</div>]
  12. </li>
  13. </BOUCLE_breves>
  14. </ul>
  15. [<p class="pagination">(#PAGINATION)</p>]
  16. #BLOC_FIN</li></ul>
  17. </B_breves>

Télécharger

Voici un exemple de blocs imbriqués [3] :

  1. <B_rubriques>
  2. <ul>
  3. <BOUCLE_rubriques(RUBRIQUES) {id_parent} {par titre}>
  4. <li>
  5. #BLOC_TITRE{#ID_RUBRIQUE}
  6. [(#TITRE|supprimer_numero)]
  7. #BLOC_DEBUT
  8. <B_articles2>
  9. <ul>
  10. <BOUCLE_articles2(ARTICLES) {id_rubrique} {par titre}>
  11. [<li><a href="#URL_ARTICLE">(#TITRE|supprimer_numero)</a></li>]
  12. </BOUCLE_articles2>
  13. </ul>
  14. </B_articles2>
  15. <BOUCLE_sous_rubriques(BOUCLE_rubriques)>
  16. </BOUCLE_sous_rubriques>
  17. #BLOC_FIN
  18. </li>
  19. </BOUCLE_rubriques>
  20. </ul>
  21. </B_rubriques>

Télécharger

Lien cliquable permettant de replier le bloc par l’intérieur

Par défaut, le plugin possède une fonction jQuery qui prendra automatiquement en compte un "lien de repliage" placé dans un bloc déplié, c’est à dire : entre les balises #BLOC_DEBUT et #BLOC_FIN. Ce lien doit être affublé de la classe replier_bloc. Exemple :

  1. #BLOC_TITRE #TITRE
  2. #BLOC_DEBUT #TEXTE
  3. <a href="javascript:;" class="replier_bloc">[Replier l'article]</a>
  4. #BLOC_FIN

Télécharger

Utilisation de la Balise #INTRODUCTION

Cet outil du Couteau Suisse vous permet de paramétrer la balise SPIP #INTRODUCTION et la doter par exemple de points de suite cliquables. Si par hasard vous désirez que ces points de suite produisent l’ouverture du bloc, alors voici comment faire.

Si les points de suite cliquables sont bien activés et que, dans votre squelette, votre bloc dépliable ressemble à :

  1. <BOUCLE_art(ARTICLES)>
  2. #BLOC_TITRE #TITRE
  3. #BLOC_RESUME #INTRODUCTION
  4. #BLOC_DEBUT #TEXTE
  5. #BLOC_FIN
  6. </BOUCLE_art>

Télécharger

... alors le code code JavaScript à insérer dans la page, ou dans le header de votre squelette APRÈS les appels du Couteau Suisse est :

  1. jQuery(document).ready(function(){
  2. jQuery('.blocs_resume a.pts_suite')
  3. .click( function(){
  4. jQuery(this).parents('.cs_blocs:first').children('.blocs_titre')
  5. .blocs_replie_tout().blocs_toggle();
  6. // annulation du clic
  7. return false;
  8. });
  9. });

Télécharger

Déplier un bloc éloigné de son titre

Depuis la version 1.8.10.11 du Couteau Suisse, il est possible de déplier un bloc à distance. Le titre cliquable du bloc et son contenu peuvent être éloigné dans la page et placés où vous voulez de façon totalement indépendante, à conditions :
-  d’ouvrir et fermer vos blocs grâce aux couples de balises #BLOC_TITRE_DEBUT/#BLOC_TITRE_FIN (enfermant le futur bouton de dépliage/repliage du bloc) et #BLOC_DEBUT/#BLOC_FIN (enfermant le contenu dépliable/repliable du bouton associé)
-  de choisir un identifiant unique à préciser obligatoirement aux balises #BLOC_TITRE_DEBUT{identifiant_unique} et #BLOC_DEBUT{identifiant_unique} qui permet d’associer le bouton de dépliage/repliage (titre cliquable) à son contenu. Cet identifiant doit être le premier argument de la balise.

Un deuxième argument ’visible’ ou ’invisible’ est autorisé. Il permet de choisir l’état du bloc au démarrage de la page.

Par exemple :

  1. #BLOC_TITRE_DEBUT{toto}
  2. Bouton pour un bloc éloigné invisible
  3. #BLOC_TITRE_FIN
  4. <p>Allez, un peu de texte, histoire de mettre de la distance... Voyez que le bouton du bloc 'toto' est construit avant son contenu replié que voici :</p>
  5. #BLOC_DEBUT{toto}
  6. UN COUCOU ELOIGNE !!
  7. #BLOC_FIN
  8.  
  9. #BLOC_DEBUT{titi,visible}
  10. UN COUCOU ELOIGNE !!
  11. #BLOC_FIN
  12. <p>Allez, un peu de texte, histoire de mettre de la distance... Voyez que le contenu déplié du bloc 'titi' est constuit avant son titre cliquable que voici :</p>
  13. #BLOC_TITRE_DEBUT{titi,visible}
  14. Bouton pour un bloc éloigné visible
  15. #BLOC_TITRE_FIN

Télécharger

Attention toutefois à ne pas oublier de changer d’identifiant à chaque tour si vous placez un bloc dépliable à distance à l’intérieur d’une boucle. Si votre identifiant est fixe, alors tous les blocs produits par la boucle s’ouvriraient et se fermeraient ensemble... La balise #COMPTEUR_BOUCLE est ici indispensable :

  1. <B1><ul>
  2. <BOUCLE1(ARTICLES)>
  3. <li>
  4. #BLOC_TITRE_DEBUT{toto#COMPTEUR_BOUCLE}
  5. #COMPTEUR_BOUCLE. #TITRE
  6. #BLOC_TITRE_FIN
  7. blablabla
  8. #BLOC_DEBUT{toto#COMPTEUR_BOUCLE}
  9. #INTRODUCTION
  10. #BLOC_FIN
  11. </li>
  12. </BOUCL1></ul>
  13. </B1>

Télécharger

Court-circuiter les réglages généraux

Dans une page particulière, pour ignorer le paramétrage général "Un seul bloc ouvert sur la page" [4], placez dans votre page la balise #BLOC_UNIQUE avec l’argument qui correspond à cette page.
-  Syntaxe pour n’avoir qu’un seul bloc ouvert à la fois sur la page : #BLOC_UNIQUE, #BLOC_UNIQUE{oui}, #BLOC_UNIQUE{1}
-  Syntaxe pour permettre au visiteur d’ouvrir plusieurs blocs à la fois sur la page (réglage général par défaut) : #BLOC_UNIQUE{non}, #BLOC_UNIQUE{0}, #BLOC_UNIQUE{-1}

Bien entendu, si vous placez dans la même page la balise #BLOC_UNIQUE{oui} et plusieurs balises valides #BLOC_DEPLIER (ou #BLOC_DEPLIER_NUM), seule la dernière de ces dernières sera prise en compte !

Ouvrir un bloc contenant un formulaire

Si vous décidez de mettre un formulaire SVT dans un bloc, alors il sera nécessaire d’ouvrir le bloc au chargement de la page au cas où le formulaire renvoie une erreur de saisie.

Voici une petite commande JS qui veillera à ouvrir automatiquement un bloc contenant une erreur :

  1. jQuery(document).ready(function() {
  2. jQuery('.cs_blocs').has('.erreur_message')
  3. .find('.blocs_titre.blocs_replie').blocs_toggle();
  4. });

Télécharger

Voir en ligne : http://plugins.spip.net/blocsdepliables

Notes

[1dans le corps de votre page ou dans le header APRÈS les appels du Couteau Suisse

[2NDLR : en la surchargeant dans votre squelette

[3Utile pour le plan d’un site par exemple

[4paramètre que vous pourrez trouver sur la page d’administration du Couteau Suisse après avoir sélectionné l’outil « Blocs Dépliables »

Dernière modification de cette page le 10 novembre 2016

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 31 mars à 12:11, par Raminagrobis En réponse à : Des blocs dépliables

    Bonjour,

    J’utilise des blocs dépliables dans un menu escamotable à droite de ma page. Les titres dépliables sont les rubriques et en cliquant dessus on déploie les noms des articles de la rubrique. Quand je choisis un article, j’y arrive et le menu se referme. Quand je retourne au menu, le bloc s’est replié malgré le fait d’avoir coché « Mémoriser l’état des blocs ». C’est assez troublant d’un point de vue ergonomique. Y aurait-il moyen d’éviter cela ?

    Répondre à ce message

  • Le 26 mars à 18:32, par amilcar En réponse à : Des blocs dépliables

    Pour info après changement des bornes

    compatibilite=« [3.0.0 ;3.2.*] »

    RAS

    • Le 26 mars à 18:59, par Maïeul En réponse à : Des blocs dépliables

      tu parles du plugins couteau suisse en générale, ou juste de la fonction « des blocs dépliables » ?

    Répondre à ce message

  • Le 7 mars à 12:09, par Raminagrobis En réponse à : Des blocs dépliables

    Bonjour,

    J’utilise avec bonheur ce plugin sur divers sites et cela me rend de grands services, merci. Cette fois, cela se complique un peu :

    Sur mes pages (qui contiennent beaucoup d’images) j’utilise un « lazy load » pour charger les images au fur et à mesure du scroll de la page. J’ai aussi de petites images contenues dans des blocs fermés mais elles ne sont pas chargées quand on scrolle. Quand on ouvre le bloc on ne les voit donc pas, mais il suffit de faire un léger scroll pour qu’elles apparaissent.

    J’ai donc pensé que le plus simple serait d’associer un window.scrollBy au click d’ouverture du bloc pour faire défiler la page d’un pixel. Mais il s’agit d’un petit script qui fonctionne en html et je ne vois pas d’élément html à surcharger dans ce plugin... Et en javascript ou en php je ne sais pas faire. Quelqu’un a-t-il une idée ? Peut-être que c’est tout bête !

    Merci d’avance

    • Le 7 mars à 13:33, par Patrice Vanneufville En réponse à : Des blocs dépliables

      Bonjour,

      Il existe une fonction surchargeable qui permet de personnaliser les clics, regarde au tout début du code du fichier blocs.js.

      Ce pourrait être un code javascript du genre à ajouter à ta page :

      1. // ma fonction personnalisée :
      2. jQuery.fn.blocs_toggle_slide = function( selector ) {
      3. // ici mon code après le clic...
      4. // maintenant le [dé|re]pliage du bloc :
      5. return this.is(".blocs_slide")
      6. ?this.slideUp(blocs_slide)
      7. :this.slideDown(blocs_slide);
      8. };

      Télécharger

    • Le 7 mars à 14:37, par Raminagrobis En réponse à : Des blocs dépliables

      Merci pour cette rapide réponse.

      Je comprends bien l’idée, mais ne connaissant pas la syntaxe de JS, je ne sais pas la réaliser (j’ai bien collé ce code à l’endroit indiqué mais cela ne produit rien).

      La fonction à utiliser est :

      <script>
      function scrollWin() {
         window.scrollBy(0, 5);
      }
      </script>

      et l’action :

      onclick="scrollWin()"

      Source

    • Le 7 mars à 23:03, par Raminagrobis En réponse à : Des blocs dépliables

      C’est facile JavaScript, il suffit d’y aller à tâtons ;-)
      Ça marche avec juste window.scrollBy(0, 1);. Le défilement d’un pixel produit bien l’effet attendu.

    • Le 8 mars à 00:07, par Patrice Vanneufville En réponse à : Des blocs dépliables

      Je ne sais pas si ce code peut fonctionner. Le code serait plutôt dans le squelette de ta page :

      1. <script type="text/javascript">
      2. // ma fonction personnalisée :
      3. jQuery.fn.blocs_toggle_slide = function(selector) {
      4. // ici mon code après le clic...
      5. window.scrollBy(0, 5); // à vérifier ??
      6. // maintenant le [dé|re]pliage du bloc :
      7. return this.is(".blocs_slide")
      8. ?this.slideUp(blocs_slide)
      9. :this.slideDown(blocs_slide);
      10. };
      11. </script>

      Télécharger

    • Le 8 mars à 11:31, par Raminagrobis En réponse à : Des blocs dépliables

      C’est exactement ce que j’ai fait (mais mon explication ci-dessus était un peu sommaire).

      Sauf que je l’ai fait en surchargeant une copie de blocs.js (squelettes/js/blocs.js). Cela fonctionne très bien : comme dit plus haut, le défilement de la valeur d’un seul pixel suffit à provoquer le chargement de l’image.

      Mais je retiens ta proposition qui pourrait être utile si je ne veux cette fonction que pour certaines pages et non pour le site en entier.

      Merci pour la peine.

    Répondre à ce message

  • Le 19 octobre 2015 à 15:47, par ygornet En réponse à : Des blocs dépliables

    Salut

    Je rencontre une difficulté entre les blocs dépliables et les fonctions de compression des scripts et des css (fonctions avancées) sur un site v.3.0.20 et plugins à jour.
    Clairement lorsque j’active la compression des scripts et/ou des css, les blocs dépliables ne fonctionnent plus.
    Suis-je le seul dans ce cas là, ou bien est-ce que d’autres ont déjà constaté ce curieux fonctionnement ?
    Connaissez-vous une solution ?

    • Le 26 octobre 2015 à 13:54, par Patrice Vanneufville En réponse à : Des blocs dépliables

      Ce problème est souvent évoqué dans les forums, la compression n’est en effet pas très fiable...
      Ce n’est pas absolument indispensable a priori car les serveurs transmettent aux clients les pages en format déjà compressé...

    • Le 7 mars à 14:30, par 1138 En réponse à : Des blocs dépliables

      La compression a aussi comme bénéfice de concaténer tous les scripts en un seul fichier, ce qui économise des requêtes.

      Je ne sais pas si le souci se pose encore avec ce plugin mais j’avais trouvé une astuce pour empêcher la compression d’un script (marche peut-être aussi avec les CSS) : il suffit de rajouter un id quelconque à l’appel. Ainsi, la ligne 19 de blocsdepliables_pipelines.php passe de

      1. $flux .= "<script type='text/javascript' src='".timestamp(find_in_path('js/blocs.js'))."'></script>";

      à

      1. $flux .= "<script type='text/javascript' id='ne_pas_compresser_bloc' src='".timestamp(find_in_path('js/blocs.js'))."'></script>";

      Si le problème existe encore, ça peut valoir la peine de commiter cela.

    Répondre à ce message

  • Le 6 janvier à 18:15, par Jean Christophe Villeneuve En réponse à : Des blocs dépliables

    Bonjour

    Je voudrais faire des blocs imbriqués dans le texte de l’article avec ce code :

    <bloc>Bloc de premier niveau

    <bloc>Bloc de deuxième niveau

    Placez votre texte ici
    </bloc>

    </bloc>

    Mais ça ne fonctionne pas car le bloc de premier niveau est fermé par le </bloc>du bloc de deuxième niveau.

    Normal. Mais est-ce possible de faire fonctionner ça ?

    • Le 6 janvier à 18:18, par Pat En réponse à : Des blocs dépliables

      Eh oui c’est possible ! Regarde la doc ci-dessus, avec les blocs numérotés...

    • Le 6 janvier à 18:42, par Jean Christophe Villeneuve En réponse à : Des blocs dépliables

      Bon sang que c’est beau quand c’est simple !

      J’avais mal compris la notion de « numéroté », je voyais ça comme des listes numérotées et j’ai lu en diagonale. Et je suis donc passé à côté.

      Merci pour l’info et pour cet excellent plugin.

    Répondre à ce message

  • Le 15 octobre 2016 à 15:46, par Pi r En réponse à : Des blocs dépliables

    Bonjour Patrice, j’essaie sans résultat de faire fonctionner les blocs sur une page chargée via un lien ajax preload, j’ai fais

    /* <![CDATA[ */
    cQuery(this).blocs_init() ;
       /* ]]> */

    vois tu une solution ? merci

    • Le 17 octobre 2016 à 03:02, par Pi r En réponse à : Des blocs dépliables

      n’importe quoi, c’était les blocs de saisie qui ne se dépliait pas, j’ai ajouté

      saisies_fieldset_pliable();
              onAjaxLoad(saisies_fieldset_pliable);

      et ça fonctionne ;)

    • Le 18 octobre 2016 à 23:21, par pat En réponse à : Des blocs dépliables

      De plus cQuery, c’est les crayons, non ?
      Voici un exemple d’utilisation qui devrait fonctionner :

      1. ;(function($){
      2. $(window).load(function(){
      3. function saisies_fieldset_pliable(){
      4. // bla bla bla
      5. }
      6. saisies_fieldset_pliable();
      7. onAjaxLoad(saisies_fieldset_pliable);
      8. });
      9. })(jQuery);

      Télécharger

      ou peut-être aussi sous cette forme :

      1. var init_f = function() {
      2. // bla bla bla
      3. }
      4. if(typeof onAjaxLoad == "function") onAjaxLoad(init_f);
      5. if (window.jQuery) jQuery(document).ready(init_f);

      Télécharger

    Répondre à ce message

  • Le 21 mai 2016 à 09:54, par Manu En réponse à : Des blocs dépliables

    Bonjour,
    je tombe sur un os que je n’arrive pas à résoudre.
    J’ai surchargé blocs.css.html en en créant un dans squelettes/outils.
    Très bien, sauf que...
    Pour une raison que j’ignore, le CS met les déclarations de styles ainsi générées dans local/couteau-suisse/header.css. Du coup, les chemins pour des images de background ne sont plus bons puisqu’il s’agit de chemins relatifs

    Ce qu’il y a d’étrange, c’est que sur mon serveur local de développement, il n’y a pas de création du fichier local/couteau-suisse/header.css : les déclarations css sont directement intégrées dans le head (et du coup c’est OK)

    Il y a un truc qui m’échappe : pourquoi cette différence de comportement ?

    Répondre à ce message

  • Le 9 octobre 2015 à 06:10, par Manu En réponse à : Des blocs dépliables

    Bonjour Patrice,
    Les blocs dépliables font partie depuis longtemps de mes incontournables.

    Je rencontre une difficulté avec l’utilisation de cette lame avec le plugin « manuel de rédaction du site ». Les blocs dépliables dans l’article utilisé par le manuel ne fonctionnent plus (les blocs ne se déplient plus). Une idée du pourquoi ?
    SPIP 3.0.20 + CS dernière version
    PS : Merci encore pour ce couteau qui rend si service.

    • Le 19 octobre 2015 à 16:49, par Manu En réponse à : Des blocs dépliables

      Un petit up ! Pas de solution pour « débloquer les blocs » ?

    • Le 26 octobre 2015 à 13:52, par Patrice Vanneufville En réponse à : Des blocs dépliables

      Bonjour.
      C’est un peu difficile de répondre à ta question, je ne connais pas ce plugin « manuel de rédaction du site ».
      Il doit y avoir un conflit, une erreur JS induite par cette cohabitation. Peut-être faut-il commencer par chercher cette erreur grâce aux outils de développement des navigateurs ?

    • Le 26 octobre 2015 à 17:11, par Manu En réponse à : Des blocs dépliables

      Oui, bien sûr, j’avais bien commencé par cela. Pas d’erreur (des warnings en pagailles, mais pas d’erreur).
      En PJ, un fichier image pour aider (peut-être, enfin, j’espère !!!), à comprendre ce qu’il se passe :

      Pour info, le plugin blocs dépliables fonctionne bien en utilisant la syntaxe du CS mais j’aimerais vraiment garder le CS, ne serait-ce pour une histoire de certitude dans la compatibilité (il y a plus de 2000 articles sur le site et un bon paquet utilisent la lame blocs dépliables : je veux être certain de leur bon fonctionnement alors je ne souhaite pas changer d’outil !)

      PS : Je peux te donner un accès privé si tu veux voir

    • Le 26 octobre 2015 à 21:15, par Patrice Vanneufville En réponse à : Des blocs dépliables

      Donc, a priori, le problème est réglé en changeant un peu la configuration de la lame.

      L’option « Balise pour les titres » doit être changée et portée par exemple à : h5.

      Du coup, plus de conflit. Je confirme que le plugin « manuel de rédaction du site » refonde tous les paragraphes situés après un titre et empêche les blocs de fonctionner lorsqu’ils sont en h4, tout comme les titres de SPIP.

      Cette option avait été prévue justement pour résoudre certains éventuels conflits avec des plugins ou des squelettes. Bien sûr on peut mettre h5, mais aussi div.

    • Le 26 octobre 2015 à 21:50, par Manu En réponse à : Des blocs dépliables

      Comme d’habitude, ta réponse est aussi limpide que rapide !
      Un énorme merci !
      Long life to the Swiss Army Knife (and his developper ! ;-))

    Répondre à ce message

  • Le 25 juillet 2015 à 08:44, par Antoine En réponse à : Des blocs dépliables

    Bonjour,
    Comment faire pour que le bloc se déplie au survol du titre et non au clic ?
    Merci

    • Le 14 août 2015 à 11:16, par Manu En réponse à : Des blocs dépliables

      Bonjour,
      +1 ! Ça m’intéresserait aussi cette possibilité de déplier un bloc au survol. As-tu trouvé une solution depuis le post précédent du 25 juillet ?

    Répondre à ce message

  • Le 26 septembre 2013 à 06:06, par Renée Picard En réponse à : Des blocs dépliables

    J’ai mis un formulaire

    dans un bloc dépliable. Comment faire pour qu’il reste déplié lorsqu’il y a des erreurs dans la saisie du formulaire ? Le formulaire a été fabriqué avec le plugin formidable.

    • Le 26 septembre 2013 à 12:33, par Patrice Vanneufville En réponse à : Des blocs dépliables

      Il me semble qu’un commande jQuery devrait faire l’affaire : la détection d’une classe d’erreur incluse dans un bloc pourrait provoquer l’ouverture de celui-ci.

    • Le 27 septembre 2013 à 02:28, par Patrice Vanneufville En réponse à : Des blocs dépliables

      Bonjour,
      L’idée serait de déplier le bloc si une classe erreur est trouvée à l’intérieur...
      Est-ce que le code JS suivant fonctionne ?
      Pat

      1. jQuery(document).ready(function() {
      2. jQuery('.cs_blocs').has('.erreur_message')
      3. .find('.blocs_titre.blocs_replie').blocs_toggle();
      4. });

      Télécharger

    • Le 28 septembre 2013 à 01:24, par Renée Picard En réponse à : Des blocs dépliables

      Résolu ! C’est parfait. Merci

    • Le 28 septembre 2013 à 01:32, par Patrice Vanneufville En réponse à : Des blocs dépliables

      Merci du retour, je viens d’ajouter ce cas de figure à la doc ci-dessus ;-)

    • Le 17 décembre 2014 à 16:17, par Christian Julia En réponse à : Des blocs dépliables

      Bonjour,

      J’ai également ce problème. J’ai mis le bout de code dans le fichier blocs.js mais cela ne donne rien. Ce n’est peut-être pas la bonne place.

      Par ailleurs, le même problème se pose à l’inverse pour le message qui indique que tout s’est bien passé et que la réponse a été enregistrée. Le blocs se replie. Y a-t-il aussi un bout de code à ajouter (où ?) pour que le bloc reste ouvert pour que la personne qui a saisi le formulaire voie que tout s’est bien passé.

      Merci de votre aide. Cordialement.

    • Le 19 décembre 2014 à 08:31, par Christian Julia En réponse à : Des blocs dépliables

      Bonjour,

      Précision par rapport à mon précédent message : je suis en version 2.1.26. Le bloc ne reste pas déplié après validation du formulaire (forms et tables) même si je mets le bout de code proposé dans le squelette concerné (article.html).

      Merci de votre aide.

    • Le 19 décembre 2014 à 09:47, par Christian Julia En réponse à : Des blocs dépliables

      Bonjour,

      Je continue ma recherche dans une grande solitude. J’ai résolu une partie du problème : le code proposé pour laisser le bloc déplié en cas d’erreur de saisie du formulaire semble fonctionner avec Formidable mais pas avec Forms et Tables. C’est déjà ça de reglé ! En revanche, je ne parviens pas à laisser le bloc déplié pour que reste apparent le message OK en vert en cas de validation. J’ai essayé avec la classe .reponse_formulaire_ok mais cela ne donne rien.

      Merci de votre aide.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Cycle2

    7 août 2014 – 104 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)

  • CleverMail

    20 janvier 2010 – 635 commentaires

    CleverMail est un plugin permettant d’envoyer des lettres d’informations à des abonnés depuis SPIP. Issu au départ d’un développement libre complètement indépendant de SPIP, il a connu une première version pour SPIP 1.9 avant d’être complètement réécris (...)

  • SPMC : Squelette par mot clé V2.0

    21 septembre 2009 – 48 commentaires

    Ce plugin prend la suite de squelette par mot clef V1.92 qui ne fonctionnait plus sous SPIP 2.0.x. Avec l’accord de Mortimer qui n’a plus le temps de le maintenir, je prend donc la suite. Présentation du plugin « Squelette par mot clé V2.0 » Le (...)

  • Sarka-SPIP 3

    15 septembre 2009 – 211 commentaires

    Si la lignée 3 de Sarka-SPIP a été l’occasion de refaire presque entièrement le code du squelette elle continue à évoluer et à s’améliorer au fil des versions. Nous ne saurions trop conseiller aux nouveaux utilisateurs - et aussi aux anciens - (...)

  • Paiement avec Formidable

    16 février 2015 – 53 commentaires

    Ce plugin « Paiement avec Formidable » permet d’ajouter une étape de paiement à la fin de la saisie d’un formulaire créé par le plugin Formidable. Il le complète et nécessite par ailleurs le plugin bank qui gère l’interface technique avec les prestataires (...)