- 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
- Ouvrir un bloc contenant un formulaire
- Accès direct au forum
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.
Les fonctionnalités décrites ici font partie du plugin Le Couteau Suisse que vous pouvez trouver ici : Le Couteau Suisse. Pour avoir accès aux blocs dépliables présentés dans cet article, il vous faut donc avoir préalablement installé ce plugin.
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>A noter : si le texte du bloc ne comporte pas deux sauts de ligne délimitant le titre et le futur texte dépliable, alors le Couteau Suisse crée un titre qui deviendra cliquable en prenant les 30 premiers caractères du texte présent dans le bloc. Si besoin, ce paramètre est directement modifiable sur la page de configuration du plugin.
• 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...
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 :
<div class="cs_blocs">
<h4 class="blocs_titre blocs_replie">
<a href="#">un titre</a></h4>
<div class="blocs_invisible">le contenu</div>
</div>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. (Modif. 2018 : Chrome le permet également très bien).
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 :
<div class="cs_blocs cs_bloc2">
<h4 class="blocs_titre blocs_replie">
<a href="#">un titre</a></h4>
<div class="blocs_invisible">le contenu</div>
</div>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_FINDé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_FINen :
<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_FINUtilisation 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_FINAttention 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 !
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 :
jQuery(document).ready(function() {
jQuery('.cs_blocs').has('.erreur_message')
.find('.blocs_titre.blocs_replie').blocs_toggle();
});
Discussions par date d’activité
146 discussions
Salut,
Comment puis-je avoir 4 ensembles de blocs sur la même page en ayant le 1er bloc de chaque ensemble déplié au chargement de la page ?
A l’heure actuelle, si je déplie un bloc d’un de mes 4 ensembles de blocs, les autres blocs se referment, or je souhaiterais que chaque ensemble de blocs fonctionnent de manière indépendante.
Je pourrais répondre « non » au champ « Un seul bloc ouvert sur la page : » dans la configuration de la lame du couteau mais je tiens à garder cette fonction de repli automatique.
Un exemple de ce que je cherche à obtenir : site Collide où chacun des 4 ensembles de blocs fonctionne de manière totalement indépendante.
Salut, je viens de mettre à jour les blocs dépliables et par la même ocasion l’article ci-dessus. Peut-être y trouveras-tu ton bonheur.
En tout cas, mis à part une programmation jQuery spécifique de blocs numérotés avec un jeu sur les classes, il ne me semble pas possible spontanément d’isoler 4 blocs uniques comme sur l’exemple que tu cites.
Répondre à ce message
Bonjour,
Bon décidément j’adore ce plug-in, encore merci Patrice pour son développement.
Et c’est toujours pareil plus quelque chose est bien plus on lui en demande.
Et là je me heurte à un petit souci...
J’utilise quasi systématiquement les blocs dépliables comme ceci :
Ce qui me convient très bien... SAUF... et bien sauf quand l’article est court, c’est à dire fait moins de 200 caractères. A ce moment là le BLOC_RESUME s’affiche mais pas de dépliage (ce qui est normal). Or, l’affichage de INTRODUCTION se fait sans mis en forme, sans image ni document joint... donc problème.
La question est donc de savoir comment faire pour ne pas utiliser les blocs dépliables en-dessous d’une certaine longueur d’article ?
D’avance merci pour vos contributions.
Bon j’ai trouvé une solution grace aux boucles conditionnelles de SPIP BONUX :
Je ne sais pas si c’est très propre ou la solution la plus économe, en tout cas ça marche, cependant je suis ouvert à toute critique et autres propositions
Répondre à ce message
Bonjour,
Et un GRAND MERCI pour ces lames géniales qui font passé spip dans une autre ère !
Moi j’adore les blocs dépliables ! Au moins, c’est l’utilisateur qui choisi quelle « longueur » a sa page. Avant de passer sur spip j’avais d’ailleurs déjà fait un petit javascript pour pouvoir faire cela dans mes sites.
Bref, comme toute bonne chose, on a toujours envie de l’améliorer. Et moi l’autre lame que j’aime beaucoup est
#INTRODUCTIONqui simplifie et améliore beaucoup les filtres{couperXXX}.L’idée serait en fait que
#INTRODUCTIONsoit le#BLOC_RESUMEdu bloc dépliable (ce que je pense beaucoup font déjà), MAIS SURTOUT que lespoints de suitede#INTRODUCTIONsoient le lien cliquable javascript pour déplié le bloc.Et la question est : est-ce possible avec les lames #INTRODUCTION et BLOCS DEPLIABLES dans leur versions actuelles, et si oui comment ?
Et si non, est-ce une piste de développement ?
De mon côté j’ai essayé en paramettrant les
points de suitede#INTRODUCTIONà :Mais cela ne fonctionne malheureusement pas, et je pense que c’est dû à l’imbrication des
<div>; d’où mon inquiétude quant à la faisabilité de la manip’ avec les versions actuelles des lames.Un énorme MERCI d’avance pour vos futures contributions !
T’as pas moins compliqué ? lol
À mon avis, il suffirait d’un simple :
<span class="la_suite"> (...)</span>.Ensuite, en jQuery, tu programmes le clic de
$('.la_suite')pour qu’il ouvre le bloc...Merci pour ta réponse !
Euh oui....
Alors j’ai l’impression que ça te parait tout facile... mais en ce qui me concerne je ne suis malheureusement qu’un débutant en javascript, et notamment je n’ai jamais programmé avec la librairie JQuery.
Donc si tu pouvais consacré un tout petit peu de ton précieux temps pour m’expliquer de manière un peu plus explicite je t’en serais sincèrement reconnaissant.
MERCI ENCORE
(et encore bravo pour les lames !)
Bonjour à tous,
Décidément je crois que j’ai besoins d’un petit coup de main louable de votre part :
Je n’arrive pas à faire que le bloc résumé deviennent insible et le bloc principal visible par le clique des points de suite de #INTRODUCTION.
Je ne suis tout de même pas le seul à avoir eut l’idée !?
Certains auraient donc bien trouvé une solution... non ?
En tout cas UN GRAND MERCI D’AVANCE pour toute aide, je suis maintenant bloqué dans mon développement à cause de ce point.
Tu sais que les points de suite ne sont pas visibles si le texte brut fourni par la balise est en dessous du nombre de caractères spécifié en config... Peut-être vaut-il mieux alors ajouter ton lien cliquable à la mains ?
Sinon, Le code suivant devrait fonctionner tout seul avec une mise à jour du plugin et une suppression des caches SPIP et navigateur.
Si ça marche, champagne qd même !?
Pat
CA MARCHE !!!!!
CHAMPAGNE !!!!
Super !!!! Merci beaucoup !!!...
Pour les autres il suffit de mettre :
<a href="javascript:;" class="pts_suite">... lire la suite</a>Par exemple.Moi j’essayais désespérément de modifier la fonction blocs_init d fichier bloc.js pour y arriver mais sans succès. En fait je n’arrivais pas à récupérer les blocs voulus pour leur appliquer le
.blocs_replie_tout().blocs_toggle();.Et donc c’est
.parents('.cs_blocs:first').children('.blocs_titre')Superbe.
je devrais donc maintenant être capable d’intégrer ton code à bloc_init et peut être même être capable d’ajouter une balise « replier » en fin de texte déplier pour pouvoir replier les nlocs par un titre sur le ce dernier.
Pour exemple, la page est : http://lappeldairs.org/tinatur/-Thermofloc-R-a-souffler-.html#
MERCI ENORMEMENT ENCORE !!!!
(peut-être une amélioration de la future version de la lame blocs dépliables...)
Et t’as essayé de programmer la chose en ajax, histoire de ne pas charger tous le texte caché de tes articles au premier hit ?
le fonction blocs_init() pourrait devenir :
Bonjour,
En déplacement ce week-end je viens de me remettre sur mon développement.
Et grâce à ton aide Patrice, j’ai réussi à faire ce que je voulais.
J’ai donc transformé comme tu me l’as indiqué la fonction blocs-init du fichier blocs.js et j’ai ajouté le même comportement pour une balise « repliage » placer en fin du texte invisible. Ainsi j’obtiens la fonction blocs_init suivante :
Les points de suite de #INTRODUCTION sont configurés comme suit :
<a href="javascript:;" class="pts_suite"><i> ... lire la suite</i></a>Et j’insère le code :
<a href="javascript:;" class="repliage"><i>>replier l'article<</i></a>Juste avant #BLOC_FIN dans mes squelettes.
Et voilà
Pour exemple rendez-vous ici : http://www.lappeldairs.org/tinatur/-Thermofloc-R-a-souffler-.html
J’ai pas fini mes CSS donc l’apparence graphique est pas encore au top... MAIS CA MARCHE !!!!
MERCI ENCORE !!!
Bonjour,
Après quelques mois d’hésitation, je suis finalement passé sur Spip 2.0.7 cette nuit.
Mais, bien que j’ai bien repris tous mes fichiers modifiés précédemment dans la nouvelle version (donc blocs.js) et bien ça ne marche pas comme il faut !
Au chargement de la page les blocs sont bien pliés, mais impossible de les déplier en cliquant sur les points de suite ni en cliquant sur le titre !
Aïlle aîlle aïlle !
Une petite aide peut-être ?
Merci d’avance !
Bonsoir,
Bon, après quelques heures de galères à activer et désactiver tous les scripts sur mon site et à lire de la littérature en anglais dans le texte sur pas mal de sites sur jQuery, j’ai trouvé !
En fait, le passage sous SPIP 2.0.7 a révélé une incompatibilité qui aurait pu agir déjà sous SPIP 1.9.2.
En effet, j’utilisais pour mon site la librairie scriptaculous pour un diaporama crossfade et notamment la librairie prototype.js.
Une incompatibilité existe entre ces différentes librairies notamment par l’usage de « $ ». Il existe une méthode pour passer outre cette incompatibilité voir ici.
Mais cependant, j’ai choisi de ne pas multiplier les librairies et je me suis dit que jQuery serait bien capable de faire un diaporama crossfade.
Donc je bosse actuellement sur un diaporama crossfade sous jQuery pour mettre en fond de mon header de site.
DOnc au passage si certains d’entre vous on des pistes, voire du code, voire une solution ; je suis preneur !
Merci encore à la communauté !
Bonjour à tous, je cherche à insérer un lien « replier le bloc » qui apparaitrait à la fin du bloc déplié.
C’est entre autre le sujet du message du 9 mars par MacGeol, mais je ne parviens pas à le faire fonctionner.
Je précise que je ne connais pas javascript et que ça ne facilite pas la tâche !
J ai inséré ce code dans la fonction blocs_init() de bloc.js :
et ajouté la ligne suivante juste avant le #BLOC_FIN :
Mais ça ne marche pas !
Quelqu’un aurait-il l’amabilité de m’éclairer ?
Merci, et bravo pour ce plugin !
Bonjour, je viens de faire l’essai de ce que tu proposes et ça fonctionne bien.
- Questions : quelle version de SPIP (voire de jQuery) utilises-tu ? Es-tu certain de tes caches (SPIP, navigateur) ? La console de Firefox/Firebug indique-t-elle une erreur JS ?
- Remarque : il ne faut surtout pas modifier les fichiers source d’un plugin, cela t’empêche de les mettre à jour facilement. Ex : lame « Mises à jour automatiques ».
- Suggestion : avec la toute dernière révision du Couteau Suisse (rev. 31836), les liens class=« replier_bloc » devraient permettre de replier le bloc contenant. Plus la peine d’ajouter du JS : j’ai modifié l’article ci-dessus en conséquence.
Ok, mea culpa il s’agissait d’une question de cache navigateur...
Merci beaucoup d’avoir ajouté cette fonctionnalité !
J’ai une autre question : est-il possible de déplier/replier les blocs de manière douce, un peu comme le fait le plugin ancres douces ?
Et aussi, j’aimerais que le repli du bloc entraîne un déplacement de la page au niveau du début du bloc, est-ce possible sans modifier le plugin ?
Bien sûr ! As-tu été voir la config de l’outil ?
Completed at revision : 31851
Oops ! Je n’avais pas vu l’option de dépliage doux, au temps pour moi...
Merci pour l’ajout du déplacement sur la page, c’est génial quelqu’un d’aussi réactif !
Du coup je n’ai plus rien à dire, tout est parfait !!
Ah, tu dis ça parceque je n’ai pas encore envoyé la facture :P
Répondre à ce message
Bonjour,
Tout d’abord merci pour ce plugin vraiment très utile. J’aurais voulu savoir s’il était possible de gérer la balise #EXPOSE , histoire de faire du menu qu’il soit contextuel...
Cela le rendrait encore plus indispensable.
Merci
Fraktale
Comment ça gérer la balise #EXPOSE ?
En fait rajouter la classe .on sur l’article ou la rubrique en cours et forcer le déploiement de l’arborescence...
Rien de plus facile, c’est plutôt à toi de programmer la chose... Exemple :
Répondre à ce message
OK, merci ! Je me doute bien que c’est un problème de CSS, je vais voir avec Firebug.
Répondre à ce message
Excellent outil que ces blocs dépliables, merci. Mais je rencontre un problème d’affichage.
Sur mon site (Intranet, donc pas de lien), j’ai une colonne de navigation à gauche avec des liens vers des articles. Au centre, une colonne plus large avec le texte de l’article, et dans celui-ci des blocs dépliables : ceux-ci viennent se positionner non pas en haut de leur colonne comme ce devrait être le cas mais en bas, exactement à la hauteur du dernier lien de ma colonne de gauche (c’est clair ?). Quel que soit le nombre de liens dans ma colonne de navigation, les blocs dépliables de mon texte viennent se positionner au niveau du dernier d’entre eux dans la colonne centrale. Si j’ai du texte tout simple, il reste en haut ; dès qu’un bloc dépliable apparaît dans le texte, tout le reste est décalé vers le bas : il y a donc un grand vide correspondant à la hauteur de mes liens de gauche. Si je retire les raccourcis « bloc » « /bloc » de mon article et que je les remplace par -* par exemple, l’affichage revient à la normale et le texte revient bien se positionner en haut de la colonne centrale ; je remets les « bloc » « /bloc », l’affichage se décale vers le bas. Any idea ?
Ceci est probablement une question de CSS que tu peux tenter de régler avec Firefox+Firebug... Sans exemple public, ce n’est pas évident à cerner ;-)
Répondre à ce message
Alors la un grand merci tu as trop la classe.
En effet j ai modifie le javascript comme indique et boom devinez quoi ... ca marche.
Encore merci pour ton aide.
++
Répondre à ce message
Bonsoir j’ai un petit souci avec mes blocs dépliables.
Ils ne déplient que si je clique sur la fleche située devant.
Vous pourrez trouver le symptôme ici
Ce bug ne se produit pas dans l’interface privée, peut être est ce une interférence avec le squelette Eva Web 4
Salut,
Je viens de voir les blocs dépliables à propos des katas. Sans pouvoir regarder dans le détail, il est possible qu’il y ait un conflit avec un autre plugin... googleanalytics peut-être ?
As-tu essayé de désactiver tes plugins un par un pour trouver la source du pb ?
Je vois aussi que le fichier « plugins/eva_habillage_pour_spip_2_0/javascript/menu_depliant.js » possède à la ligne 14 le code suivant :
Il s’agit d’un code JS très intrusif qui bloque très probablement les
<a>placés dans le titre des blocs dépliants du Couteau Suisse, alors qu’il ne le devrait pas.Je propose de remplacer ce code par :
Tu pourras tester cela et voir si ça change quelque chose ?
Cela devrait limiter les clics à ne pas propager au simple menu de gauche auquel ils sont destinés. Je pense que ce fichier est livré avec le squelette. Il faut donc contacter les concepteurs du squelette pour corriger éventuellement cette ligne.
Tiens-nous au courant !
En examinant le code du squelette EVA, il apparait même que le menu dépliant n’a en fait rien d’un menu dépliant programmé en JS... Les classes "noeud" et "feuille" que l’on voit dans « menu_depliable.js » n’ont été reprises nulle part, ni dans « inc_menu.html », ni dans le squelette entier... On dirait un copier-coller mal fini, un gros ménage s’impose ;-)
Répondre à ce message
Depuis mon passage à la dernière version du CS (de 1.7.18.03 à 1.8.09.02) mes blocs ne se déplient plus, et même sur une page très simple (juste #INSERT_HEAD et du texte). FireBug signale : blocs.js ligne 5 : this.hasClass is not a function.
SPIP 1.9.2i [14398]
Quelqu’un peut-il m’aider, merci d’avance.
Merci du retour. Effectivement le code jQuery des blocs a évolué en cassant la compatibilité avec jQuery 1.1.1. Ceci est à présent réparé (http://zone.spip.org/trac/spip-zone...).
J’en profite pour évoquer un plugin qui met à jour jquery pour SPIP 1.92 : http://plugins.spip.net/Jquery-1-2-...
Quelle réactivité ! Merci pour la maj. Maintenant tout va très bien.
Répondre à ce message
Je posterai du code plus « propre » des que j’ai un peu plus de temps, mais en attendant, voici deja les morceaux de squelettes que j’ai fini par ecrire, apres que Patrice m’ait donné un petit coup de pied au cul dans le bon sens par mails interposés ;) Merci encore !
d’ailleurs, si qq’un est interessé par quoi que ce soit dans les squelettes du site que je programme pour l’instant, n’hesitez pas a m’envoyer un chti mail - apres tout, une bonne partie du code et/ou des idees vient de spip-contrib ;)
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
