Utilisation de l'interface utilisateur jQuery intégrée dans mon thème

25

Chaque page de mon thème devra utiliser l'interface utilisateur jquery. Je sais qu'il est inclus avec Drupal 7, mais je ne peux pas vraiment déchiffrer la documentation trop technique de Drupal. Il semble que la seule façon de le faire soit avec le fichier template.php. Mais comme je ne comprends pas ce fichier, j'essaie d'éviter de le faire de cette façon.

Existe-t-il une autre méthode ou dois-je simplement essayer le fichier template.php?

7  theming  javascript 
— Ben
source
Qu'essayez-vous de faire? Toutes les fonctions de l'interface utilisateur jquery et ce qui ne devrait pas être disponible pour vous. Exécuter du code JS personnalisé sur chaque page? L'exécuter sur une page spécifique? un événement spécifique? Il existe de nombreuses façons d'exécuter JS, à savoir drupal_add_js
— LSU_JBob
J'essaie d'utiliser .datepicker () sur certains champs qui apparaissent dans chaque page de mon thème. Peut-être encore quelques trucs plus tard.
— Ben
@Ben N'oubliez pas d'attribuer la prime si une réponse a résolu votre problème.
— googletorp
@googletorp Désolé, ma première prime. Bounty décerné.
— Ben
J'ai l'impression que beaucoup de réponses omettent la dernière étape, qu'une fois que vous incluez drupal_add_library ('system', 'ui.button') ou autre, vous devez ajouter une ligne ou deux de javascript à votre thème qui invoque réellement ledit brancher.
— Ryan Price

Réponses:

36

Ajouter JS à une page n'est vraiment pas si difficile, même si vous devez utiliser php.

Pour les fichiers JS normaux, vous pouvez faire quelque chose comme ça

drupal_add_js($path_to_js)

Drupal a cependant enregistré jQuery UI dans des bibliothèques, ce qui facilite l'ajout de fichiers JS et CSS pour certains plugins jQuery UI. Cela peut être fait en utilisant

drupal_add_library($module, $library);

Tous les plugins jQuery UI existent dans le module système, vous pouvez donc faire

drupal_add_library('system', 'ui');

ou

drupal_add_library('system', 'ui.accordion');

Certains de ces plugins ont des dépendances car ils utilisent d'autres plugins. Drupal gère cela très intelligemment et inclura les composants nécessaires.

Vous pouvez voir la liste complète des plugins jQuery ici . Ceci est formaté comme un tableau PHP, mais généralement la convention de dénomination est ui.PLUGIN-NAME.

Si vous devez ajouter le JS sur chaque page, vous pouvez simplement ajouter un crochet de page de prétraitement et les y ajouter. Cela ressemblerait à quelque chose comme ceci dans le fichier template.php.

function NAME_OF_THEME_preprocess_page(&$variables) {
  drupal_add_library('system', 'ui');
  drupal_add_library('system', 'ui.accordion');
  drupal_add_library('system', 'effects.highlight');
}
— googletorp
source
J'ai essayé d'ajouter exactement ce que vous avez ici (mais en utilisant mon nom de thème à la place de NAME_OF_THEME) dans template.php et cela n'a pas fonctionné. Des idées? Voici ce que j'ai: function nocturnal_preprocess_page(&$variables) { drupal_add_library('system', 'ui'); drupal_add_library('system', 'ui.datepicker'); }
— Ben
@ben Vous devez vider le cache à chaque fois que vous ajoutez une nouvelle fonction de hook ou de prétraitement. Essayez d'effacer le cache. Vous avez également besoin d'un moyen de tester si cela fonctionne, car vous n'ajoutez que des fichiers JS qui ne feront rien par eux-mêmes.
— googletorp
J'ai effacé le cache et cela devrait fonctionner sur certains champs de date qui utilisaient auparavant une interface utilisateur jquery référencée manuellement. Débogage toujours, mais ne trouve rien de mal jusqu'à présent.
— Ben
@Ben La première étape consiste à regarder la source et à voir si les fichiers ont été inclus (désactiver l'agrégation JS si elle est activée)
— googletorp
3
@googletorp: Pourriez-vous développer un peu la différence entre drupal_add_library('system', 'ui');et drupal_add_library('system', 'ui.accordion');? Le premier récupère-t-il tout ou simplement le noyau? Ai-je besoin d'une ligne pour chaque plugin que j'utilise?
— Jarl
4

avez-vous essayé le module date_popup ? fonctionne bien avec l'API de formulaire

— LSU_JBob
source
Je ne veux pas de module car le formulaire qui en a besoin est très complexe et nécessite un codage personnalisé. Il est codé en dur dans le modèle du thème. J'essaie de trouver la meilleure façon d'utiliser l'interface utilisateur jquery fournie avec Drupal. La seule façon de le faire fonctionner est de le mettre dans le dossier de mon thème et de le lier là-bas. Mais comme j'exécute plusieurs sites sur une seule installation Drupal, et que tous ces sites auront besoin de l'interface utilisateur jQuery, je voulais simplement utiliser l'interface utilisateur jQuery intégrée pour éviter le travail en double.
— Ben
vous devriez pouvoir appeler n'importe quel truc jquery ui depuis n'importe quel site et l'ajouter, c'est dans le noyau drupal. Le formulaire est-il créé avec l'API Form?
— LSU_JBob
2
Pourquoi le formulaire est-il intégré aux fichiers de modèle? ce n'est pas très dramatique ... si vous n'utilisez pas l'API de formulaire, vous manquez certains des avantages, comme la sécurité intégrée contre les attaques par injection SQL. Je recommanderais FORTEMENT de retirer vos formulaires des fichiers modèles et d'écrire un module personnalisé dans lequel vous créez les formulaires à l'aide de l'API Form. Essayez de ne pas être un cow-boy. Dans tous les cas, vous pouvez référencer javascript de n'importe où en utilisant drupal_add_js, quelque chose comme ceci drupal_add_js ('/ misc / ui / jquery.ui.core.min.js', 'file'); AND drupal_add_js ('/ misc / ui / jquery.ui.datepicker.js', 'file');
— LSU_JBob
3
Créez le formulaire dans un module personnalisé à l'aide de l'API Form, puis dans les fichiers tpl, appelez render (drupal_get_form ('form_id')); Je promets que le formulaire api, peut-être avec du javascript personnalisé, peut gérer toutes les exigences complexes que vous avez. J'ai l'impression que vous ne faites que vous compliquer les choses en essayant de regrouper toutes ces fonctionnalités dans un fichier tpl. C'est techniquement la couche de thème, donc ce n'est pas la meilleure pratique d'y insérer de gros morceaux de code back-end fonctionnel.
— LSU_JBob
3
Je pense qu'il dit CRÉER un module. Les choses fonctionnelles, comme les formulaires, appartiennent à des modules. L'API Form vous permet de créer tout type de formulaire que vous pouvez imaginer dans votre propre module personnalisé. Le thème doit être indépendant de la fonctionnalité dans la plupart des cas. Cela vous donnera plus de flexibilité sur la route.
— Jonathan Rowny
4
  1. Refactorisez votre formulaire codé en dur dans le fichier .tpl dans une implémentation d'API Form. Comme l'a dit @LSU_JBob, il n'y a aucune raison de créer un formulaire sans utiliser FAPI. Je vous recommande de lire le Guide de démarrage rapide de l'API Form et de mettre en signet la page de référence de l'API Form .
  2. Une fois que votre formulaire a été créé et que vous pouvez lui soumettre des valeurs, le traiter, etc., téléchargez et lisez le code dans le module Date contrib. La date est utilisée pour fournir le type de popup de date que vous souhaitez créer, mais pour CCK dans D6 et Core Fields dans D7. Bien que vous ne cherchiez pas à travailler avec des champs, le module Date utilise l'interface utilisateur JQuery pour accomplir ce que vous essayez de faire. Ce module devrait vous donner un exemple solide.
— barista amateur
source
Merci. Ces liens sont utiles. Je n'aime pas vraiment entrer dans le PHP, mais je suppose que pour faire exactement ce que je veux faire dans ce cas, je dois le faire. Je vais probablement le garder dans le fichier tpl pour gagner du temps, car je n'ai pas le temps d'apprendre Drupal PHP pour le moment. Bon conseil de tout le monde.
— Ben
3

Merci d' googletorpavoir répondu à cela.

Juste pour ajouter, si les choses ne sont toujours pas très claires concernant l'activation des plugins d'interface utilisateur .

Veuillez noter que lorsque vous mentionnerez: drupal_add_library('system', 'ui');
Cela n'activera PAS automatiquement tous les plugins ui.

Vous pouvez trouver la liste des plugins jquery ui disponibles dans drupal 7 ici: /misc/ui/

Pour activer un plugin perticulaire, par exemple:, jquery.ui.slider.min.jsvous devez ajouter cette ligne:

drupal_add_library('system', 'ui.slider');

J'espère que c'est utile.

— Sumoanand
source
2

J'ai eu ce problème récemment. Quelqu'un m'a donné son module personnalisé pour forcer l'interface utilisateur JQuery à se charger sur chaque page. Vous pouvez le recréer simplement. Tout d'abord, installez jquery_update et assurez-vous que cela fonctionne. Ensuite, créez et activez ce module:

Créez un dossier dans le chemin / vers / modules nommé 'jquery_force'.

A l'intérieur, ajoutez deux fichiers:

jquery_force.info :

name = JQuery UI Force
description = Forces JQuery UI to always load
dependencies[] = jquery_update
package = User Interface
core = 7.x
files[] = jquery_force.module

jquery_force.module :

<?php
/**
 * @file jquery_force.module
 * TODO: Enter file description here.
 */

/**
 * Implements hook_init().
 */
function jquery_force_init() {
    drupal_add_library('system', 'ui');
}
— mtro
source
2

L'ajout d'un hook de prétraitement dans le template.phpfichier n'a pas fonctionné pour moi.

Je mets simplement drupal_add_library('system', 'ui');dans le template.phpfichier par lui-même, fonctionne.

— user17418
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.