将CSS和JS添加到带有附件的表单中


36

我需要在表单中添加一些外部和本地CSS和JavaScript文件,但似乎找不到正确的方法。我是否只需添加JS和CSS文件的路径和URL?

我认为$form['#attached']['css'][]并且$form['#attached']['js'][]是执行此操作的正确位置,因此它们会在表单重建中重新加载。我似乎丢失了一些东西。

Answers:


70

您看过文档了吗?

将CSS和JS附加到表单

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

外部档案

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

也可以加载外部“ js”和“ css”文件。例如:

$build['#attached']['js']['http://code.jquery.com/jquery-1.4.2.min.js'] = array('type' => 'external');

我有。您能告诉我它在哪里引用了如何处理外部CSS文件吗?
vintorg


2
仅需注意-您可以通过将命名函数添加<module name>_form_<form id>_alter到模块中来将上述JavaScript添加到特定形式。查找表单ID的描述如下:drupal.stackexchange.com/questions/5802/…–
Nux

1
这个例子有点不好,因为您假设这将是表格上的唯一附件!
doublejosh

6
doublejosh的注释方式是:通常应将其附加到数组而不是替换它。因此,例如要$form['#attached']['css'][] = drupal_get_path('module', 'ajax_example') . '/ajax_example.css';
tanius

11

这是向表单添加内联CSS的方法...

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

请注意,您应该添加到css数组而不是替换它。意味着您应该使用:['css'][] =而不是['css'] =避免挤压其他添加物。


6

这是一种通过的方法。使用#after_build属性调用函数。只需在切换情况下传递您的表单ID。

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

您也可以按照这个好的教程将CSS和JS添加到Drupal表单中

希望这可以帮助。:)


尽管这在Drupal 7中仍然有效,但似乎是D6 hack,这是必需的,因为#attachedD6中不存在
tanius

您不应该drupal_add_js在表格上使用。您最终会遇到验证状态麻烦。
doublejosh

1
@doublejosh这是一个三岁的答案:)
Prerit Mohan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.