CSSとJSを添付ファイル付きのフォームに追加する


36

フォームに外部およびローカルのCSSおよびJavaScriptファイルを追加する必要がありますが、これを行う正しい方法を見つけることができないようです。JSファイルとCSSファイルのパスとURLを追加するだけですか?

私はこれを行う正しい場所であると想定$form['#attached']['css'][]$form['#attached']['js'][]ているので、フォームの再構築時に再読み込みされます。何かが欠けているようです。

回答:


71

ドキュメントを見ましたか?

フォームに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ファイルの処理方法を参照する場所を教えてください。
ビントーグ


2
注:<module name>_form_<form id>_alterモジュールに名前を付けた関数を追加することにより、上記のようにJavaScriptを特定のフォームに追加できます。フォームIDの検索
Nux

1
これはフォーム上の唯一の添付ファイルであると想定しているため、この例は少し悪いです!
-doublejosh

6
doublejoshによるコメントは、通常、配列を置き換えるのではなく、配列に追加する必要があることを意味します。したがって、例は次のようになり$form['#attached']['css'][] = drupal_get_path('module', 'ajax_example') . '/ajax_example.css';ます
。–タニウス

11

フォームにインラインCSSを追加する方法は次のとおりです...

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

css配列を置き換えるのではなく追加する必要があることに注意してください。使用すべき意味:他の追加をつぶすことを避けるためではありません。['css'][] =['css'] =


6

これを行う1つの方法があります。#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; 
}

また、この良いチュートリアルに従ってください。Drupalフォームへのcssおよびjsの追加

お役に立てれば。:)


これはまだDrupal 7で機能しますが、D6に#attachedは存在しなかったため必要なD6ハックのようです。
タニウス

drupal_add_jsフォームでは使用しないでください。検証状態の問題が発生します。
doublejosh

1
@doublejoshこれは3年前の回答です:)
プレリットモハン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.