Des div qui bougent

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>

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Courriel (non publié)

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. )

Texte de votre message

Ajouter un document

gif, jpg, png

Ça discute par ici

Une licence pour un article

18 avril 2007 – 25

Sur une idée originale de erational, voici un plugin permettant de lier une licence à un article.

Plugin Parrainage

6 novembre 2011 – 1

Permettre aux utilisateurs d’inviter leurs contacts à s’inscrire sur le site. Description Vous connaissez le web moderne et son cortège d’applis toujours en version « beta » et de buzz sur le dernier réseau à la mode ? Vous voulez vous aussi vous y (...)

Formulaire de contact libre

27 avril 2011 – 36

Dans SPIP il n’y a pas un formulaire de contact, mais autant de formulaires de contact que d’auteurs. Cette phrase de Romy, dans son article Une page de contact dans mon SPIP, pointe un petit manque de SPIP. La possibilité d’insérer rapidement un (...)

Plugin Mot de Passe Compliqué

2 novembre 2007 – 16

Ce plugin ajoute un testeur de complexité de mot de passes dans les formulaires de choix de mot de passe de SPIP.

Navigation AJAX

31 janvier – 18

Ce plugin permet de modifier automatiquement une parties des liens internes de manière à ce qu’ils ne déclenchent pas un chargement complet de la page cible, mais un chargement en AJAX de certains éléments spécifiés à l’avance. Il permet aussi de (...)

SPIP-Contrib

Le principe

Utilisation

Installation

P.-S.

Notes

Rubriques

Derniers commentaires

Compatibilité

Répondre à cet article

Ça discute par ici

Une licence pour un article

Plugin Parrainage

Formulaire de contact libre

Plugin Mot de Passe Compliqué

Navigation AJAX

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN