Ajout de CSS et JS au formulaire avec pièces jointes

36

Je dois ajouter des fichiers CSS et JavaScript externes et locaux à un formulaire, mais je n'arrive pas à trouver le moyen de le faire. Dois-je simplement ajouter les chemins et les URL des fichiers JS et CSS?

Je suppose $form['#attached']['css'][]et $form['#attached']['js'][]sont les endroits appropriés pour le faire, ils sont donc rechargés lors de la reconstruction du formulaire. Il me semble manquer quelque chose.

Vintorg
la source

Réponses:

71

Avez-vous regardé la documentation?

Attachez CSS et JS au formulaire

http://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7#attached

$form['#attached']['css'][] = drupal_get_path('module', 'ajax_example') . '/ajax_example.css';

$form['#attached']['js'][] = drupal_get_path('module', 'ajax_example') . '/ajax_example.js';

Fichiers externes

http://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_process_attached/7

Les fichiers "js" et "css" externes peuvent également être chargés. Par exemple:

$build['#attached']['js']['http://code.jquery.com/jquery-1.4.2.min.js'] = array('type' => 'external');
Alex Gill
la source
J'ai. Pouvez-vous me dire où il fait référence à la gestion des fichiers CSS externes?
vintorg
Allez à api.drupal.org/api/drupal/includes%21common.inc/function/… et recherchez «Externe».
Alex Gill
2
Juste une note - vous pouvez ajouter JavaScript comme décrit ci-dessus à un formulaire spécifique en ajoutant une fonction nommée <module name>_form_<form id>_alterà votre module. Trouver l'identifiant du formulaire est décrit ici: drupal.stackexchange.com/questions/5802/…
Nux
1
Cet exemple est un peu mauvais parce que vous supposez que ce sera la SEULE pièce jointe sur le formulaire!
DoubleJosh
6
Commentaire de double josh signifie: il faut généralement ajouter au tableau plutôt que de le remplacer. Donc, l'exemple devrait être $form['#attached']['css'][] = drupal_get_path('module', 'ajax_example') . '/ajax_example.css';etc ..
tanius
11

Voici la méthode pour ajouter du CSS intégré aux formulaires ...

$form['#attached']['css'][] = array(
  'data' => '.my-example-element { display: none; }',
  'type' => 'inline',
);

Notez que vous devriez ajouter au tableau css plutôt que de le remplacer . Ce qui signifie que vous devriez utiliser: ['css'][] =plutôt que ['css'] =pour éviter d’écraser d’autres ajouts.

double josh
la source
6

Voici une façon de faire cela via. appeler une fonction en utilisant la #after_buildpropriété. Il suffit de passer votre identifiant de formulaire en cas de changement.

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  switch ($form_id) {
    case 'my_form':
      $form['#after_build'][] = 'mymodule_after_build';
      break;
  }
}

function mymodule_after_build($form, &$form_state) {
  $path = drupal_get_path('module', 'mymodule');
  drupal_add_js ("$path/mymodule.js");
  return $form; 
}

Vous pouvez aussi suivre ce bon tutoriel Ajouter css et js aux formulaires drupal

J'espère que cela t'aides. :)

Prerit Mohan
la source
Bien que cela fonctionne toujours dans Drupal 7, cela semble être un bidouillage de D6 , nécessaire car #attachedn’existait pas dans D6 .
tanius
Vous ne devriez pas utiliser drupal_add_jssur un formulaire. Vous allez vous retrouver avec des problèmes d'état de validation.
doublejosh
1
@doublejosh Voici une réponse vieille de trois ans :)
Prerit Mohan