SPIP-Contrib

SPIP-Contrib

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

289 Plugins, 197 contribs sur SPIP-Zone, 131 visiteurs en ce moment

Accueil > Rédaction > Affichage dans texte > Accordion JQuery > Accordion JQuery

Accordion JQuery

22 février 2016 – par touti – commentaires

7 votes

Un plugin qui permet d’activer la librairie Jquery accordion https://jqueryui.com/accordion/ et de l’utiliser directement dans votre contenu rédactionnel ou même ailleurs comme dans un menu.

Obtenez des paragraphes repliables en accordéon avec le raccourci <accordeon> et les {{{intertitres}}} SPIP.

1. Prérequis et activation du plugin

-  Ce plugin fonctionne à partir d’un version de SPIP 3.1 pour raisons de compatibilité de version JQuery préchargée.
-  Activez ce plugin comme tous les plugins SPIP dans l’interface privé.
-  Il n’y a aucune dépendance, la librairie JQuery et JQueryUI étant préinstallées dans SPIP.

2. Rédigez votre texte

Dans le texte d’un article en rédaction, encadrer les intertitres et leurs paragraphes de la balise <accordeon> comme ceci

<accordeon>
{{{Titre du premier accordéon}}}
Voici le contenu du premier accordéon.
{{{Titre du deuxième accordéon}}}
Voilà le contenu du deuxième accordéon.
{{{Titre du troisième accordéon}}}
<div>
Et le contenu du troisième accordéon avec des paragraphes et/ou des images.
</div>
</accordeon>

Le rendu de l’accordeon

En dehors d’un contenu SPIP, dans une FAQ par exemple

Respecter l’écriture suivante pour ouvrir les blocs qui suivent chaque titre h3 cliquable

Comprendre le plugin

Merci à Arno* qui m’a mis sur la voie du Yaml très simple de TextWheel pour traiter le raccourci <accordeon> qui génére un
<div class="spip_accordeon"> pris en compte par le javascript.
http://zone.spip.org/trac/spip-zone/browser/_plugins_/accordion/wheels/accordeon.yaml?rev=95047

Le plugin utilise également le pipeline de chargement des effets UI de JQuery « jqueryui_plugins » très simple d’usage une fois déclaré dans le paquet.xml

Pour aller plus loin

Les options de la librairie JQuery UI Accordion sont sur https://jqueryui.com/accordion/

On peut utiliser accordion JQuery où l’on veut, dans son propre dossier de squelettes, il suffit de dupliquer javascript/spip_accordion.js et de réécrire les options du fichier js.

Todo

Modifier le yaml pour qu’il n’y ait plus à ajouter à la main un div juste après un intertitre si l’on souhaite paragrapher ou insérer des images dans les soufflets de l’accordéon.

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

Dernière modification de cette page le 29 janvier 2018

Retour en haut de la page

Vos commentaires

  • Le 23 novembre 2017 à 14:43, par DD En réponse à : Accordion JQuery

    Bonjour,

    En changeant la borne en compatibilite=« [2.0.0 ;3.2.*] » dans le fichier paquet.xml le plugin fonctionne avec SPIP 3.2

    Et sinon le fait d’avoir une seule entrée h3 dépliée à la fois fonctionne dans le texte d’un article mais je n’arrive pas à l’implémenter lorsque les h3 sont dans un squelette.

    Merci

    • Le 23 novembre 2017 à 14:53, par Maïeul En réponse à : Accordion JQuery

      J’ai modifié sur la zone pour la compatibilité. Pour l’autre problème, je laisse touti répondre.

    • Le 23 novembre 2017 à 16:04, par touti En réponse à : Accordion JQuery

      Bonjour,
      merci de vos messages.

      DD, normalement ça devrait marcher, vérifie la fermeture du div englobant et compare le code source avec celui qui fonctionne, au pire, reporte ici ce qu’affiche la console JS

      ++

    • Le 28 janvier à 23:12, par DD En réponse à : Accordion JQuery

      Hello Touti,
      J’ai réussi. en fait il faut aussi ajouter des <div> </div> dans les squelettes lorsqu’il y a des paragraphes
      exemple :

      [<div><p class="#EDIT{url_site} hyperlien"><a href="#URL_SITE" class="spip_out">(#URL_SITE|couper{80})</a></p></div>]

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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

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

Retour en haut de la page

Ça discute par ici

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2464 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • Éditorial (HTML5UP)

    27 novembre 2017 – 77 commentaires

    Squelette SPIP pour intégrer le modèle Editorial de HTML5UP https://html5up.net/editorial Configuration La page de configuration permet quelques réglages. On y défini la couleur principale du site, des informations de contact et le contenu de la (...)

  • SPIP 400 - Gestion des erreurs HTTP

    23 mars 2012 – 13 commentaires

    Ce plugin tente de compléter la distribution de SPIP en proposant des modèles de pages d’erreur HTTP (codes 401 et 404) avec un texte explicatif et la possibilité pour l’internaute de transmettre un « ticket de bug » au webmestre du site. (...)

  • ScolaSPIP 4

    19 janvier 2016 – 347 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Mots arborescents

    12 octobre 2015 – 15 commentaires

    Ce plugin permet de gérer une arborescence de mots-clés. La configuration d’un groupe de mots dispose d’une nouvelle option pour autoriser pour ce groupe les arborescences de mots-clés. Dans ces groupes, des mots enfants peuvent être créés pour (...)