- 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).
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) :
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 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 :
.
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|
- #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 5ème 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('h4.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}.
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
- + ' h4.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 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 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 !
Vos commentaires
# Le 13 avril à 10:40, par Manu
En réponse à : Des blocs dépliables
Personnaliser les blocs
J’ai bien compris en lisant la doc que l’on peut personnaliser les blocs en leur affectant un #2, #3 etc...
Juste par coquetterie (et pour que ce soit plus « parlant » donc plus facile pour le rédacteur), est-ce qu’il y aurait un moyen de passer un nom de classe « en clair », un peu à la manière de ce qui existe pour les modèles, en écrivant un truc du style
<bloc|aller_plus_loin> ou <bloc|deplier>qui produiraient des
<div class="cs_blocs cs_bloc_aller_plus-loin"> ou <div class="cs_blocs cs_bloc_deplier">?# Le 14 avril à 18:41, par Pat
En réponse à : Des blocs dépliables
Oui, mais pas avec cette syntaxe là :
<bloc|aller_plus_loin>serait interprété comme un modèle par SPIP, et le raccourcis deviendrait inexploitable. Mais pourquoi pas :<bloc#aller_plus_loin>...# Le 14 avril à 19:22, par Manu
En réponse à : Des blocs dépliables
Bon sang mais c’est bien sûr !... Pourquoi vouloir compliquer quand cela peut être si simple !
Merci.. (une fois de plus)
# Le 14 avril à 23:14, par Pat
En réponse à : Des blocs dépliables
Sauf que pour l’instant, seules les valeurs numériques sont reconnues... Il faudrait changer le code pour que ça fonctionne.
Répondre à ce message
# Le 2 mars à 19:04, par Renée Picard
En réponse à : Des blocs dépliables
Bonjour
Dans la page plugin-thelia/inc/inc-rubrique_thelia.html j’ai mis un tableau pour afficher les produits et dans ce tableau il y a un bloc dépliable sur le titre du produit.
http://www.conceptvirtuel.ca/mangersaison/spip.php?page=rubrique_thelia&id_rubrique_thelia=2
Voici le code relatif au bloc dépliable :
<table> ..... <tbody>.... <tr><td> #BLOC_TITRE
THELIA-TITRE
#BLOC_DEBUT
<span class="thelia_promo">THELIA-DESCRIPTION</span>
#BLOC_FIN
</td> ... </tbody> </table>
Le bloc se déplie bien avec firefox. Avec IE le bloc ne se déplie pas.
Par contre bloc dépliable fonctionne ailleurs sur le même site mais ici il n’y a pas de tableau :
http://www.conceptvirtuel.ca/mangersaison/spip.php?rubrique1
Avez-vous déjà mis un bloc dépliable dans un tableau et si OUI comment faire avec IE ?
Merci
RP
# Le 2 mars à 20:43, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Je viens d’essayer avec Firefox et IE6, tout fonctionne bien. Sinon il faudrait peut-être remplacer ton tableau par des div...
Répondre à ce message
# Le 16 février à 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 à 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...
Répondre à ce message
# Le 19 janvier à 17:49, par Claude21
En réponse à : Des blocs dépliables
Au secours ! Mes blocs dépliables sont tous dépliés et ne se replient plus ! En allant sur la page d’administration, il est noté en haut de page : « Note : la librairie jQuery semble inactive sur cette page. Veuillez consulter ici le paragraphe sur les dépendances du plugin ou recharger cette page. » J’ai bien relu la partie d’article sur les dépendances, mais je ne vois pas qu’est ce que je dois faire : je suis en spip 2.1.12 Le site réinstallé début décembre marchait très bien et soudainement ça ne se replie plus depuis quelques jours. Peut-être dû à une mise à jour de Javascript ?
Que dois-je télécharger ? Je le trouve où ? Je le place où ? Merci à tous pour toutes infos pertinentes.
# Le 20 janvier à 00:46, par Pat
En réponse à : Des blocs dépliables
Salut, tu as une adresse publique ?
Il y a sans doute une erreur JS quelque part : à vérifier avec Firefox+Firebug ou Chrome. Peut-être un plugin interfère.
# Le 20 janvier à 08:42, par Claude21
En réponse à : Des blocs dépliables
Bonjour, Merci pour cette première réponse très rapide. adresse du site : www.societ.sococodami.com
# Le 20 janvier à 12:00, par Pat
En réponse à : Des blocs dépliables
Merci. Je ne vois ni bloc ni erreur JS sur cette page...
# Le 20 janvier à 12:18, par Claude21
En réponse à : Des blocs dépliables
Ils sont sur la plupart des pages accessibles par les liens ou le menu, essentiellement sur les pages de valeurs des timbres (c’est de la philatélie...)
Merci
Répondre à ce message
# Le 14 décembre 2011 à 23:07, par Manu
En réponse à : Des blocs dépliables
J’ai à présent un nouveau soucis avec l’image de fond pour les blocs titre h4
J’ai personnalisé blocs.css.html dans mon répertoire /squelettes/outils pour définir une image de fond destinée à remplacer le triangle jaune défini par défaut
background:transparent url(#CHEMIN{voir.gif}) no-repeat scroll left center;j’ai mis le fichier voir.gif bien sagement dans squelettes/ mais cette image ne s’affiche pas (ressource non trouvée). Ce qu’il y a de bizarre c’est que
background: transparent url(sites/palestine.maferme.noisetier/squelettes/voir.gif) no-repeat scroll left center;http://palestine.maferme.noisetier/local/couteau-suisse/sites/palestine.maferme.noisetier/squelettes/voir.gif# Le 15 décembre 2011 à 02:12, par Pat
En réponse à : Des blocs dépliables
Bonjour.
En fait j’ai du mal à comprendre ton exposé. Parfois, il vaut mieux mettre l’URL absolue, car les images CSS sont recherchées dans le répertoire de la feuille de styles. Essaie plusieurs formules, comme peut-être :
[(#EVAL{_DIR_RACINE}|url_absolue)]voir.gif[(#CHEMIN{voir.gif}|url_absolue)]Répondre à ce message
# Le 8 juin 2011 à 18:03, par Augustin
En réponse à : Des blocs dépliables
Bonjour et merci pour cette extension !
J’aimerais savoir comment faire pour rendre cliquable le texte du résumé en plus du texte du titre. Encore mieux, si c’est possible, rendre les deux blocs entiers cliquables pour déplier/replier le bloc caché.
Merci d’avance !
# Le 30 octobre 2011 à 12:20, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Bonjour, travailles-tu dans un squelette ou à l’intérieur d’un article ? Probablement qu’une petite commande jQuery dans le résumé au moment du clic pourra faire l’affaire.
# Le 3 novembre 2011 à 18:04, par Augustin
En réponse à : Des blocs dépliables
Bonjour et merci de la réponse.
C’est pour les deux situations, mais plus particulièrement pour un template (j’affiche le titre et le chapeau de news, et elles sont appelées en AJAX lorsque le bloc est déplié).
Merci !
Répondre à ce message
# Le 2 novembre 2011 à 14:46, par perig
En réponse à : Des blocs dépliables
Souci avec la balise #TITRE et ajax.
Bonjour,
la balise #TITRE semble ne pas fonctionner quand on utilise un bloc numéroté distant. Dans le squelette, elle créée les balises prévues mais elle ne les referme pas. Un bug ?
<div class="cs_blocs cs_bloc1"><h4 class="blocs_titre blocs_replie blocs_ajax "><a href="http://fondation.linguasphere.info/spip.php?page=cs_liste_article&id_rubrique=1">Mon titre
Les balises HTML de fermeture
</a></h4></div>ne sont pas créées dans le squelette.SPIP 2.1.11 [18566] et la version 1.8.44 (53934) du Couteau suisse. Un bug ?
Amicalement.
# Le 2 novembre 2011 à 14:52, par ?
En réponse à : Des blocs dépliables
Bonjour, pourrais-tu donner le code du squelette, qu’on puisse tester la chose ? Merci ;-)
# Le 2 novembre 2011 à 15:25, par perig
En réponse à : Des blocs dépliables
Voici les extratits de squelettes. Pour la création des titres d’appels, en entête :
<BOUCLE_secteurs(RUBRIQUES){racine}>
[(#BLOC_TITRE{#ID_RUBRIQUE,
[(#URL_PAGE{cs_liste_article}|parametre_url{id_rubrique,#ID_RUBRIQUE})]})]
#TITRE
</BOUCLE_secteurs>
...qui fabrique le code suivant pour chaque tour de boucle (le n° change) :
<div class="cs_blocs cs_bloc1"><h4 class="blocs_titre blocs_replie blocs_ajax "><a href="http://fondation.linguasphere.info/spip.php?page=cs_liste_article&id_rubrique=1">Mon titre
... dans lequel il semble manquer
</a></h4></div>et plus bas, dans le contenu :
<BOUCLE_secteurs1(RUBRIQUES){racine}>#BLOC_DEBUT{#ID_RUBRIQUE}
#BLOC_FIN
</BOUCLE_secteurs1>
qui produit ceci :
<div class="blocs_destination blocs_invisible blocs_slide cs_bloc_id_1"></div><div class="blocs_destination blocs_invisible blocs_slide cs_bloc_id_7"></div>
<div class="blocs_destination blocs_invisible blocs_slide cs_bloc_id_8"></div>
qui semble OK.
Une précision peut-être importante :le site est sous ZPIP en HTML5.
Pierrick
# Le 2 novembre 2011 à 22:33, par Pat
En réponse à : Des blocs dépliables
Bon, mon message est bloqué, je ne sais pas pourquoi !!!!!!
Merci pour ce code très bien exposé. Les blocs éloignés n’ont pas tout à fait la même syntaxe. Regarde la doc ci-dessus à nouveau (paragraphe « Déplier un bloc éloigné de son titre »).
Répondre à ce message
# Le 30 octobre 2011 à 11:00, par ygornet
En réponse à : Des blocs dépliables
Salut
Y a -t-il une méthode pour avoir deux séries de blocs distincts dans une page ?
C’est à dire deux séries qui fonctionnent, qui s’ouvrent et se ferment de façon indépendante l’une de l’autre ?
# Le 30 octobre 2011 à 12:16, par Patrice Vanneufville
En réponse à : Des blocs dépliables
As-tu fait des tests ? Il me semble que les blocs, numérotés ou non, n’ont pas ce genre de limitation... Ou je ne comprends pas ta question ?
# Le 31 octobre 2011 à 00:10, par ygornet
En réponse à : Des blocs dépliables
Dans une même page :
- d’une part il y a un menu qui utilise les blocs pour ouvrir l’une ou l’autre des sous-rubrique.
- d’autre part, il y a un article et dans le texte de cet article, il y a des blocs pour donner le détails des items d’une liste.
Enfin blocs-dépliables est configuré pour qu’il n’y ait qu’un bloc ouvert sur la page.
Or donc mon rêve, c’est que chaque série (la série du menu et la série du texte) puisse gérer son ouverture/fermeture indépendamment l’une de l’autre.
Or lorsqu’on déplie un item du texte, les items du menu se ferment et réciproquement.
La notion de bloc numéroté ne fonctionne pas car ce sont tous les blocs de la page qui sont indexés et qui sont donc traités comme un seul ensemble.
Quand aux blocs nommés
(#BLOC_TITRE_DEBUT{toto})ils permettent de commander l’ouverture de blocs non adjacents mais ne se préoccupent pas du tout d’identifier une série de blocs d’une autre.Bref il me reste à isoler le menu dans une iframe avec le calcul hasardeux de la hauteur de son inclusion dans la page. Ce qui n’est pas une solution satisfaisante. Bref, bref, ce n’est pas joyeux !
# Le 31 octobre 2011 à 11:28, par Pat
En réponse à : Des blocs dépliables
Dans ce cas, il te faut surcharger le plugin jQuery jQuery.fn.blocs_replie_tout proposé par le Couteau Suisse en le réécrivant à ta sauce, et ça, c’est de la programmation jQuery.
Code d’origine à modifier :
Admettons que tu encapsules ton menu dans un div.blocsmenu et les autres blocs dans un div.blocstexte. Après l’appel du fichier bloc.js dans le header, il faudrait réécrire ta fonction, un peu dans cette idée (code non testé !) :
Répondre à ce message
# Le 16 août 2011 à 10:29, par stephane
En réponse à : Des blocs dépliables
Bonjour a tous.
Je découvre ce plugin et je cherche à mettre sous mes bloc forum un bloc dépliable pour le formulaire de réponse (comme sur SPIP CONTRIB).
J’utilise donc Ajax avec une syntaxe (#BLOC_TITRE[(#URL_PAGEmonajax|parametre_urlid_article,#ID_ARTICLE)])]
J’ai un effet que je ne comprend pas : la première fois que je clique sur le lien pour déplier, le formulaire s’insere correctement dans la page sous le thread.
Mais si je clique sur un second bloc depliable d’un autre Thread, la page ajaxée s’ouvre complétement et pas uniquement un bloc dans la page d’origine :-(
Une idée ?
# Le 30 octobre 2011 à 12:22, par Patrice Vanneufville
En réponse à : Des blocs dépliables
Ton exemple de code est passé dans la moulinette typo de SPIP et n’est pas très clair... Peut-être faut-il ici utiliser les blocs numérotés ?
Répondre à ce message
# Le 27 mai 2011 à 13:35, par Thomas
En réponse à : Des blocs dépliables
Bonjour,
Merci pour ce plug-in très utile. Néanmoins, je rencontre un problème, et après avoir lu les commentaires postés récemment, je n’ai pas vu quiconque en parler.
Voici le problème, lors de l’utilisation de la syntaxe :
L’affichage n’est pas celui désiré. En effet, sur Mozilla Firefox, tout fonctionne pour le mieux, ce qui n’est d’ailleurs pas surprenant. Mais, sur notre cher ami Internet Explorer dans sa version 9, le titre du bloc apparaît correctement, mais même en cliquant dessus, impossible de l’ouvrir. En effet, ce dernier reste fermé. De plus, lors de l’utilisation du mode de compatibilité d’IE, les titres des blocs acceptent enfin de montrer leur contenu, mais, le titre devient très très gros (du genre titre h3-h4). Après avoir étudié les feuilles de style associées à ce plug-in et les paramètres SPIP, il semblerait que ce dernier paramètre soit configurable. Voici mes deux questions :
D’où vient cette différence d’affichage entre le mode normal et le mode de compatibilité de IE ?
Pourquoi, en mode normal, les blocs refusent-ils de bien vouloir se déplier ?
Cordialement,
Thomas
Répondre à ce message