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

  • 2
    Yffic

    Hello

    J’ai une erreur régulière dans mes logs privés :
    Jun 21 19:21:05 127.0.0.1 (pid 3452) Erreur - ’jqueryui_jqueryui_forcer’ non definie !
    J’ai la derniere version svn de spip 2.1.10 et des plugins contact et noizetier qui l’utilisent

    Répondre à ce message

  • fisch

    bonjour
    je désire créer une page dans le style de celle-ci :

    http://www.essentialvermeer.com/catalogue/milkmaid.html

    c’est à dire une page où l’on emploie 4 fonctions de javascript
    voir un extrait du code source de la page

     -//W3C//DTD XHTML 1.0 Transitional//EN » "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    THE MILKMAID by Johannes Vermeer



    <script type="text/javascript" src="jquery/jquery-1.2.6.pack.js"></script> <script type="text/javascript" src="jquery/jquery-ui-personalized-1.6rc2.min.js"></script> <script type="text/javascript" src="custom.js"></script> <script type="text/javascript" src="jquery/jquery.simpletip-1.3.1.min.js"></script>

    sur mon site j’ai ouvert une page « essai » http://www.stagesdepeinture.fr/spip.php?article282
    et j’ai réussi à la mettre avec le css original

    Ce que j’aimerai faire maintenant grâce à javascript (que je découvre totalement), c’est de faire « bouger » cette page de la même façon que l’original voir ci-dessus, au début de la page.

    Dans mes plugins, j’ai mis jquery_ui et c’est là où je pêche que dois-je faire maintenant ? En sachant que ce site je le monte tout seul (sauf la mise en place où quelqu’un m’a aidé pour le mettre en place) et que je ne suis pas du tout informaticien mais pas complètement une « bille » !
    Si vous allez voir mon site, fait avec spip 2.1.8, c’est plutôt la peinture mon domaine : mais bon il faut vivre avec son temps et en sachant que je n’ai plas le réflexe des jeunes , approchant la soixantaine, (donc pas né là-dedans)) et donc un peu long , pas trop, à la comprennnnnnnnette...............
    Si quelqu’un peut me donner des pistes ou si c’est pas possible de faire cela avec spip, j’attends vos éclaircissements
    Merci d’avance pour vos conseils avisés
    André Fisch
    mon site : www.stagesdepeinture.fr

    Répondre à ce message

  • 4
    PieroWbmstr

    Salut et merci de vous être penchés sur le problème ’UI’,

    Je viens à l’instant de le charger pour tester et la page de config n’est pas « compliée » par CFG (cf. image jointe). Mon système :

    -  SPIP 2.1.8 (rev. 15871)
    -  CFG 1.16.0
    -  jQuery UI 1.8.9

    De plus, ne serait-il pas intéressant de la proposer dans le fil de chargement automatique ? (il n’y est pas si je n’m’abuse).

    • b_b

      Salut, il doit te manquer le plugin saisies (jquery uy peut fonctionner sans mais pas sa page de config, à voir si on devrait l’ajouter en necessite).

      Je viens d’ajouter jquery ui au flux des plugins du chargeur auto.

      ++

    • PieroWbmstr

      Effectivement, tout marche nickel avec Saisies.
      Peut-être pas l’ajouter en ’necessite’ puisque CFG est optionnel, mais l’indiquer dans cet article ?

      Je viens d’ajouter jquery ui au flux des plugins du chargeur auto.

      Cool !

      Merci pour ce bon boulot
      ++

    • Sebvita

      Bonjour,

      J’ai le même problème que PieroWbmstr pour l’affichage de la configuration sur CFG.
      Sauf que je viens d’activer le plugin « Saisie », et ça ne change rien...

      J’ai un autre site sur lequel ça fonctionne parfaitement, et j’ai grosso-modo les mêmes plugins (hormis lecteurs multimédia,...).

      Une idée ? :S Merci par avance :-)

    • matpat

      Bonjour,

      J’avais le même soucis, dans mon cas il fallait simplement désactiver le plugins jquery UI et le réactiver.
      Salutations.

    Répondre à ce message

  • 4
    Eric

    Bonjour,

    J’ai un petit souci avec ce plugin, que j’ai installé la semaine dernière pour faire fonctionner une version plus récente du plugin Formulaire de contact avancé...

    Config actuelle :
    SPIP 2.0.9
    Formulaire de contact avancé 0.68 [44808]
    jQueryUI pour SPIP 1.8.9 [43987]

    Depuis la mise a jour, le formulaire de contact semble fonctionner correctement, par contre, sur la home de mon site j’ai un genre de slideshow d’images qui ne fonctionne plus ; J’ai a la place le message : « Please Note : You may have disabled JavaScript and/or CSS. Although this news content will be accessible, certain functionality is unavailable. »

    En débuggage avec WebDeveloper, je constate le message suivant :
    « $.support is undefined », qui pointe sur la ligne
    « $.support.minHeight=div.offsetHeight===100 ; »
    de /lib/jquery-ui-1.8.9/ui/jquery.ui.core.js

    Lorsque je désactive jqueryUI (et donc formulaire de contact avancé), mon slideshow s’affiche correctement (par contre plus le formulaire évidemment...).

    Quand je regarde la page SPIP Contrib de jQueryUI, il y a indiqué compatibilité SPIP 2.1, or je suis en 2.0 ; Est-ce que ca peut être la cause de mon problème ?
    si oui, Formulaire de contact avancé est-il compatible avec une version précédente de jQueryUI ? Comment y avoir accès en téléchargement ?

    Merci de votre aide...
    Eric

    • b_b

      Salut,

      Quelle est l’url du site en question ?

      As-tu déjà une autre version de jquery ui présente dans le head de tes pages ?

      ++

    • Eric

      www.secar.net

      effectivement je constate dans le répertoire js un fichier : jquery-1.2.6.pack.js

    • Eric

      Je n’ai toujours pas trouvé la solution a mon problème...
      Est-il possible d’avoir accès au téléchargement d’une version plus ancienne de jQueryUI ?
      Merci

    • b_b

      Salut, jquery ui 1.8.x est compatible avec jquery 1.3.2 mini. Le problème doit certainement venir du fait que tu utilises jquery 1.2.6 sur ton site. C’est pour ça que le plugin jquery ui est indiqué compatible avec spip 2.1.x car cette branche utilise aujourd’hui la version 1.4.4 de jquery.

      Deux solutions : mettre à jour ton spip ou voir avec l’auteur du plugin contact s’il est possible de mettre à disposition une version de ce plugin qui ne nécessite pas jquery ui.

      ++

    Répondre à ce message

  • 4
     ???

    Bonjour,
    j’essai d’activer ce plugin mais impossible j’ai même pas le bouton « télécharger » voir image ci joint.

    • b_b

      Salut, la réponse est dans le message d’erreur. Et oui ; parfois il faut le lires :p

      Si vous souhaitez autoriser l’installation...

      ++

    •  ???

      Je vois que vous ne comprenez pas ma question
      J’ai bien lu le message, j’ai crée un repertoire lib à la racine du site. Aprés avoir fait tout ca et constaté qu’en local je vois un bouton « télécharger » sur lequel je peux cliquer ce qui n’est pas le cas en ligne c’est pourquoi je me suis reoturné vers vous.
      Je veux juste activer le formulaire contact avancé et ya pas moyen tant que le plugin jquery n’est pas activé

    • Loiseau2nuit

      c’est pas écrit assez gros ?

      Vérifier que le serveur EST AUTORISE a écrire dans ce répertoire...

    • b_b

      Salut, le message d’erreur dit aussi qu’il faut vérifier les droits d’écriture sur le dossier lib sans quoi SPIP ne pourra pas y déposer les fichiers nécessaires... Ce répertoire est-il bien accessible en écriture pour SPIP sur votre serveur ?

    Répondre à ce message

  • 2
    manou

    Bonjour,
    j’ai un problème pour activer ce plugin j’utilise spip 2.1.8. Ou est que je dois creer le repertoir /lib ??? à la racine ?? Merci de votre réponse

    • b_b

      Salut, ce qui suit est un extrait de l’article qui précède ce forum :

      Pour cela vous devez avoir à la racine de votre site un répertoire lib/ accessible en écriture par le serveur web

      Et hop...

    • j’en suis bouche b_b :-)

    Répondre à ce message

  • 3
    Loiseau2nuit

    Hello !

    Un petit bug spotté sur une de mes install à l’instant même :

    Lors d’une update SVN sur mon site SPIP en 2.1.8, le plugin JQuery_ui s’est désactivé sauvagement et m’a déclaré « ne peux pas installer car nécessite la librairie en version 1.8.9 » (1.8.5 au moment de l’install originelle, je me suis dit, une mise à jour de la lib, c’est bien MAIS ...)

    En a résulté :

    • une désactivation sauvage de tous les plugins dépendant de JQuery_ui
    • la présence désormais simultanée de 2 version de la librairie dans le dossier /lib

    C’est un peu dommage si l’on considère que c’était justement l’écueil que l’on souhaitait éviter par l’utilisation de ce plugin. Quelqu’un aurait une piste pour gérer les transitions de version « en douceur » ?

    Merci par avance ;)

    • kent1

      Ce n’est pas un bug ... C’est la logique ...

      C’est un peu dommage si l’on considère que c’était justement l’écueil que l’on souhaitait éviter par l’utilisation de ce plugin. Quelqu’un aurait une piste pour gérer les transitions de version « en douceur » ?

      Je me demande ce que tu pensais souhaiter... Ce que l’on souhaite c’est déviter que des plugins ajoutent eux même la lib dans leur code ... et qu’ils rentrent en conflits les uns avec les autres ...

      Pour en douceur ... il faut travailler sur STEP ... mais pas grands doigts se lèvent à chaque fois qu’on en parle...

    • Loiseau2nuit

      Ce n’est pas un bug ... C’est la logique ...

      Euh... qu’est-ce à dire « logique » ???

      Je me demande ce que tu pensais souhaiter...

      je parlais du fait de se retrouver avec plusieurs versions pas forcément toutes à jour de la lib, ce qui est clairement le leitmotiv exposé dans cette contrib :-D

      Pour le reste, STEP, moi je veux bien c’est simplement que jusqu’ici ca entrait en redondance avec SVN. Après si ca peut m’éviter de voir des plugins sauter lors d’une MAJ je ne suis pas contre :-)

    • kent1

      Logique ... que ça désactive les plugins puisque le plugin en question est désactivé ...

      je parlais du fait de se retrouver avec plusieurs versions pas forcément toutes à jour de la lib, ce qui est clairement le leitmotiv exposé dans cette contrib :-D
      Pour le reste, STEP, moi je veux bien c’est simplement que jusqu’ici ca entrait en redondance avec SVN. Après si ca peut m’éviter de voir des plugins sauter lors d’une MAJ je ne suis pas contre :-)

      Jusqu’à preuve du contraire SVN est un outil de développement... pas de mise à jour en version stable ou alors à ce moment là il faut faire des tags qui empèchent des ruptures de compat... même si là ce n’est pas une rupture de compat ...

      STEP est/sera lui un outil de mise à jour basé sur des paquets et dans ce cas là ... il ira chercher automatiquement la mise à jour de la lib et s’en souciera pour toi ... Il n’y aura donc pas de désactivation ... c’est la différence avec un outil de dev qu’est SVN qui impose de vérifier par la suite ...

    Répondre à ce message

  • Alain

    CSS et plugin Jquery ui

    L’intégration du plugin et des modules se fait facilement.
    Le soucis réside dans l’application , l’appel des css prores à jquery ui...
    Il semblerait qu’il y ait une difficulté à les faire s’appliquer...

    Y a t il un procédé particulier ?

    []

    []

    La declaration semble correcte, les css sont importées mais pas actives sur les DIV des squelttes ???

    Si quelqu’un à une solution...

    Répondre à ce message

  • 5
    Ju

    Merci pour ce plugin que je plussoi de toutes mes forces.

    Mais j’ai un problème our l’installer, ui ne s’installe pas dan mon lib (pourtant, les droits sont bon). Celà doit il être fait à la main ?

    • b_b

      Salut,

      Je viens de tester l’installation du plugin et de sa libraire sur un SPIP 2.1.2 SVN [16563] mutualisé (ça fonctionne aussi sur une install sans mutu) et je n’ai pas de problème.

      Quelle version de SPIP de ton côté ?

      Le plugin est-il dans /plugins ou dans /plugins/auto ?

      Cele ne vient-il pas d’un problème de droits sur ton répertoire /lib ?

      ++

    • Ju

      Salut et merci de ta réponse.

      Je suis sous spip 2.1[16017] sur hébergement mutu.

      Mon plugin est dans auto. À préciser : il n’était pas dans ma liste de plugins, j’ai donc ajouté son URL.

      Lorsque je l’installe, j’ai le message suivant :

      Impossible d'activer le plugin ../plugins/auto/jquery_ui

    * Ce plugin nécessite la librairie jquery-ui-1.8.5
      à télécharger depuis http://jquery-ui.googlecode.com/files/jquery-ui-1.8.5.zip et à installer dans lib/

      Je clique sur télécharger (en dessous du message), et j’arrive à la page « ajouter des plugins ».

      Il me semble que les droits de min /lib sont ok.

      ++
      Ju

    • b_b

      Pour vérifier que les droits sur ton dossier /lib sont bons essaye d’installer un autre plugin qui nécessite une librairie, fancybox par exemple... Essaye aussi en déplaçant jquery ui dans /plugins au lieu de /plugins/auto.

      De mon côté je teste l’activation de juqery ui avec le plugin dans plugins/auto que je n’utilise jamais.

      ++

    • Ju

      Bonnes idées de tests, merci !.

      Avec fancy j’ai le même problème.
      J’ai vérifié les droits avec mon client FTP, c’est bon (dans le doute j’ai mis /lib en 777).
      Dans /plugins ça ne fonctionne pas non plus.

      Mon hébergement est à la ramasse. Je me demande si ça ne vient pas de là.

      Pour l’installer à la main, il suffit de dl http://jquery-ui.googlecode.com/files/jquery-ui-1.8.5.zip, dézipper et installer le contenu dans lib ?

    • Ju

      Après install manuelle dans /lib, ça fonctionne parfaitement.

      Quelle idée géniale ce plugin.

      Juste deux observations :

      -  Les fichiers JS sont intégrés parfaitement, mais pour le thème, nous devons faire comme « avant ». Est il possible d’inclure le thème ui sans avoir à ajouter les propriétés dans le fichier CSS du site ?

      -  l’item « jQuery UI complet » ne semble pas fonctionner chez moi. Je dois sélectionner les effets un par un.

      En tout cas, merci !

    Répondre à ce message

  • Nauche

    J’ai le même problème, la librairie ne s’installe pas automatiquement.

    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