jQuery UI pour SPIP

Introduction

De plus en plus de plugins intègrent dans leurs fichiers des morceaux de la bibliothèque jQuery UI et ce dans des versions plus ou moins à jour imposant ainsi de temps à autre plusieurs versions de cette bibliothèque en fonction du nombre de plugins installés sur un site (voir désormais jQuery UI pour SPIP 3).

Afin de pallier ce problème, deux solutions sont possibles :

  • L’ajout de la bibliothèque en question dans le core de SPIP (très certainement dans une prochaine version)
  • La création d’un méta plugin s’occupant de gérer correctement cette bibliothèque et sur lequel l’ensemble des plugins ayant besoin d’une partie de celle-ci puisse se reposer. C’est l’objet du plugin « jQuery UI pour SPIP ».

Historique

Le plugin jQuery UI a été développé en tant que plugin pour SPIP 2
Il a été intégré comme plugin-dist dans SPIP 3
A partir de SPIP 4 c’est de nouveau un plugin autonome

Son fonctionnement

Après l’avoir activé, vous pouvez personnaliser le plugin via sa page de configuration (disponible si vous avez installé le plugin CFG). Celle-ci liste l’ensemble des sous-bibliothèques disponibles (droppable, draggable, tabs....).

Il vous suffit de sélectionner celles dont vous avez besoin et elles seront automatiquement ajoutées au pipeline jquery_plugins de SPIP (plus d’informations sur le site Programmer avec SPIP) qui est lui même utilisé par la balise #INSERT_HEAD (Cela signifie donc que vos squelettes doivent utiliser cette balise pour que le plugin fonctionne).

Dans le cas où vous souhaitez utiliser une sous-bibliothèque qui dépend d’autres sous-bibliothèques de jQuery UI (comme Tabs par exemple), les dépendances seront automatiquement sélectionnées à la validation du formulaire de configuration. Il n’est donc pas nécessaire de les vérifier.

Utilisation depuis un autre plugin

Si vous souhaitez développer un plugin qui nécessite une ou plusieurs sous-bibliothèques de jQuery UI, la démarche est relativement simple.

Tout d’abord, il est nécessaire d’ajouter un élément <necessite ... /> à votre plugin.xml (cf documentation) comme ceci :

<necessite id="jqueryui" version="[1.8.5;]" />

Ensuite, le plugin SPIP jQuery UI déclarant son propre pipeline d’ajout de sous-bibliothèques, jqueryui_forcer, il suffit d’ajouter les sous-bibliothèque que l’on souhaite utiliser comme ceci (dans l’exemple, on utilise monplugin comme préfixe de notre plugin imaginaire, on souhaite utiliser la sous-bibliothèque jquery.ui.tabs) :

function monplugin_jqueryui_forcer($scripts){
    $scripts[] = "jquery.ui.tabs";
    return $scripts;
}

La sous-bibliothèque « tabs » nécessite en fait deux autres sous-bibliothèque normalement :

  • jquery.ui.core
  • jquery.ui.widget

Il n’est donc pas nécessaire de les déclarer car le plugin le fera automatiquement.

Si après avoir activé notre nouveau plugin on se dirige vers la page de configuration du plugin jQuery UI, on se rend compte que les 3 sous-bibliothèques activées par le plugin « monplugin » sont cochées et non désactivables, évitant ainsi tout problème potentiel de désactivation manuelle d’une sous-bibliothèque.

Liste des sous-bibliothèques disponibles

Documentation et démonstrations : http://jqueryui.com/demos/

SPIP 2.1SPIP 2.0
jquery.ui.datepicker

jquery.ui.accordion

jquery.ui.autocomplete

jquery.ui.autocomplete

jquery.ui.button

jquery.ui.dialog

jquery.ui.dialog

jquery.ui.draggable

jquery.ui.droppable

jquery.ui.droppable

jquery.ui.mouse

jquery.ui.progressbar

jquery.ui.resizable

jquery.ui.selectable

jquery.ui.slider

jquery.ui.sortable

jquery.ui.tabs

jquery.effects.blind

jquery.effects.bounce

jquery.effects.clip

jquery.effects.drop

jquery.effects.explode

jquery.effects.fold

jquery.effects.highlight

jquery.effects.pulsate

jquery.effects.scale

jquery.effects.shake

jquery.effects.slide

jquery.effects.transfer

ui.accordion

ui.datepicker

ui.dialog

ui.dialog

ui.dialog

ui.draggable

ui.droppable

ui.droppable

ui.resizable

ui.selectable

ui.slider

ui.sortable

ui.tabs

effects.blind

effects.bounce

effects.clip

effects.drop

effects.explode

effects.fold

effects.highlight

effects.pulsate

effects.scale

effects.shake

effects.slide

effects.transfer

Discussion

2 discussions

Ajouter un commentaire

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
  • 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 apparaît.

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.

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom