Hinzufügen von JavaScript und CSS zu einer bestimmten Menüseite

Ich habe eine Drupal 7-Website mit einigen von mir geschriebenen benutzerdefinierten Blöcken und Menüs eingerichtet.

Ich habe ein Nicht-Drupal-PHP-Skript , das Benutzer (einige von ihnen sind extern, dh nicht in Drupal-Tabellen gespeichert) als Tabelle mit dem DataTables- jQuery-Plugin anzeigt .

Ich möchte dieses Skript als Drupal-Menü umschreiben, damit es als http://preferans.de/top aufgerufen werden kann .

Der Inhalt von my.module ist der folgende.

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

Der Inhalt von my.top.inc ist folgender.

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

Mein Problem ist, dass ich nicht verstehe, wie man den CSS- und JavaScript-Code hinzufügt, so dass er für die / top- Seite verfügbar ist , aber nicht für andere Drupal-Pfade.

Ich sollte wahrscheinlich anrufen:

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

(Siehe den Kopfabschnitt meines ursprünglichen Nicht-Drupal-Skripts ).

Wie beschränke ich diese Anrufe auf die Seite / top und wo soll ich diese Anrufe durchführen? Soll ich sie in einen Haken stecken oder indem ich meinem Menü einige Eigenschaften hinzufüge?

Im Allgemeinen werden CSS- und JavaScript-Dateien mit hook_init () hinzugefügt , wodurch diese Dateien zusammen aggregiert werden können, wenn die Aggregation aktiviert ist.

Mit hook_init()(ich schlage vor, dass Sie dies sowieso nicht tun) können Sie die Dateien basierend auf der besuchten Seite bedingt hinzufügen.

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

Der Grund, warum ich Ihnen dies nicht vorschlage, ist, dass der Hook für alle Seiten aufgerufen wird, einschließlich derjenigen, bei denen Sie die Dateien nicht hinzufügen. hook_init()wird im Allgemeinen verwendet, um Dateien zu jeder Seite hinzuzufügen.

Sie können diese Dateien im Menü Rückruf hinzufügen (auch bekannt als Seitenrückruf). Wenn der Menü-Rückruf eine Form Builder-Funktion ist, können Sie die #attachedEigenschaft als folgenden Code verwenden.

$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',
);

In Bezug auf den Inline-Code, den Sie hinzufügen, würde ich Ihnen empfehlen, auch diesen in eine Datei einzufügen und stattdessen Drupal-Verhalten zu verwenden $(document).ready(). Wenn Sie Argumente an den JavaScript-Code übergeben müssen, können Sie JavaScript-Einstellungen verwenden (siehe drupal_add_js (), um zu verstehen, wie Einstellungen an JavaScript-Code übergeben werden).
Das Verwalten von JavaScript in Drupal 7 erläutert ausführlich das Verwalten von JavaScript-Code in Drupal 7, und in den Abschnittsüberschriften Verhalten wird angegeben , wie das Verhalten von Drupal in der neuesten Drupal-Version geändert wird.

Sie können den Code in Ihren Menü-Rückruf einfügen. Anstatt den JS-Code inline hinzuzufügen, würde ich vorschlagen, dass Sie Ihre eigene JS-Datei erstellen.

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(),
    ),
  );
}

Sie sollten die my.jsDatei dann zu meinem Modul hinzufügen . Beachten Sie, dass dies $in Drupal 7 keine globale Variable ist. Verwenden Sie stattdessen jQuery:

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

Sie können dies auch in ein JavaScript-Verhalten umwandeln, das empfohlen wird. Das würde ungefähr so ​​aussehen:

(function ($) {

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