Dodanie CSS i JS do formularza z załącznikami

36

Muszę dodać do formularza niektóre zewnętrzne i lokalne pliki CSS i JavaScript, ale nie mogę znaleźć odpowiedniego sposobu, aby to zrobić. Czy po prostu dodam ścieżki i adresy URL do plików JS i CSS?

Zakładam $form['#attached']['css'][]i $form['#attached']['js'][]są to właściwe miejsca, aby to zrobić, więc są one ponownie ładowane przy przebudowach formularzy. Wydaje mi się, że czegoś mi brakuje.

Vintorg
źródło

Odpowiedzi:

71

Czy przeglądałeś dokumentację?

Dołącz CSS i JS do formularza

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

Pliki zewnętrzne

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

Można również załadować zewnętrzne pliki „js” i „css”. Na przykład:

$build['#attached']['js']['http://code.jquery.com/jquery-1.4.2.min.js'] = array('type' => 'external');
Alex Gill
źródło
Mam. Czy możesz mi powiedzieć, gdzie zawiera odniesienia do obsługi zewnętrznych plików CSS?
vintorg
Przejdź do api.drupal.org/api/drupal/includes%21common.inc/function/… i wyszukaj „Zewnętrzne”.
Alex Gill
2
Tylko uwaga - możesz dodać JavaScript, jak opisano powyżej, do konkretnego formularza, dodając funkcję o nazwie <module name>_form_<form id>_alterdo modułu. Znalezienie identyfikatora formularza opisano tutaj: drupal.stackexchange.com/questions/5802/…
Nux
1
Ten przykład jest trochę zły, ponieważ zakładasz, że będzie to JEDYNY załącznik w formularzu!
doublejosh,
6
Komentarz przez doublejosh oznacza: zwykle należy dołączyć do tablicy, a nie ją zastąpić. Przykładem powinno być $form['#attached']['css'][] = drupal_get_path('module', 'ajax_example') . '/ajax_example.css';itd.
tanius
11

Oto metoda dodawania wbudowanego CSS do formularzy ...

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

Zauważ, że powinieneś dodać do tablicy css zamiast ją zastępować . Oznacza to, że powinieneś użyć: ['css'][] =zamiast ['css'] =unikać zgniatania innych dodatków.

doublejosh
źródło
6

Oto jeden ze sposobów, aby to zrobić za pośrednictwem. wywoływanie funkcji za pomocą #after_buildwłaściwości Po prostu podaj identyfikator formularza w przypadku przełącznika.

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

Możesz także wykonać ten dobry samouczek Dodawanie css i js do formularzy drupal

Mam nadzieję że to pomoże. :)

Prerit Mohan
źródło
Chociaż nadal działa to w Drupal 7, wydaje się , że jest to hack D6 , potrzebny, ponieważ #attachednie istniał w D6 .
tanius
Nie należy używać drupal_add_jsw formularzu. Skończy się problem ze stanem sprawdzania poprawności.
doublejosh,
1
@doublejosh To jest trzyletnia odpowiedź :)
Prerit Mohan