Thêm JavaScript và CSS vào một trang menu cụ thể

Tôi đã thiết lập một trang web Drupal 7 với một vài khối và menu tùy chỉnh được viết bởi tôi.

Tôi có một tập lệnh PHP không phải Drupal hiển thị người dùng (một số trong số chúng là bên ngoài, tức là không được lưu trữ trong các bảng drupal) dưới dạng bảng với plugin jQuery DataTables .

Tôi muốn viết lại tập lệnh đó dưới dạng menu Drupal, để nó có thể được gọi là http://preferans.de/top .

Nội dung của my.module như sau.

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

Nội dung của my.top.inc là như sau.

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

Vấn đề của tôi là tôi không hiểu cách thêm mã CSS và JavaScript, để nó có sẵn cho trang / đầu , nhưng không phải cho bất kỳ đường dẫn Drupal nào khác.

Tôi có lẽ nên gọi:

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

(Vui lòng xem phần đầu của kịch bản không phải Drupal ban đầu của tôi ).

Làm cách nào để giới hạn các cuộc gọi này đến trang / đầu trang và tôi nên thực hiện các cuộc gọi này ở đâu? Tôi nên đặt chúng trong một cái móc, hoặc bằng cách thêm một số thuộc tính vào menu của tôi?

Nói chung, các tệp CSS và JavaScript được thêm bằng hook_init () , cho phép các tệp đó được tổng hợp lại với nhau, khi tổng hợp được bật.

Tuy nhiên, bằng cách sử dụng hook_init()(tôi khuyên bạn không nên làm điều này), bạn có thể thêm các tệp dựa trên trang đang truy cập một cách có điều kiện.

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

Lý do tôi không khuyên bạn nên làm điều này là hook sẽ được gọi cho mọi trang, kể cả những trang bạn không thêm tệp. hook_init()thường được sử dụng để thêm các tập tin vào mỗi trang.

Bạn có thể thêm các tệp đó trong menu gọi lại (hay còn gọi là trang gọi lại); nếu trình đơn gọi lại là một hàm xây dựng biểu mẫu, thì bạn có thể sử dụng thuộc #attachedtính, như đoạn mã sau.

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

Về mã nội tuyến bạn đang thêm, tôi cũng khuyên bạn nên đặt mã đó vào một tệp và sử dụng các hành vi Drupal thay vì $(document).ready(). Nếu bạn cần truyền đối số cho mã JavaScript, bạn có thể sử dụng cài đặt JavaScript (xem drupal_add_js () để hiểu chi tiết cách chuyển cài đặt sang mã JavaScript).
Quản lý JavaScript trong Drupal 7 giải thích chi tiết cách quản lý mã JavaScript trong Drupal 7 và tiêu đề phần Hành vi báo cáo cách thay đổi hành vi của Drupal trong phiên bản Drupal mới nhất.

Bạn có thể thêm mã trong menu gọi lại của bạn. Thay vì thêm dòng mã JS, tôi sẽ đề nghị bạn tạo tệp JS của riêng bạn.

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

Sau đó bạn nên thêm my.jstệp vào mô-đun của tôi. Lưu ý rằng đó $không phải là biến toàn cục trong Drupal 7 thay vào đó sử dụng jQuery:

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

Bạn cũng có thể biến điều này thành hành vi JavaScript, đây là điều nên làm. Điều đó sẽ trông giống như thế này:

(function ($) {

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