Hinzufügen von CSS und JS zu Formularen mit Anhängen

36

Ich muss einem Formular einige externe und lokale CSS- und JavaScript-Dateien hinzufügen, finde aber anscheinend nicht den richtigen Weg, dies zu tun. Füge ich einfach die Pfade und URLs für die JS- und CSS-Dateien hinzu?

Ich gehe davon aus $form['#attached']['css'][]und bin $form['#attached']['js'][]der richtige Ort, um dies zu tun, so dass sie bei Formularwiederherstellungen neu geladen werden. Mir scheint etwas zu fehlen.

vintorg
quelle

Antworten:

70

Haben Sie sich die Dokumentation angesehen?

Fügen Sie CSS und JS zum Formular hinzu

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';

Externe Dateien

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

Es können auch externe "js" - und "css" -Dateien geladen werden. Beispielsweise:

$build['#attached']['js']['http://code.jquery.com/jquery-1.4.2.min.js'] = array('type' => 'external');
Alex Gill
quelle
Ich habe. Können Sie mir sagen, wo auf externe CSS-Dateien verwiesen wird?
Vintorg
Gehen Sie zu api.drupal.org/api/drupal/includes%21common.inc/function/… und suchen Sie nach 'External'.
Alex Gill
2
Nur eine Anmerkung - Sie können JavaScript wie oben beschrieben zu einem bestimmten Formular hinzufügen, indem Sie <module name>_form_<form id>_alterIhrem Modul eine Funktion mit dem Namen hinzufügen . Die Formular-ID finden Sie hier: drupal.stackexchange.com/questions/5802/…
Nux
1
Dieses Beispiel ist ein bisschen schlecht, weil Sie davon ausgehen, dass dies der EINZIGE Anhang im Formular ist!
DoubleJosh
6
Kommentar von DoubleJosh bedeutet: Normalerweise sollte man an das Array anhängen, anstatt es zu ersetzen. Das Beispiel sollte also $form['#attached']['css'][] = drupal_get_path('module', 'ajax_example') . '/ajax_example.css';usw sein.
Tanius
11

Hier ist die Methode zum Hinzufügen von Inline-CSS zu Formularen ...

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

Beachten Sie, dass Sie das CSS-Array hinzufügen und nicht ersetzen sollten . Das heißt, Sie sollten Folgendes verwenden: ['css'][] =anstatt ['css'] =zu vermeiden, dass andere Zusätze gequetscht werden.

doublejosh
quelle
6

Hier ist eine Möglichkeit, dies zu tun, die über erfolgt. Aufrufen einer Funktion mit #after_buildproperty. Geben Sie einfach Ihre Formular-ID im Schaltergehäuse ein.

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; 
}

Sie können auch diesem guten Tutorial folgen. Hinzufügen von CSS und JS zu Drupal-Formularen

Hoffe das hilft. :)

Prerit Mohan
quelle
Während dies in Drupal 7 noch funktioniert, scheint es sich um einen D6-Hack zu handeln , der benötigt wird, da er #attachedin D6 nicht vorhanden war .
Tanius
Sie sollten nicht drupal_add_jsauf einem Formular verwenden. Sie werden Probleme mit dem Validierungsstatus haben.
DoubleJosh
1
@ Doublejosh Dies ist eine drei Jahre alte Antwort :)
Prerit Mohan