it-swarm-ko.tech

특정 메뉴 페이지에 JavaScript 및 CSS 추가

내가 작성한 몇 가지 사용자 정의 블록과 메뉴를 사용하여 a Drupal 7 웹 사이트 설정했습니다.

비 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 페이지로 제한하려면 어떻게해야합니까? 후크에 넣거나 메뉴에 속성을 추가해야합니까?

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 () 참조).
Drupal 7에서 JavaScript 관리 Drupal 7에서 JavaScript 코드를 관리하는 방법과 섹션 제목 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 파일을 내 모듈에 저장하십시오. 그것을주의해라 $ 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