web-dev-qa-db-fra.com

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

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.

Y a-t-il une autre façon, ou devrais-je simplement essayer le fichier template.php?

7themingjavascript
24
Ben

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');
}
36
googletorp

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

4
LSU_JBob
  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 Référence de l'API Form .
  2. Une fois que votre formulaire est construit et que vous pouvez lui soumettre des valeurs, le traiter, etc., téléchargez et lisez le code dans le module contrib Date . 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.
4
amateur barista

Merci googletorp d'avoir répondu à cette question.

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

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.js, vous devez ajouter cette ligne:

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

J'espère que c'est utile.

3
Sumoanand

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');
}
2
mtro

L'ajout d'un hook de prétraitement dans le fichier template.php N'a pas fonctionné pour moi.

Je mets simplement drupal_add_library('system', 'ui'); dans le fichier template.php Tout seul, ça marche.

2
user17418