SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 60 visiteurs en ce moment

Accueil > Rédaction > Assistants de rédaction > Des div qui bougent > Des div qui bougent

Des div qui bougent

16 septembre 2007 – par Christian.Mercat

2 votes

Mes rédacteurs me demandaient souvent de modifier les menus, de rajouter ceci ou cela, dans des éléments html calculés dans des squelettes vitaux et compliqués. Avec ce petit outil de rien du tout reposant sur jQuery, ils peuvent maintenant rajouter des éléments, modifier un css où ils veulent.

Le principe

Il suffit pour cela de rajouter un petit bout de code dans l’en-tête et les rédacteurs n’ont plus qu’à mettre dans leurs articles ou leurs rubriques, un élément html d’une classe spéciale adeplacer ou modifcss, avec une indication de l’endroit où le déplacer/à modifier dans rel.

Utilisation

Exemple de la modification d’un menu

Un rédacteur qui veut rajouter un lien vers le site de jquery dans la liste d’un menu, doit :

-  Déterminer l’id de l’élément le contenant, pour ça le plus simple est d’installer un DOM inspector comme celui venant avec Firebug par exemple la deuxième ul contenue dans une div d’id = "menu_gauche".
-  Comprendre la traduction de ce chemin du DOM en Xpath/CSS, ici ça sera #menu_gauche ul:seq(1) pour dire que c’est dans l’élément d’id "menu_gauche", puis dans la deuxième (la première porte le numéro 0) liste ul.
-  Taper, au beau milieu de son article ce qu’il veut insérer et où :

Et le lien apparait automatiquement dans la liste où il faut.

Exemple de la modification des css

Pour le css, c’est pareil et la balise, pour modifier le 3e item de la première liste du menu_gauche ressemble à :

Installation

Comment ce miracle est-il possible ? En utilisant jquery, qu’il faut télécharger si vous ne l’avez pas déjà (vous l’utilisez déjà si vous avez les indispensables crayons) [1] et en mettant dans l’en-tête (ou dans votre copie privée du fichier dist/inc-head.html à recopier dans votre répertoire « squelettes/ ») :

Et le tour est joué. Bien-sûr, ne chargez jquery.js que si un plugin ne le fait pas déjà (les crayons par exemple, les essayer c’est les adopter !).

Un fichier minimal (qui n’a rien à voir avec SPIP) qui vous prouve que ça fonctionne est le suivant :

Voir en ligne : JQuery.info

P.-S.

Merci à Fil et à Toussaint Guglielmi.

Notes

[1nota : jquery est présent en standard à partir de la versions 1.9.2 de SPIP

Dernière modification de cette page le 17 septembre 2007

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

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

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

Retour en haut de la page

Ça discute par ici

  • Titre de logo v2

    23 mai 2014 – 22 commentaires

    La version 2 du plugin Titre de logo reprend les mêmes fonctions que la v1 mais étend le titre et le descriptif aux logos de tout objet éditorial de SPIP. Vous pouvez toujours vous référer à l’article de la version 1 pour retrouver les fonctions (...)

  • Plugin Figures

    10 octobre 2017 – commentaires

    Modèles d’insertion des documents en HTML5, avec figure et figcaption. Envie d’utiliser HTML5 sur tout votre site, y compris les modèles d’insertion des documents de SPIP ? Aussitôt installé, ce plugin utilise les éléments HTML5 figure et figcaption (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – 21 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)

  • cibloc : mettre en forme le texte d’articles avec des blocs

    9 juillet – 13 commentaires

    Le plugin CIBLOC permet de mettre en forme le texte d’articles avec des blocs. Il offre des blocs, des colonnes, des icônes et des boutons. Les objectifs de ce plugin Le plugin CIBLOC offre des blocs, des colonnes, des icônes et des boutons : (...)

  • PHANTOM (HTML5UP)

    18 juillet – 11 commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)