jQuery UI pour SPIP

Publié le : 29 octobre 2010 – Dernière modification le 7 juin 2023 – par b_b, cy_altern, kent1 – 117 commentaires

1
2
3
4
5
33 votes

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

5 ans 1 an 3 mois Sans limite
par date
Filtrer

31 discussions

  • 9
    jerome

    Bonjour
    J’essaie d’insérer le plugin jqueryui dans spip3. Celui-ci est déjà présent mais je n’arrive pas à l’activer dans les pages publiques. (core, widget position et autocomplete)

    Dans mes_options.php j’ai essayé différentes solutions comme stipulées dans la doc ici :
    http://programmer.spip.org/Qu-est-ce-qu-un-pipeline

    $GLOBALS[’spip_pipeline’][’insert_head’] .= « |prefixPlugin_jquery_plugins » ;

    function prefixPlugin_jquery_plugins($scripts)
    $scripts[] = « javascript/ui/jquery.ui.core.js » ;
    return $scripts ;

    ou cela :
    function insert_jqueryui($jqueryui_plugins)
    $jqueryui_plugins[] = « javascript/ui/jquery.ui.core » ;
    return $jqueryui_plugins ;

    Dans les cas ci-desssus, il n’aime pas les [].

    Quelle est la bonne méthode pour insérer jquery.ui.XXX dans les pages publiques ? si possible avec la gestion des dépendances.
    Si seulement, on pouvait choisir les éléments de UI à insérer depuis la gestion des plugins de spip3 !!!

    Merci d’avance pour vos réponses et pour le travail réalisé par les différents contributeurs.
    Jérôme

    • b_b

      Salut, en collant ça dans tonplugin_pipelines.php ça devrait le faire (et en déclarant l’appel du pipeline depuis la paquet.xml) :

      function tonplugin_jqueryui_plugins($plugins){
	$plugins[] = "jquery.ui.core";
	return $plugins;
}

      ++

    • jerome

      Quelle rapidité pour répondre !

      En fait, ce qu’il me faut, c’est la méthode pour insérer du jqueryUI dans mes squelettes du site publique lorsque je n’utilise pas de plugin.

      une insertion dans mes_options.php ?

      Merci d’avance

    • b_b

      Comme l’indique la très bonne doc de programmer.spip.org :

      http://programmer.spip.org/Qu-est-ce-qu-un-pipeline

      $GLOBALS['spip_pipeline']['jqueryui_plugins'] .= "|ton_bouzin";
 
function ton_bouzin($plugins) {
        $plugins[] = "jquery.ui.core";
        return $plugins;
}

      ++

    • jerome

      Oui, j’ai vu et ça marche pour insérer une "string dans le flux" comme dans l’exemple, mais là j’ai ce message :
      « Fatal error : [] operator not supported for strings in /data/projects/default/html/routage/config/mes_options.php on line 24 »

      mon code :
      « $GLOBALS[’spip_pipeline’][’insert_head’] .= "|insert_jqueryui" ;

      function insert_jqueryui($jqueryui_plugins)
      $jqueryui_plugins[] = "javascript/ui/jquery.ui.core" ;
      /* $plugins[] = "javascript/ui/jquery.ui.widget" ;
      $plugins[] = "javascript/ui/jquery.ui.position" ;
      $plugins[] = "javascript/ui/jquery.ui.autocomplete" ;*/
      return $jqueryui_plugins ;
       »
      j’ai essayé aussi :

      « $GLOBALS[’spip_pipeline’][’jqueryui_plugins’] .= "|insert_jqueryui" ; »

    • b_b

      Et si tu essayes avec le code que je te propose ?

      $GLOBALS['spip_pipeline']['jqueryui_plugins']

      et non

      $GLOBALS[’spip_pipeline’][’insert_head’]

    • jerome

      oui, c’est ce que j’ai précisé en fin de mon message :

      j’ai essayé aussi :
      « $GLOBALS[’spip_pipeline’][’jqueryui_plugins’] .= "|insert_jqueryui" ; »

    • b_b

      Comme l’indique la page de doc que je t’ai pointé :

      À noter que SPIP utilise un cache des pipelines utilisés et que toute nouvelle déclaration nécessite de recalculer ce cache. Cela se fait en visitant la page « Gestion des plugins » dans l’espace privé (?exec=admin_plugin).

      Je viens de tester le code que je t’ai donné et il fonctionne parfaitement.

    • jerome

      Merci pour tes réponses. Je suis donc reparti de zéro et refaisant toute l’installation et en razant mes essais et modifications dans l’appel du pluginUI et c’est OK

      Pour résumé, voici le code ajouté dans mes_options.php pour ajouter « autocomplete » dans mes squelettes :

      $GLOBALS['spip_pipeline']['jqueryui_plugins'] .= "|insert_jqueryui";
function insert_jqueryui($jqueryui_plugins) {
     $jqueryui_plugins[] = "jquery.ui.core" ;
     $jqueryui_plugins[] = "jjquery.ui.widget" ;
     $jqueryui_plugins[] = "jquery.ui.position" ;
     $jqueryui_plugins[] = "jquery.ui.autocomplete" ;
     return $jqueryui_plugins ;
}
    • b_b

      Pour info, pas la peine de demander à SPIP d’insérer les dépendances il le fera tout seul. Donc cela devrait suffire :

      $GLOBALS['spip_pipeline']['jqueryui_plugins'] .= "|insert_jqueryui";
function insert_jqueryui($jqueryui_plugins) {
    $jqueryui_plugins[] = "jquery.ui.autocomplete" ;
    return $jqueryui_plugins ;
}

      Et hop ;)

    Répondre à ce message

  • pamillet

    bonjour,

    je ne sais pas si le pb suivant est lié à jqueryui ou pas, mais j’ai vu plusieurs questions sur des problèmes de version dans les questions sur ce site...

    Voila donc ce que je constate
    -  spip mutualisé avec plusieurs sites utilisant des plugins en commun et d’autres spécifiques à certains site
    -  SPIP 2.1.10 [17657]
    -  des sites sous Sarka-SPIP 3.0.4 [40664] ou IJQUERY 1.8.16 fonctionne
    -  et le site qui me pose pb en ZPIP 1.7.14 et theme HarvestField 1.0

    Dans ce dernier, je vois le plugin IJQUERYUI en version 1.6... alors que les plugins sont bien sûr dans le répertoire mutualisé spip/plugin et donc le même pour tous les sites...

    résultat, impossible d’installer le noizetier en complément de zspip, puisqu’il me demande ijquery en 1.8.16...

    j’ai bien sûr vidé le cache et même supprimer le répertoire tmp/cache de ce site en ftp.. rien n’y fait...

    d’ou ma question. ou la page http://monspip/ecrire/?exec=admin_plugin&voir=tous&actualise=1 prend la version d’un plugin installé ? Comment comprendre le fichier plugin.xml de IJQUERYUI qui contient deux parties, une pour spip2.0 l’autre pour spip2.1

    tout se passe comme s’il croyait que j’étais sur un spip 2.0.... J’ai essayé de modifier le fichier plugin.xml en ne gardant que la partie spip2.1, ca génère une erreur et il ne voit plus le plugin...

    merci d’avance d’une piste...

    pam

    Répondre à ce message

  • 3
    mbourlier

    Bonjour,
    Merci tout d’abord pour votre travail.
    Je suis sous SPIP 2.1.11, sarka-spip 3.1.0 et j’utilise certains outils du couteau suisse. Je viens de m’apercevoir que les icônes typographiques des outils « smileys », « tout en couleurs » et les deux icônes « colorer le texte » et « colorer le fond » disparaissaient quand jQuery UI était activé. Une fois le plugin désactivé, ces icônes réapparaissent. Problème relativement récent, mais je ne sais s’il faut l’attribuer à jQuery. Étrange, non ?
    Pouvez-vous éclairer ma lanterne ?
    Cordialement
    M. BOURLIER

    Pour voir si nécessaire Découvrir l’autre, l’ailleurs, soi

    • mbourlier

      Oups !
      Je me réponds à moi-même !
      Résolu semble-t-il en cochant l’option « ne pas charger les CSS de jQuery-UI ».
      Désolé

      M. BOURLIER

    • mbourlier

      Par contre depuis la même période, les badges de Social Tags ne s’affichent plus sous le bloc de titre des articles. Cela peut-il avoir un rapport ?
      Merci

      M. BOURLIER

    • mbourlier

      Ben non :-(
      Fausse bonne nouvelle, les icônes sont à nouveau disparues après un vidage du cache. Elles réapparaissent quand JQuery UI est désactivé !
      J’y perds mon latin ! (le peu que j’aie)

      M. BOURLIER

    Répondre à ce message

  • 3
    martin

    Bonjour,
    juste pour signaler que le plugin charge tous les styles, même quand on lui demande « ne pas charger les CSS de jQuery-UI » dans l’interface de config.

    cordialement,

    MG

    • b_b

      Salut, sur quelle version de SPIP rencontres-tu le problème ?

    • martin

      C’est sur un spip 2.1.8, avec la toute dernière version du plugin. Le seul moyen que j’ai trouvé c’est de renommer le fichier css du plugin en ajoutant .cssOFF à la fin.

    • b_b

      Salut, je viens de tester chez moi sur un SPIP 2.1.11 avec le plugin à jour et il ne charge pas toutes les css par défaut mais uniquement ui.core.css et ui.theme.css.

      Par contre, il y a bie un problème dans la prise en compte de la configuration « ne pas charger les CSS de jQuery-UI ». Je corrige ça dans la journée afin que lorsque cette config est active aucune css ne soit chargée.

      Merci pour le signalement du bug ++

    Répondre à ce message

  • 11
    Pierre

    Bonjour,
    Je viens de faire une installation fraiche d’un spip 2.1.10, Saisies 1.14.0 et jQuery UI 1.8.16, j’ai basculé une maquette fonctionnelle (intégrant jquery et jqueryUI) dans mon dossier squelettes, refait les bons liens, supprimé mes propres appels à jquery et jqueryUI et mis en place #INSERT_HEAD .. ça ne marche plus. Etant donné que j’utilise un effet un peu spécial (scale), je me pose la question « est-il activé » ? La doc parle d’une page de config ... problème pour moi, je n’ai pas cette page de config, introuvable ! On y accède comment ?
    Autre truc qui me parait bizarre, dans mon head j’ai bien des appels aux css de jqueryUI mais je ne vois pas d’appel à la librairie elle-même ... donc j’en déduit que je dois avoir un pbm d’activation ... mais ou ???
    Mci de votre avis. Pierre.

    • b_b

      Salut, il faut installer le plugin CFG pour accéder à la page de configuration du plugin jQuery UI. Je viens d’ajouter l’info à la doc.

      ++

    • Pierre

      Slt !
      Voilà qui est rapide !!! Merci pour la réactivité ! J’ai toujours un souci mais ça progresse. J’ai mis CFG, j’ai bien une page de config maintenant. Mais quand j’y suis j’ai une erreur :

      Aucun champ trouvé dans config_jqueryui

      Quand je regarde la source du site public, j’ai toujours mes appels aux css de UI mais je ne vois toujours pas d’appel à la librairie. Bizarre.
      J’ai bien sûr tenté de dévalider/revalider les 3 plugins.
      Pierre.

    • b_b

      Ha oui, si je me souviens bien saisies ne nécessite pas forcément le plugin spip-bonux alors que les saisies utilisées dans la page de config le nécessitent. Installe spip-bonux et ça devrait aller.

      ++

    • Pierre

      Slt
      Dsl, même résultat, y compris après devalidation/revalidation des plugins. Le message d’erreur dont je parlais est toujours là quand je clique sur « enregistrer » dans CFG. Et de toutes façons à gauche j’ai d’entrée le message « Aucun champ trouvé dans jqueryui ». Quand je clique sur les « + » devant jqueryui ou plugins, les listes sont vides ...
      Je pense qu’en fait jqueryUI n’est pas appelé ou installé. Quand je regarde la source du site privé ou du site public, j’ai l’appel aux css de UI, j’ai l’appel de la lib jquery mais pas d’appel pour jqueryUI. Problème de droits sur le répertoir plugin peut-être ?
      Pierre.

    • Pierre

      Précisions :
      -  je viens de réinstaller tous les plugins pour voir, idem (selon uen autre méthode, en FTP vers mon serveur local plutot qu’en glisser-deposer sur le partage, qui peut generer des problèmes de droits), c’est pareil.
      -  j’ai tout supprimé et j’appelle la librairie directement dans un dossier à moi, tout fonctionne. Donc mes scripts sont ok, mes appels sont ok (autres js et css), j’ai apparemment vraiment un pbm avec le plugin en lui-même. (j’utilise toujours #INSERT_HEAD mais j’appelle moi-même UI).
      Pierre.

    • b_b

      Ha je vois le problème, il reste un bug suite aux derniers changements dans le plugin. Je corrige ça dans la journée et le zip sera dispo dans l’heure qui suit la correction.

      ++

    • Slt
      Ok merci, je regarde en fin de journée, en attendant je continue avec mon appel direct. Au final je préfère utiliser un plugin, je trouve ça plus propre, plus intégré, plus smart, plus efficace même si appeler soi-même est plus rapide sur le moment.
      Donc une fois de plus, grand merci à toi et à tous ceux qui proposent des plugins et encore plus merci à ceux qui réagissent aussi vite :-)
      Pierre.

    • b_b

      Voilà qui devrait réparer la page de config du plugin :

      http://zone.spip.org/trac/spip-zone/changeset/51650

      Le zip sera à jour d’ici une heure au max ++

    • Nickel chrome !!!!
      Ça marche, c’est bon pour moi. Merci !
      Pierre.

    • Pierre

      Ah un détail ... J’ai coché « ne pas charger les CSS » et il semble qu’elles soient chargées quand même. Pas grave.
      Pierre.

    • b_b

      Oui le plugin utilise le thème de base qu’il embarque si aucun thème perso n’est défini dans la conf. Pour faire les choses bien, il insère ensuite les css nécessaires aux scripts activés dans la conf :

      http://zone.spip.org/trac/spip-zone/browser/_plugins_/jquery_ui/jqueryui_pipelines.php#L165

      ++

    Répondre à ce message

  • 2
    Flynn

    Bonjour,
    Etant débutant, j’aimerais avoir quelques explications qu’en à l’utilisation du pipeline jqueryui_forcer.
    Je m’explique : je développe actuellement un plugin. Jusqu’à <necessite id="jqueryui" version="[1.8.5;]" /> j’ai suivi. après, je suis un peu largué. Où doit t-on ajouter la fonction jqueryui_forcer ? Ensuite, comment doit-t’on utiliser tout ça dans le fichier php du exec(dans mon cas, je souhaite utiliser datepicker) ?
    Je vous remercie d’avance.

    Répondre à ce message

  • 2
    Yffic

    Hello

    Pas sûr, mais il me semble que les css ne sont pas chargées dans le bon ordre. D’apres les exemples fournis, on devrait avoir dans l’ordre : core, les widgets et le theme pour finir... Or, core et theme sont charges en dernier... Ca pose un probleme par exemple pour date_picker pour qui le display none sur ui-datepicker n’est pas pris en compte...

    Pour info, j’ai contourné en forcant l’ordre de chargement dans ma fonction jqueryui_forcer :
    $plugins[] = « jquery.ui.core » ;
    $plugins[] = « jquery.ui.datepicker » ;

    Mais bon, ca serait peut etre plus correct de corriger dans le plugin ?

    • b_b

      Salut Yffic, j’ai pas trop regardé cet ajout sur les themes. Je laisse cy_altern s’occuper de ça s’il est dispo, sinon hésite pas à corriger.

      ++

    • Yffic

      OK, c’est corrigé. Plus un ticket pour spip3, si la correction doit être reportée

    Répondre à ce message

  • William

    Marche nikel si on suit les pré-requis donné lors de l’installation du plugin dans la partie prive.

    Répondre à ce message

  • 5
    achille52

    Bonjour, j’obtiens cette erreur quand j’installe Jquery UI sur mon SPIP 2.1.10

    Aucun squelette saisies/_base.html n’est disponible...

    ../plugins/jquery_ui/formulaires/config_jqueryui.html

    Je précise que c’est une installation locale et que la version de Jquery est jquery-ui-1.8.9

    • b_b

      Salut, ce plugin nécessite l’installation du plugin saisies (d’ailleurs il ne devrait pas pouvoir être activé sans la présence de saisies). Il doit y avoir une erreur dans le plugin.xml, je m’occupe de ça dès que j’ai un moment.

      ++

    • b_b

      Re, je viens de vérifier sur un SPIP 2.1.10 SVN [18142] et j’obtiens l’avertissement suivant si je tente d’activer jquery ui sans avoir activé le plugin saisies :

      Impossible d'activer le plugin ../plugins/jquery_ui
Nécessite le plugin SAISIES en version minimum.

      Donc le necessite fonctionne bien, tu avais réussi à activer jquery ui sans saisies ?

      ++

    • achille52

      J’avais déjà activé le plugin Saisies avant d’installer Jquery UI, mais le message est toujours là.

    • b_b

      Tu as certainement un problème avec les fichiers du plugin saisies (problème de droits ou fichier non présent), en tout cas il n’y a pas de bug dans le plugin jquery ui de ce côté. Essaye de faire une mise à jour de tous tes plugins pour commencer.

      ++

    • achille52

      Oui, je pense que le répertoire lib est toujours en lecture seule et je n’arrive pas à supprimer l’attribut. C’est le cas quand on fait une installation locale sous Windows, je vais tester sur une autre plateforme

    Répondre à ce message

  • 6
    Yffic

    Hello

    Encore moi... encore un petit souci. Dans l’espace privé j’ai une erreur :
    « NetworkError : 404 Not Found - http://www.xxxxxxxxxxx.net/ecrire/lib/jquery-ui-1.8.9/themes/base/jquery.ui.theme.css »
    jquery...eme.css
    « NetworkError : 404 Not Found - http://www.xxxxxxxxxxx.net/ecrire/lib/jquery-ui-1.8.9/themes/base/jquery.ui.core.css »

    Dans jqueryui_insert_head, vaudrait mieux pas un chemin abolu pour que ca fonctionne dans l’espace privé et dans le public ?

    Répondre à ce message

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