JavaScriptとCSSを特定のメニューページに追加する

Drupal 7のWebサイトをセットアップして、自分で作成したいくつかのカスタムブロックとメニューを用意しました。

DataTables jQueryプラグインを使用して、Drupal以外のPHPスクリプトでユーザー（一部は外部、つまりdrupalテーブルに格納されていない）をテーブルとして表示しています。

このスクリプトをDrupalメニューとして書き直して、http://preferans.de/topとして呼び出せるようにしたいと思います。

my.moduleの内容は次のとおりです。

function my_menu() {
  $items['top'] = array (
    'title' => 'Top',
    'description' => 'Top',
    'page callback' => 'my_top_callback',
    'access callback' => TRUE,
    'file' => 'my.top.inc',
    'file path' => drupal_get_path('module', 'my'),
    'type' => MENU_CALLBACK,
  );
  return $items;
}

my.top.incの内容は次のとおりです。

function my_top_callback() {
  return array (
    'top_table' => array (
      '#type' => 'markup',
      '#markup' => generate_html_table_with_php(),
    ),
  );
}

私の問題は、CSSとJavaScriptのコードを追加する方法がわからないため、/ topページでは使用できるが、他のDrupalパスでは使用できないことです。

私はおそらく電話する必要があります：

   drupal_add_css('/demo_table_jui.css', 'file');
   drupal_add_css('/smoothness/jquery-ui-1.8.4.custom.css', 'file');
   drupal_add_js('/jquery.dataTables.min.js', 'file');
   drupal_add_js('
       $(document).ready(function() {
         $("#rating").dataTable( {
            "bJQueryUI": true,
            "sPaginationType": "full_numbers"
          });
        ', 'inline');

（私の元の非Drupalスクリプトのヘッドセクションを参照してください）。

これらの呼び出しを/ topページに制限する方法と、これらの呼び出しをどこで実行する必要がありますか？それらをフックに入れるか、メニューにいくつかのプロパティを追加する必要がありますか？

通常、CSSおよびJavaScriptファイルはhook_init（）で追加されます。これにより、集約が有効な場合にこれらのファイルを集約できます。

hook_init()（とにかくこれを行わないことをお勧めします）を使用すると、アクセスするページに基づいてファイルを条件付きで追加できます。

function my_init() {
  if (arg(0) == 'top') {
    // Add the files.
  }
}

これを行うことをお勧めしないのは、ファイルを追加していないページを含め、すべてのページでフックが呼び出されるためです。hook_init()通常、各ページにファイルを追加するために使用されます。

これらのファイルは、メニューコールバック（別名、ページコールバック）で追加できます。メニューコールバックがフォームビルダー関数の場合#attached、次のコードのようにプロパティを使用できます。

$form['#attached']['css'] = array(
  drupal_get_path('module', 'ajax_example') . '/ajax_example.css',
);

$form['#attached']['js'] = array(
  drupal_get_path('module', 'ajax_example') . '/ajax_example.js',
);

追加するインラインコードについては、それもファイルに入れ、ではなくDrupalビヘイビアーを使用することをお勧めします$(document).ready()。JavaScriptコードに引数を渡す必要がある場合は、JavaScript設定を使用できます（設定をJavaScriptコードに渡す方法の詳細については、drupal_add_js（）を参照してください）。
Drupal 7でのJavaScriptの管理では、Drupal 7でJavaScriptコードを管理する方法を詳しく説明しています。また、「タイトルの動作」セクションでは、Drupalの動作が最新のDrupalバージョンでどのように変更されているかを報告しています。

メニューコールバックにコードを追加できます。JSコードをインラインで追加する代わりに、独自のJSファイルを作成することをお勧めします。

function my_top_callback() {
  drupal_add_css('/demo_table_jui.css');
  drupal_add_css('/smoothness/jquery-ui-1.8.4.custom.css');
  drupal_add_js('/jquery.dataTables.min.js');
  drupal_add_js(drupal_get_path('module', 'my') . '/my.js');
  return array (
    'top_table' => array (
      '#type' => 'markup',
      '#markup' => generate_html_table_with_php(),
    ),
  );
}

次に、my.jsファイルをmyモジュールに追加する必要があります。$Drupal 7ではグローバル変数ではないことに注意してください。代わりに次を使用しますjQuery。

(function($) {
  $(document).ready(function() {
    $("#rating").dataTable( {
      "bJQueryUI": true,
      "sPaginationType": "full_numbers"
    });
  });
})(jQuery);

これをJavaScriptの動作にして、推奨される動作にすることもできます。これは次のようになります。

(function ($) {

  Drupal.behaviors.my = {
    attach: function(context, settings) {
      $("#rating").dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
      });
    }
  };
})(jQuery);