web-dev-qa-db-ja.com

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

私は a Drupal 7 web site をいくつかのカスタムブロックとメニューで作成しました。

私は Drupal以外のPHPスクリプト ユーザーを表示しています（一部は外部、つまりdrupalテーブルに保存されていません）） DataTables jQueryプラグインを含むテーブル。

そのスクリプトを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ページに制限するにはどうすればよいですか？これらの呼び出しはどこで実行する必要がありますか？それらをフックに入れるか、メニューにいくつかのプロパティを追加する必要がありますか？

7javascript
7
Alexander Farber

通常、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',
);
_

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

6
kiamlaluno

メニューコールバックにコードを追加できます。 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);
3
googletorp