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


7

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?


'file path'ist nicht erforderlich, wenn sich die Datei in dem Verzeichnis befindet, das das Modul enthält, das den Menürückruf definiert.
Kiamlaluno

Antworten:


6

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.


Die Verwendung von hook_init () würde dazu führen, dass der Code jeder Seite hinzugefügt wird. Die Frage war, wie man sie einem bestimmten Menü-Rückruf hinzufügt.
Jhedstrom

Deshalb habe ich allgemein gesagt . Ich habe nicht vorgeschlagen, dass die Verwendung hook_init()in diesem Fall die Lösung ist, aber ich habe erklärt, warum hook_init()normalerweise verwendet wird.
Kiamlaluno

Danke, aber ich möchte es einem bestimmten Pfad hinzufügen. So etwas wie die Funktion my_init () {if (drupal_is_front_page ()) {drupal_add_css (....); drupal_add_js (....); }} aber für die / top und nicht für die Titelseite.
Alexander Farber

1
@Alexander, wie kiamlaluno in der Antwort erklärt, wenn Sie diese Aufrufe innerhalb der page callbackFunktion tätigen , wird sie nur auf diesen bestimmten Seiten angewendet.
Matthew Scharley

3

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

Danke, aber ich bin verwirrt - was macht das: (function ($) {....}) (jQuery);
Alexander Farber

@Alexander: Das nennt man in JavaScript einen Abschluss. Mit dieser Technik können Sie sicherstellen, dass Ihre Variablen keinen Einfluss auf anderen JavaScript-Code haben, da sie alle denselben Namensraum, das globale Fensterobjekt, verwenden. Auf diese Weise können Sie die Prototyp-JS-Bibliothek ausführen, die auch das $Zeichen ohne Konflikte verwendet.
googletorp
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.