Adicionando CSS e JS ao formulário com anexos

36

Preciso adicionar alguns arquivos CSS e JavaScript externos e locais a um formulário, mas não consigo encontrar a maneira certa de fazer isso. Simplesmente adiciono os caminhos e URLs para os arquivos JS e CSS?

Presumo $form['#attached']['css'][]e $form['#attached']['js'][]são os locais corretos para fazer isso, para que eles sejam recarregados nas reconstruções de formulário. Parece que estou perdendo alguma coisa.

vintorg
fonte

Respostas:

71

Você já olhou a documentação?

Anexe CSS e JS ao formulário

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

Arquivos externos

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

Arquivos 'js' e 'css' externos também podem ser carregados. Por exemplo:

$build['#attached']['js']['http://code.jquery.com/jquery-1.4.2.min.js'] = array('type' => 'external');
Alex Gill
fonte
Eu tenho. Você pode me dizer onde ele faz referência a como lidar com arquivos CSS externos?
precisa saber é o seguinte
Vá para api.drupal.org/api/drupal/includes%21common.inc/function/… e procure por 'Externo'.
Alex Gill
2
Apenas uma observação - você pode adicionar JavaScript, conforme descrito acima, a um formulário específico, adicionando a função nomeada <module name>_form_<form id>_alterao seu módulo. A identificação do formulário de localização está descrita aqui: drupal.stackexchange.com/questions/5802/…
Nux
1
Este exemplo é meio ruim, porque você está assumindo que este será o APENAS anexo no formulário!
doublejosh
6
Comentar por doublejosh significa: geralmente se deve acrescentar à matriz em vez de substituí-la. Assim, o exemplo deve ser $form['#attached']['css'][] = drupal_get_path('module', 'ajax_example') . '/ajax_example.css';etc ..
tanius
11

Aqui está o método para adicionar CSS embutido aos formulários ...

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

Observe que você deve adicionar à matriz css em vez de substituí-la . O que você deve usar: em ['css'][] =vez de ['css'] =evitar esmagar outras adições.

doublejosh
fonte
6

Aqui está uma maneira de fazer isso que é via. chamando uma função usando a #after_buildpropriedade Basta passar seu ID de formulário no caso de alternância.

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

Além disso, você pode seguir este bom tutorial Adicionando css e js a formulários drupal

Espero que isto ajude. :)

Prerit Mohan
fonte
Enquanto isso ainda funciona no Drupal 7, parece ser um hack D6 , necessário porque #attachednão existia no D6 .
tanius
Você não deve usar drupal_add_jsem um formulário. Você acabará com problemas no estado de validação.
doublejosh 20/09/16
1
@doublejosh Esta é uma resposta anos de idade três :)
Prerit Mohan