- Présentation
- Dans les contenus SPIP
- Dans les squelettes
- Installation
- Personnalisation des blocs
- Blocs numérotés
- Balise <h4>
- L’attribut title du titre
- Déplier un bloc au chargement de la page
- Zoom sur vos squelettes...
- Attention à la syntaxe HTML !
- Exemple de tri des articles par date
- Exemple listant les brèves avec pagination
- Exemple de blocs imbriqués
- Replier le bloc de l’intérieur
- Utilisation de la balise #INTRODUCTION
- Déplier un bloc éloigné de son titre
- Court-circuiter les réglages généraux
- Accès direct au forum
Présentation
Cet outil du Couteau Suisse 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 (fichiers .html). Ils sont facilement configurables et imbricables.
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 :
- <bloc>
- Un titre qui deviendra cliquable
- Le texte, initialement caché, à montrer/cacher, après deux sauts de ligne...
- </bloc>
- <visible>
- Un titre qui deviendra cliquable
- Le texte, initialement affiché, à cacher/montrer, après deux sauts de ligne...
- </visible>
• 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 :
- <bloc>
- Le titre
- <resume>Un résumé</resume>
- Le contenu du bloc plus développé
- </bloc>
Dans les squelettes
Vous avez à votre disposition les nouvelles balises #BLOC_TITRE, #BLOC_RESUME, #BLOC_DEBUT et #BLOC_FIN à utiliser comme ceci :
- #BLOC_TITRE
- Mon titre
- #BLOC_RESUME
- Le résumé de la suite
- #BLOC_DEBUT
- Mon bloc dépliable
- #BLOC_FIN
• 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 :
- [(#BLOC_TITRE{[(#URL_PAGE{monajax}|parametre_url{id_article,1}|parametre_url{var_mode,#ENV{var_mode}})]})]
- My qualifications
- #BLOC_DEBUT
- Wait please...
- #BLOC_FIN
• 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}
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....
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 :
Si l’on veut en modifier l’apparence, il suffit donc de déclarer un style perso comme ceci :
- div.cs_blocs>div {
- border:solid 2px;
- }
- h4.blocs_titre, h4.blocs_replie {
- background:transparent none;
- }
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; }
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 :
- <bloc#2>
- Un titre qui deviendra cliquable
- Le texte à cacher/montrer, après deux sauts de ligne...
- </bloc#2>
Ce bloc <bloc#2> est construit comme ceci :
Si l’on veut en modifier l’apparence, il suffit donc de déclarer un style perso comme ceci :
- div.cs_bloc2>div {
- border:solid 2px;
- }
- div.cs_bloc2 h4.blocs_titre, div.cs_bloc2 h4.blocs_replie {
- background:transparent none;
- }
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.
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 :
- <bloc>
- {{{Un intertitre à éviter !!}}}
- Ceci est une mauvaise syntaxe...</bloc>
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 :
- <bloc>
- {{Un titre en gras}}
- Le gras sur le titre est complètement inutile si vous avez défini ce style :
- h4.blocs_titre {
- font-weight:bold;
- }
- </bloc>
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.
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 :
- function blocs_title($titre='', $corps='', $num='') {
- $titre = couper($titre, 30);
- return array("Déplier le bloc «$titre»", "Replier le bloc «$titre»");
- }
Pour un bloc dans un squelette, il suffit d’ajouter la div.blocs_title décrite ci-dessus en clair :
- #BLOC_TITRE #TITRE
- #BLOC_RESUME #INTRODUCTION
- #BLOC_DEBUT #TEXTE
- <div class="blocs_title">Déplier mon bloc||Replier mon bloc</div>
- #BLOC_FIN
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.
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 :
- jQuery(document).ready(function() {
- jQuery('h4.blocs_titre').eq(0).click();
- });
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}.
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 :
- jQuery(document).ready(function() {
- jQuery('div.cs_bloc4')
- .children('.blocs_titre').eq(0).click();
- });
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}.
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=NNou&deplier_num=XX,YY,ZZ - Blocs simples :
&deplier=NNou&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.
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 :
- // déplier le 2e bloc non numéroté :
- var bloc_actif = 1;
- // déplier le bloc numéroté #2 :
- var bloc_actif_num = 2;
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] :
- jQuery(document).ready(function() {
- if(blocs_pagination) {
- jQuery('div.cs_bloc' + blocs_pagination
- + ' .blocs_titre').eq(0).click();
- window.location.hash = '#pagination' + blocs_pagination;
- }
- });
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".
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.
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 :
- #BLOC_TITRE Un dépliage simple sans résumé
- #BLOC_DEBUT COUCOU !!
- #BLOC_FIN
- #BLOC_TITRE Un dépliage simple avec résumé
- #BLOC_RESUME Un résumé...
- #BLOC_DEBUT COUCOU !!
- #BLOC_FIN
en :
- <div class="cs_blocs"><h4 class="blocs_titre blocs_replie "><a href="javascript:;"> Un dépliage simple sans résumé
- </a></h4><div class="blocs_invisible blocs_destination"> COUCOU !!
- </div></div>
- <div class="cs_blocs"><h4 class="blocs_titre blocs_replie "><a href="javascript:;"> Un dépliage simple avec résumé
- </a></h4><div class="blocs_resume"> Un résumé...
- </div><div class="blocs_invisible blocs_destination"> COUCOU !!
- </div></div>
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> :
- <B1><ul>
- <BOUCLE1(ARTICLES){par date}{inverse}{fusion YEAR(date)}>
- <li>#BLOC_TITRE<b class="texte">[(#DATE|annee)]</b>
- <B2>
- #BLOC_DEBUT<ul>
- <BOUCLE2(ARTICLES){annee_relatif}{par date}{inverse}{lang_select=non}{fusion MONTH(date)}>
- <li>#BLOC_TITRE<small>[(#DATE|nom_mois)]</small>
- <B3>
- #BLOC_DEBUT<ul>
- <BOUCLE3(ARTICLES){mois_relatif}{par date}{inverse}>
- <li><small><a href="#URL_ARTICLE">#TITRE</a></small></li>
- </BOUCLE3>
- </ul>#BLOC_FIN
- </B3>
- </BOUCLE2>
- </ul>#BLOC_FIN
- </B2></li>
- </BOUCLE1></ul>
- </B1>
Voici un exemple listant les brèves dans un bloc avec une pagination :
- <B_breves><ul><li>
- #BLOC_TITRE
- Les Brèves du site !
- #BLOC_DEBUT
- #ANCRE_PAGINATION
- [<p class="pagination">(#PAGINATION)</p>]
- <ul>
- <BOUCLE_breves(BREVES){tous}{par date}{inverse}{pagination 5}>
- <li>
- <divclass="titredebreve">#TITRE ([(#DATE|affdate_court)])</div>
- [<div class="textedebreve">(#TEXTE)</div>]
- </li>
- </BOUCLE_breves>
- </ul>
- [<p class="pagination">(#PAGINATION)</p>]
- #BLOC_FIN</li></ul>
- </B_breves>
Voici un exemple de blocs imbriqués [3] :
- <B_rubriques>
- <ul>
- <BOUCLE_rubriques(RUBRIQUES) {id_parent} {par titre}>
- <li>
- #BLOC_TITRE{#ID_RUBRIQUE}
- [(#TITRE|supprimer_numero)]
- #BLOC_DEBUT
- <B_articles2>
- <ul>
- <BOUCLE_articles2(ARTICLES) {id_rubrique} {par titre}>
- [<li><a href="#URL_ARTICLE">(#TITRE|supprimer_numero)</a></li>]
- </BOUCLE_articles2>
- </ul>
- </B_articles2>
- <BOUCLE_sous_rubriques(BOUCLE_rubriques)>
- </BOUCLE_sous_rubriques>
- #BLOC_FIN
- </li>
- </BOUCLE_rubriques>
- </ul>
- </B_rubriques>
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 :
- #BLOC_TITRE #TITRE
- #BLOC_DEBUT #TEXTE
- <a href="javascript:;" class="replier_bloc">[Replier l'article]</a>
- #BLOC_FIN
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 à :
- <BOUCLE_art(ARTICLES)>
- #BLOC_TITRE #TITRE
- #BLOC_RESUME #INTRODUCTION
- #BLOC_DEBUT #TEXTE
- #BLOC_FIN
- </BOUCLE_art>
... 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 :
- jQuery(document).ready(function(){
- jQuery('.blocs_resume a.pts_suite')
- .click( function(){
- jQuery(this).parents('.cs_blocs:first').children('.blocs_titre')
- .blocs_replie_tout().blocs_toggle();
- // annulation du clic
- return false;
- });
- });
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 :
- #BLOC_TITRE_DEBUT{toto}
- Bouton pour un bloc éloigné invisible
- #BLOC_TITRE_FIN
- <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>
- #BLOC_DEBUT{toto}
- UN COUCOU ELOIGNE !!
- #BLOC_FIN
- #BLOC_DEBUT{titi,visible}
- UN COUCOU ELOIGNE !!
- #BLOC_FIN
- <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>
- #BLOC_TITRE_DEBUT{titi,visible}
- Bouton pour un bloc éloigné visible
- #BLOC_TITRE_FIN
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 :
- <B1><ul>
- <BOUCLE1(ARTICLES)>
- <li>
- #BLOC_TITRE_DEBUT{toto#COMPTEUR_BOUCLE}
- #COMPTEUR_BOUCLE. #TITRE
- #BLOC_TITRE_FIN
- blablabla
- #BLOC_DEBUT{toto#COMPTEUR_BOUCLE}
- #INTRODUCTION
- #BLOC_FIN
- </li>
- </BOUCL1></ul>
- </B1>
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 !
RSS 2.0
Vos commentaires
# Le 14 mai à 16:27, par vanso
En réponse à : Des blocs dépliables
Bonjour,
Merci pour cette lame bien utile qui me sert pour de nombreux sites. Pour approfondir un peu, et puisque c’est fondé sur du javascript, que peut-on faire en terme d’accessibilité pour les gens qui désactivent le javascript dans leur navigateur ?
# Le 19 mai à 23:15, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Bonjour, il me semble que les blocs sont systématiquement ouverts pour ceux qui n’utilisent pas JS, tu as essayé peut-être ?
# Le 21 mai à 14:41, par vanso
En réponse à : Des blocs dépliables
Eh oui, j’ai testé mais le contenu reste figé, rien n’apparaît au clic, c’est là qu’est le hic !
# Le 22 mai à 11:39, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Oui, c’est le JS qui ouvre/ferme les blocs. Il faudrait vérifier que si le JS est inactif, alors tous les blocs sont ouverts au chargement de la page... Il me semble bien que ça se passe comme ça déjà, non ?
# Le 24 mai à 09:27, par vanso
En réponse à : Des blocs dépliables
Testé sur un autre ordinateur, et effectivement ça marche : JS désactivé, les blocs s’affichent dépliés. Désolé pour le bruit.
Répondre à ce message
# Le 17 mai à 14:29, par Ab
En réponse à : Des blocs dépliables
Bonjour,
Il y a surement la réponse, mais je n’arrive pas à l’identifier visuellement.
J’utilise spip 3 et eva web comme squelette.
Le squelette me permet d’implanter des CSS dans mes squelettes.
Mon niveau ne me permet guère d’aller plus , ce n’est pas faute d’essayer.
Qu’inclure comme code CSS pour que tous mes articles soient affichés en bloc dépliable sans reprendre article par article ?
Un grand merci,
Répondre à ce message
# Le 11 avril à 17:49, par ekind
En réponse à : Des blocs dépliables
Bonjour,
Sous spip 3 en privé les balises du couteau suisse fontionnent bien, ...mais pas en public, savez-vous comment faire pour avoir ces blocs dépliables fonctionnels sous spip3 partie publique ?
J’ai bien des erreurs JS aussi : (fichier http://www.monsite/local/cache-js/42359efa3fde43356ac3845b29ec954c.js.pagespeed.jm.42SGnBCBCy.js) - (erreur "Uncaught SyntaxError : Unexpected token ILLEGAL " ligne 1174)
Capture de l’erreur en détail si-jointe
« »
Merci par avance si vous savez de quoi il s’agit !!
# Le 12 avril à 02:12, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Bonsoir.
Impossible de t’aider l’image est coupée et le JS est compressé. Une erreur JS bloque les blocs, il faut trouver laquelle. Peut-être en désactivant les autres plugins ? Ou en désactivant la compression JS dans SPIP ?
# Le 12 avril à 09:44, par ekind
En réponse à : Des blocs dépliables
Bonjour, merci pour votre rapide réponse ! j’ai désactivé « jolis coins » du couteau suisse...et aussi toutes les compressions. Maintenant tout les autres outils fonctionnent y compris les blocs dépliables + onglets !
# Le 13 mai à 13:06, par Clo
En réponse à : Des blocs dépliables
Bonjour,
Je rencontre le même problème mais même en désactivant tous les autres plugins & toutes les autres fonctionnalités du couteau suisse cela ne fonctionne pas ...
D’avance merci !
# Le 13 mai à 13:34, par Clo
En réponse à : Des blocs dépliables
Quelques précisions : Version de Spip 3.0.8, couteau suisse en 1.8.133
Squelette perso
Niveau affichage, back office tout va bien, sur le site, le titre est cliquable, mais le bloc est déplié ...
# Le 13 mai à 15:15, par Patrice Vanneufville
En réponse à : Des blocs dépliables
même réponse, si le titre est déplié, c’est que le JS comporte une erreur bloquante, et il faut la trouver... Tu as peut-être un lien public ?
# Le 13 mai à 22:20, par Clo
En réponse à : Des blocs dépliables
Oui oui http://www3.aconit.org/spip/spip.php?page=expositions sur le deuxième bloc, on voit les titres mais les blocs sont dépliés...
Il est possible que l’erreur soit vraiment toute bête, c’est la première fois que j’utilise SPIP ...
Merci pour cette réponse très rapide en tout cas !
# Le 14 mai à 13:49, par Patrice Vanneufville
En réponse à : Des blocs dépliables
il semble que ton head ne comporte pas les appels indispensables à tous les CSS et JS. Je t’invite à regarder comment le squelette distribué par SPIP fonctionne afin de t’en inspirer pour faire fonctionner correctement l’ensemble des plugins. Les différentes balises « #INSERT_HEAD(_XX)? » manquent notamment.
Si tu désactives ton squelette en retrouvant le SPIP original, je pense que les blocs fonctionneront...
# Le 14 mai à 14:13, par Clo
En réponse à : Des blocs dépliables
J’ai juste inclus la balise sans essayer de désactiver le squelette ... Et ça marche ! Erreur toute bête c’était sur !
Merci beaucoup en tout cas !
Répondre à ce message
# Le 4 mai à 06:37, par Manu
En réponse à : Des blocs dépliables
Est-ce qu’il serait possible, en bidouillant cette lame, d’avoir un comportement similaire au menu « GPS » que l’on trouve sur le site du Groupe de Recherche et d’Action Pédagogiques et Educatives http://www.inattendu.org/grape ? Ce serait top !
# Le 5 mai à 15:45, par Manu
En réponse à : Des blocs dépliables
Je me réponds à moi-même... En poussant les investigations, je pense avoir trouvé les outils qu’il me faut... 45 beautiful jquery menu plugins et en particulier Beautiful slide out navigation... Inutile donc de toucher à ce brave couteau suisse (qui, soit dit en passant, est un compagnon bien sympathique)
# Le 5 mai à 22:12, par Merci
En réponse à : Des blocs dépliables
merci pour l’info ;-)
Répondre à ce message
# Le 27 avril à 20:43, par dut
En réponse à : Des blocs dépliables
Le comportement de la balise #iNTRODUCTION, avec ses points de suite cliquable, m’intéresse.
Malheureusement, elle ne fonctionne pas avec le type d’objet #DESCRIPTIF de la table EVENEMENTS
J’ai donc tenté d’utiliser un bloc dépliable en déportant le titre en pied de bloc et lui donnant l’intitulé « … ». dans l’espoir d’avoir à peu près le même comportement.
Mais dans ce cas,le résumé refuse de se cacher, créant un texte en double. je livre à tout hasard mon code.
#BLOC_TITRE{bloc#ID_EVENEMENT}#BLOC_RESUME{bloc#ID_EVENEMENT}
[(#DESCRIPTIF|couper{150}|propre)]
#BLOC_DEBUT{bloc#ID_EVENEMENT}
#DESCRIPTIF
#BLOC_FIN{bloc#ID_EVENEMENT}
#BLOC_TITRE_DEBUT{bloc#ID_EVENEMENT} …
#BLOC_TITRE_FIN{bloc#ID_EVENEMENT}
Répondre à ce message
# Le 16 février 2012 à 14:26, par dut
En réponse à : Des blocs dépliables
J’ai placé une image cartographique dans un bloc dépliable, de façon à n’afifcher la carte que lors d’un clic sur le titre.
J’ai un soucis avec les fond GoogleMap qui sont tronqués (voir copie), alors qu’avec Open Layer, l’image dépliable est complète. Quel paramètre changer pour corriger cela.
# Le 17 février 2012 à 01:58, par Pat
En réponse à : Des blocs dépliables
Bonjour, est-ce que par hasard le problème est le même avec un bloc dépliable, mais ouvert et non fermé au chargement de la page ? en fait, certaines commandes Javascript ne s’exécutent pas dans un bloc invisible...
# Le 17 juillet 2012 à 18:34, par Mosozi
En réponse à : Des blocs dépliables
bonjour,,
je rencontre presque le même problème :
spip 2.1.12
avec le plugin couteau suisse v 1.8.78
En fait, j’ai activé sa fonction de blocs dépliables, mais je remarque qu’il n’y a pas d’effet sur la page publique alos que dans l’espace privé tout va bien :
voila le résultat que j’ai sur la page publique : http://www.bi.refer.org/spip.php?rubrique27
pourquoi les blocs ne se replient pas ? je ne comprend pas
# Le 21 mars à 22:38, par Pierre KUHN
En réponse à : Des blocs dépliables
Bonsoir
Je ressort le problème avec spip 3, comment cela fut corriger en 2.1 ?
# Le 21 mars à 23:12, par Pat
En réponse à : Des blocs dépliables
Il faut voir si une erreur javascript sur la page ne bloque pas le fonctionnement normal
# Le 21 mars à 23:32, par Pierre KUHN
En réponse à : Des blocs dépliables
Vas essayez de trouver ça, mais rien de sur, tu connais mon niveau php.
# Le 21 mars à 23:46, par Pat
En réponse à : Des blocs dépliables
C’est grâce à la console de chrome ou firefox/firebug que tu pourras trouver des erreurs JS. t’as un lien public ?
# Le 21 mars à 23:54, par Pierre KUHN
En réponse à : Des blocs dépliables
regarde ici portage-rictus.pierre-kuhn.org/400
clique sur localiser et tu vas voir 2 cartes, une complète et une couper.
# Le 22 mars à 00:53, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Oui, c’est normal. Manipuler un objet dans un bloc fermé n’est pas toujours possible. Il faut laisser le bloc ouvert, permettre à la carte de se construire, puis seulement ensuite, fermer le bloc...
Regarde ici, c’est tout OK :
http://portage-rictus.pierre-kuhn.org/gypsy-lyon-festival.html?deplier=0
# Le 22 mars à 07:14, par Pierre KUHN
En réponse à : Des blocs dépliables
Donc il faut que je l’aisse le bloc ouvert au chargement de la page ? Comment faire sans variable dans l’url ?
# Le 22 mars à 07:21, par Pierre KUHN
En réponse à : Des blocs dépliables
Allez ça marche en déplier avant, je continu mes investigations.
Répondre à ce message
# Le 18 mars à 14:53, par zatoune
En réponse à : Des blocs dépliables
Bonjour,
Je cherche à pointer vers des blocs dépliables d’une page avec des urls comportant des ancres, chacune d’entre elles identifiant un bloc ; mon souci est de pouvoir arriver depuis l’extérieur sur le bloc directement déplié.
Si quelqu’un a déjà pratiqué de la sorte, via jQuery ou autre, je serais bien intéressé.
Merci d’avance
# Le 18 mars à 17:29, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Oui, je viens d’ajouter cette possibilité qui fonctionnait déjà pour les onglets...
Tu me diras si tout est OK après mise à jour ?
Voir : http://zone.spip.org/trac/spip-zone/changeset/70877
# Le 18 mars à 21:02, par zatoune
En réponse à : Des blocs dépliables
ok super, je vais me pencher là-dessus.
Merci encore.
Je te tiens au courant pour la suite
Répondre à ce message
# Le 19 février à 14:49, par vbeffara
En réponse à : Des blocs dépliables
Bonjour,
Il y a un problème d’interaction entre listes et blocs dépliables. Avec le #TEXTE suivant la plupart des liens administratifs de la page d’un article dans l’espace privé sont désactivés (cachés sous un DIV, j’imagine) :
-* Ceci est un item de liste.
<bloc>Ceci est un bloc.
Texte du bloc.
</bloc>
Si on rajoute un saut de ligne avant <bloc>, SPIP considère que la liste est terminée et n’a plus de problème. On peut encore naviguer au clavier avec TAB, c’est juste un problème de masquage à l’écran je crois, mais c’est un peu embêtant ...
PS : SPIP 3.0.5, couteau suisse 1.8.106
Répondre à ce message
# Le 22 janvier à 12:53, par bb
En réponse à : Des blocs dépliables
Bonjour, j’ai un soucis d’affichage de diaporama avec les blocs dépliables.
J’utilise le plugin Spip jQuery Cycle (à jour). Lorsque j’insère le code du diapo dans la partie cachée du bloc, il n’apparait pas mais il est visible dans l’article hors du bloc.
En regardant mon code avec firebug le diapo fonctionne mais il n’est pas visible ?!
Y aurait-il incompatibilité ?
# Le 22 janvier à 14:51, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Salut, tu as peut-être un lien public à montrer ? Merci ;)
# Le 23 janvier à 11:22, par bb
En réponse à : Des blocs dépliables
Oui, bien sur :
LIEN
J’ai oublié de dire que le site est sous spip 2.1.
Merci.
# Le 23 janvier à 13:09, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Tu as fais un essai avec un bloc visible (donc non replié...) pour tester le diaporama ?
Sinon, je vois que la largeur du div englobant la diapo est bonne (500 pixels) mais que la hauteur est à zéro car non spécifiée, même si les images à l’intérieur sont explicitement dimensionnées :
<div class="dsjcycle" id="dsjcycle_id_50ffcec6be3ac" style='width:500px;background:ffffff'>
Après, je ne sais pas pourquoi, il faudrait fouiller un peu, mais en attendant voici un patch qui semble fonctionner :
.dsjcycle { height: 333px; }
# Le 23 janvier à 14:15, par bb
En réponse à : Des blocs dépliables
Alors... J’ai testé avec le bloc « visible », le diapo apparait correctement, même quand je replie le bloc. Mais pas quand je le met dans « invisible ».
Pour le patch, je l’ai inséré dans mon habillage.css, mais ça ne fonctionne pas. Faut-il mettre le code dans une feuille de style bien particulière ?
# Le 23 janvier à 15:04, par bb
En réponse à : Des blocs dépliables
Rectification, le patch fonctionne quand je le met dans habillage.css.
La page n’avait pas dûe être rechargée comme il faut.
# Le 23 janvier à 15:14, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Il est donc probable qu’un bloc fermé empêche le plugin jQuery Cycle de trouver la hauteur du bloc de diapo correctement, puisque le bloc englobant est invisible à ce moment (certaines propriétés désactivées).
Si ce patch te suffit ça ira. Sinon, il faudra charger la page avec les blocs visibles, puis à la toute fin de la page, insérer une commande jQuery qui les fermera tous, une fois que les diapos auront été correctement configurés par le plugin jQuery Cycle.
# Le 24 janvier à 11:32, par bb
En réponse à : Des blocs dépliables
Je ne sais comment, le patch augmente la hauteur de la page bien après le pied de page et ne correspond à aucun bloc sous firebug (sans doute invisible ?!). Ce n’est pas très élégant mais bon, en attendant ça ira.
L’idée de charger le bloc ouvert puis le refermer, ce pourrait être la solution. J’ai lu ceci dans un précédent post qui concernait l’ouverture de tous les blocs et leur fermeture :
jQuery(’.blocs_replie’).blocs_toggle() ;
jQuery(’.blocs_titre’).not(’.blocs_replie’).blocs_toggle() ;
Mais comme je ne connais pas ces commandes, j’ai besoin de conseil ! :)
Répondre à ce message
# Le 4 janvier à 10:40, par christianD.
En réponse à : Des blocs dépliables
Bonjour,
Tout fonctionne bien avec Firefox, Chrome mais avec IE, même en V8, ça pose problème. Tout se passe comme si la fin d’un bloc n’était signalé et que les parties qui suivent un bloc étaient comprises dans ce bloc.
Comme c’est pas très clair, je vous mets la page en question.
# Le 4 janvier à 16:30, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Salut.
Quel est ton code HTML de départ ?
Car au niveau du titre, je lis ceci sur ta page, et ce n’est pas très catholique en effet :
<div class="cs_blocs"><h4 id="cs_bloc_id_messages" class="blocs_titre blocs_replie cs_done">
<a title="Déplier" href="javascript:;"></a>
</h4>
<a href="javascript:;"><h3 class="inline">Derniers messages</h3>
</a>
</div>
<a href="javascript:;"></a>
# Le 4 janvier à 16:58, par christianD.
En réponse à : Des blocs dépliables
Bonjour Patrice,
Ca donne ça.
# Le 4 janvier à 17:04, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Mais ça c’est bon, non ? Ce qui ne doit pas être valide, c’est le titre cliquable, et non le bloc à plier/déplier... Essaie peut-être avec un code simplifié ?
# Le 5 janvier à 09:04, par christianD.
En réponse à : Des blocs dépliables
Je suppose que ça doit être bon car ça fonctionne sous Firefox, Chrome, Safari. Il n’y a que IE qui pose problème. Je vois pas trop bien.
Si quelqu’un a déjà eu le souci et l’a résolu, je suis preneur.
# Le 5 janvier à 13:21, par christianD.
En réponse à : Des blocs dépliables
Pour changer le titre cliquable, il faut aller où ?
Répondre à ce message