Thêm CSS và JS để hình thành với tệp đính kèm


36

Tôi cần thêm một số tệp CSS và JavaScript bên ngoài và cục bộ vào một biểu mẫu, nhưng dường như tôi không thể tìm thấy cách phù hợp để làm điều này. Tôi có chỉ đơn giản là thêm các đường dẫn và URL cho các tệp JS và CSS không?

Tôi giả sử $form['#attached']['css'][]$form['#attached']['js'][]là nơi chính xác để làm điều này, vì vậy chúng được tải lại trên các bản dựng lại mẫu. Tôi dường như đang thiếu một cái gì đó.

Câu trả lời:


70

Bạn đã xem tài liệu chưa?

Đính kèm CSS và JS để tạo thành

http://api.drupal.org/api/drupal/developer!topics!forms_api_Vference.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';

Tập tin bên ngoài

http://api.drupal.org/api/drupal/includes%21common.inc/feft/drupal_ process_attached/7

Các tập tin 'js' và 'css' bên ngoài cũng có thể được tải. Ví dụ:

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

Tôi có. Bạn có thể cho tôi biết nơi nó tham khảo cách xử lý các tệp CSS bên ngoài không?
vintorg


2
Chỉ cần một lưu ý - bạn có thể thêm JavaScript như được mô tả ở trên vào biểu mẫu cụ thể bằng cách thêm chức năng được đặt tên <module name>_form_<form id>_altervào mô-đun của bạn. Tìm id mẫu được mô tả ở đây: drupal.stackexchange.com/questions/5802/ trên
Nux

1
Ví dụ này hơi tệ vì bạn cho rằng đây sẽ là tệp đính kèm DUY NHẤT trên biểu mẫu!
doublejosh

6
Nhận xét bởi doublejosh có nghĩa là: thông thường người ta nên nối vào mảng hơn là thay thế nó. Vì vậy, ví dụ nên là $form['#attached']['css'][] = drupal_get_path('module', 'ajax_example') . '/ajax_example.css';vv ..
tanius

11

Đây là phương pháp để thêm CSS nội tuyến vào biểu mẫu ...

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

Lưu ý rằng bạn nên thêm vào mảng css thay vì thay thế nó . Có nghĩa là bạn nên sử dụng: ['css'][] =thay vì ['css'] =để tránh các bổ sung khác.


6

Đây là một cách để làm điều này thông qua. gọi một chức năng sử dụng #after_buildtài sản. Chỉ cần vượt qua trong id mẫu của bạn trong trường hợp chuyển đổi.

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

Ngoài ra, bạn có thể làm theo hướng dẫn tốt này Thêm css và js vào các hình thức drupal

Hi vọng điêu nay co ich. :)


Mặc dù điều này vẫn hoạt động trong Drupal 7, nhưng nó dường như là một bản hack D6 , cần thiết vì #attachedkhông tồn tại trong D6 .
tanius

Bạn không nên sử dụng drupal_add_jstrên một hình thức. Bạn sẽ kết thúc với rắc rối trạng thái xác nhận.
doublejosh

1
@doublejosh Đây là một câu trả lời ba năm tuổi :)
Prerit Mohan
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.