Des div qui bougent

Permettre aux rédacteurs de rajouter des éléments dans les menus, les barres etc... depuis le corps du texte

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ù:

<li  class="adeplacer" rel="#menu_gauche ul:seq(1)">
<a href="http://jquery.developpeur-web2.com/documentation/selecteurs.php">
Introduction à jquery</a>
</li>

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 3ème item de la première liste du menu_gauche ressemble à:

<span class="modifcss"  rel="#menu_gauche ul:seq(0) li:seq(2)" css='color: blue, font-weight: bold'/>

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/»):

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
	  $('.adeplacer').each(
	   function(i){ 
	    $($(this).attr("rel")).append(this);
	   }
	  )
 	  $('.modifcss').each(
	   function(i){
      $rel =  $(this).attr("rel"); // #ma_div
      $css = $(this).attr("css"); // 'color: red,  font-weight: bold'
      $t = $css.split(/, */);  
      $($t).each(function(j){
           $key_val = this.split(/: */); // ['color', 'red']
           $($rel).css($key_val[0], $key_val[1]);
      });
      	   }
	  );
});
</script>

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
	  $('.adeplacer').each(
	   function(i){ 
	    $($(this).attr("rel")).append(this);
	   }
	  )
 	  $('.modifcss').each(
	   function(i){
      $rel =  $(this).attr("rel"); // #ma_div
      $css = $(this).attr("css"); // 'color: red,  font-weight: bold'
      $t = $css.split(/, */);  
      $($t).each(function(j){
             $key_val = this.split(/: */); // ['color', 'red']
             $($rel).css($key_val[0], $key_val[1]);
      });
      	   }
	  );
});
</script>
</head>
<body>
<span class="modifcss"  rel="#orderedlist" css='color: blue, font-weight: bold'/>

<li  class="adeplacer" rel="#orderedlist">Tralala</li>

<li  class="adeplacer" rel="#orderedlist">Pouetpouet</li>

<ol id="orderedlist">

		<li>Zimbamboum</li>
		<li>Tagada</li>
		<li>Tsointsoin</li>
	</ol>
</body>
</html>

Footnotes

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

Merci à Fil et à Toussaint Guglielmi.

Discussion

No discussion

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom