Il est parfois nécessaire de rajouter du javascript dans le miniword de SPIP.
Si vous essayez directement, cela ne marche pas, il faut bien penser à mettre des commentaires html.
Par exemple (avec jQuery)

 <script type="text/javascript"> <!-- $(document).ready(function() {        $('div.details2').click(function() {         var answer = $(this).next(); }); // --> </script>

Vous ne connaissez pas SPIP, jQuery ou TinyMCE ?

• SPIP
• JQuery (Javascript : Write Less, Do More)
• TinyMCE Javascript Content Editor

2ème partie : Comment est structuré un plugin ?

A quoi sert un plugin jQuery ?

Un plugin jQuery permet d’ajouter des fonctionnalités sur le DOM que le framework ne permet pas actuellement. Par exemple si vous souhaitez surligner un élément quelconque du DOM, vous aimeriez bien utilisé une fonction du style jQuery('p').hilight();

Ce billet vous permet de comprendre comment faire un plugin pour faire vos propres fonctionnalitées

Squelette

Un plugin jQuery est pratiquement structuré de la même manière. En effet il existe différentes manières d’instancier la fonction qui étend l’objet. jQuery(function($){}); ou (function($){})(jQuery);. La seconde solution étant la plus utilisée.
La suite de cette article est une adaptation d’un tutoriel que vous trouverez ici

Je vais donc vous expliquer comment créer un plugin pour la fonctionnalité hilight()

Tout d’abord : la définition de la fonction
// Definition du plugin
$.fn.hilight = function() {
// on mettra le code du plugin ici
};

L’utilisation du « $ » ici est autorisé nous verrons pourquoi par la suite.

Nous allons ajouter la possibilité de gérer des options pour notre fonction.
// Definition du plugin
$.fn.hilight = function(options) {
var defaults = {
foreground: 'red',
background: 'yellow'
};
// la fonction extend() permet d'ajouter la gestion des options par défaut.
var opts = $.extend(defaults, options);
// La suite du code se placera ici
};
Nous avons donc défini deux options par défaut : « foreground » qui permettra de gérer la couleur du texte, et « background » pour la couleur du fond. De plus il nous est possible de modifier les couleurs en les précisant en argument de la fonction. Par exemple :
jQuery('#maDiv').hilight({
foreground: 'blue'
});

Ainsi le texte sera bleu.

Les variables par défaut que nous avons définies ne sont accessibles seulement par la fonction $.fn.hilight().
Nous allons maintenant rendre public ce tableau afin d’accéder rapidement aux variables par défaut pour les modifier avec un minimum de code.
Créons d’abord la variable du tableau :
$fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
Maintenant nous allons modifier la gestion des variables par défaut dans la fonction $fn.hilight()
$.fn.hilight = function(options) {
var opts = $.extend({}, $.fn.hilight.defaluts, options);
};

Grâce à cette méthode, nous pouvons directement modifier les variables par défaut avec $.fn.hilight.defaults.foreground = 'blue';.

Nous allons maintenant passer au développement de la fonction pour agir sur le texte afin de surligner ce que l’on souhaite.
Pour cela, nous allons utiliser la fonction $().css();.
Tout d’abord, il est important de noter l’utilisation de la fonction each(); qui prend en paramètre une fonction. Cette fonction permet d’appliquer notre fonction principale (hilight()) sur notre choix.
Ainsi on obtient le code suivant :
return this.each(function() {
var $this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
$this.css({
backgroundColor: o.background,
color: o.foreground
});


Passons maintenant à la normalisation en plugin jQuery.
Nous allons mettre le code défini précédemment dans la function (function ($){})(jQuery);.
Ce qui nous donne :
(function ($){
$.fn.hilight = function(options) {
var opts = $.extend({}, $.fn.hilight.defaluts, options);
return this.each(function() {
var $this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
$this.css({
backgroundColor: o.background,
color: o.foreground
});
};
$fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
})(jQuery);

Améliorations

La principale amélioration que l’on peut apporter est le débogage.
On peut ajouter une fonction dit privée à notre plugin : debug();.
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
Ainsi on peut utiliser au cours du plugin de cette manière :
(function($) {
$.fn.hilight = function(options) {
debug(this);
var opts = $.extend({}, $.fn.hilight.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
});
};
//
// private function for debugging
//
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
//
// plugin defaults
//
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
})(jQuery);


Dans le prochain article, j’expliquerai le développement d’un plugin Weather qui affiche la météo en temps réel pour une ville donnée.

Suite de la création d’un plugin

1ère partie : Qu’est-ce que jQuery ?

jQuery est une librairie JavaScript rapide et efficace éditée par John Resig. De nombreuses fonctionnalités sont disponibles comme Ajax, parcours et modification du DOM. Le site officiel de jQuery est : http://www.jquery.com. A l’heure actuelle de la rédaction de cet article, jQuery en est à la version 1.3 .

Concept de Framework

Pourquoi un framework ? La puissance d’un framework est de proposer de manière simple et facile à mettre en place en ensemble de fonctionnalités. A chaque language informatique, il existe plusieurs frameworks :

• PHP
  • Zend
  • Cake
  • Symphony
  • …
• JavaScript
  • jQuery
  • Prototype + Script.aculo.us
  • Dojo
  • …
• JSP
  • Struts
  • …
• …

Pourquoi avoir choisi jQuery ? Ayant expérimenté plusieurs développement sous Dojo et Prototype, je me suis orienté vers cette librairie pour plusieurs raisons :

• Performance : comparatif disponible sur le site de jQuery
• Mise en place simple, légèreté
• Une communauté active
• Utilisé par les plus grands du web
• FrameWork utilisé par ACTi

Je pense que ces raisons suffisent pour comprendre l’importance d’un développement avec ce framework plutôt qu’avec un autre.

Fonctionnalités et exemples

jQuery offre un panel de fonctionnalités large grâce aux plugins, mais nativement ce framework embarque une plétore de fonctionnalités pour manipuler le DOM et faire des animations sur nos pages web.
La principale fonction de jQuery est jQuery(args)
Cette fonction renvoit l’objet DOM que l’on veut récupérer. Elle peut également être simplifiée par $(args), cependant elle peut porter à conflit lors d’une utilisation avec le framework Prototype.
Par exemple la page web suivante :
<html>
<body>
<p id="bar" class="foo"><a href="#">Lorem</a> Ipsum dolor sit <span style="text-decoration:underline;">amet</span></p>
<p class="foo">Consectatur icque men</p>
<p>Thea sec niom</p>
</body>
</html>

Quelques exemples de sélections :
jQuery('p') => renvoit un tableau avec les objets DOM des trois paragraphes

jQuery('p.foo') => renvoit un tableau avec les objets DOM des paragraphes dont la classe est « foo »

jQuery('p#bar') => renvoit un tableau avec les objets DOM des paragraphes dont l’id est « bar »

Des sélections plus complexes peuvent être réalisées :
jQuery('a', jQuery('p#bar')) ou jQuery('p#bar a') => renvoit un tableau avec les objets DOM des liens dans les paragraphes dont l’id est « bar »
jQuery('a[href="#]') => renvoit un tableau avec les objets DOM des liens qui ont pour destination « # »
Comme dit précédemment, la fonction jQuery() est la base du framework, cette fonction renvoit un objet DOM étendu, ainsi toutes les fonctions du framework jQuery et de ses plugins étendent cet objet.

Dans la suite de l’article, je présenterais seulement 3 fonctions : css(), attr(), ajax() utilisées par le plugin « Weather ». Toutes les fonctionnalités du framework sont disponibles sur le site officiel de jQuery et agrémentées d’exemples. Je vous conseille vivement d’y aller.

La fonction css(arg1, arg2). Celle-ci fonctionne de la manière suivante, si un seul paramètre est précisé, la fonction renvoit la valeur du paramètre css choisi. Si deux sont précisés, la fonction modifie la propriété css selectionnée.
Exemple :

jQuery('p span').css('text-decoration') va renvoyer « underline ». Si l’on execute : jQuery('p span').css('text-decoration', 'none'), la page web sera la suivante :
<html>
<body>
<p id="bar" class="foo"><a href="#">Lorem</a> Ipsum dolor sit <span style="text-decoration:none;">amet</span></p>
<p class="foo">Consectatur icque men</p>
<p>Thea sec niom</p>
</body>
</html>

La fonction attr(arg1, arg2). Celle-ci fonctionne de la même manière que css(),ainsi si un seul paramètre est précisé, la fonction renvoit la valeur de l’attribut choisi. Si deux sont précisés, la fonction modifie l’attribut sélectionné.
Exemple :

jQuery('p#bar a').attr('href') va renvoyer « # ». Si l’on execute : jQuery('p#bar a').attr('href', 'http://www.acti.fr'), la page web sera la suivante :
<html>
<body>
<p id="bar" class="foo"><a href="http://www.acti.fr">Lorem</a> Ipsum dolor sit <span style="text-decoration:none;">amet</span></p>
<p class="foo">Consectatur icque men</p>
<p>Thea sec niom</p>
</body>
</html>

La fonction ajax() possède un seul argument écrit sous forme de tableau clés-valeurs. Elle renvoit un objet XMLHTTPRequest.
Exemple : $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); Les différentes clés possibles sont :

• type : POST ou GET
• url : url pour récupérer l’information (page interne au domaine)
• data : les informations à passer en GET ou en POST
• dataType : le type des informations
• cache : true ou false
• async : true ou false pour un mode asynchrone ou non
• success : la valeur est forcément une fonction dont le premier argument est la réponse xml
• error : la valeur est forcément une fonction dont l’argument est l’erreur sous un format textuel
• …

La suite dans le prochain billet

Ce tutoriel a pour but de présenter le développement d’un plugin « Weather (en cours de développement) » avec le framework jQuery 1.3 (fonctionne également avec 1.2.6).
Ce plugin permet de voir plusieurs fonctionnalités de jQuery comme css(), ajax(), attr(), …

Ce tutoriel est composé de 5 articles se décomposant de la manière suivante :

1er billet :  »Introduction »
2ème billet : « Présentation de jQuery »
3ème billet : « Comment commencer un plugin ? »
4ème billet : « Développement d’un plugin exemple : Weather »
5ème billet : « Evolutions et téléchargement »

Le sommaire de ce tutorial est le suivant :

1. Qu’est-ce que jQuery ?
   1. Concept de Framework
   2. Fonctionnalités et Exemples
2. Comment est structuré un plugin ?
   1. Squelette
   2. Améliorations
3. Le plugin Weather
   1. Fonctionnalités
   2. Fichiers
   3. Dépendances
   4. Fonction principale
   5. Flux RSS
      1. Récupération
      2. Parsing
   6. Fonctions annexes
      1. makeWeather()
      2. makeDayNight()
      3. Les classes Cloud, Fog, Rain, Hail
4. Evolutions futures
   1. Thunder
   2. Sound
5. Liens et téléchargement

La suite dans le prochain billet…