it-swarm-es.com

Agregar JavaScript y CSS a una página de menú en particular

He configurado a Drupal 7 sitio web con algunos bloques y menús personalizados escritos por mí.

Tengo n archivo que no es Drupal PHP script que muestra usuarios (algunos de ellos son externos, es decir, no están almacenados en tablas drupal) como una tabla con el complemento DataTables jQuery.

Me gustaría volver a escribir esa secuencia de comandos como un menú Drupal, para que pueda llamarse como http://preferans.de/top .

El contenido de my.module es el siguiente.

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

El contenido de my.top.inc es el siguiente.

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

Mi problema es que no entiendo cómo agregar el código CSS y JavaScript, por lo que está disponible para la página /top , pero no para cualquier otra ruta Drupal.

Probablemente debería llamar:

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

(Consulte la sección principal de mi script original que no es de Drupal ).

¿Cómo limito estas llamadas a la página /top y dónde debo realizar estas llamadas? ¿Debo engancharlos o agregar algunas propiedades a mi menú?

7
Alexander Farber

En general, los archivos CSS y JavaScript se agregan con hook_init () , que permite que esos archivos se agreguen juntos, cuando la agregación está habilitada.

Usando hook_init() (sugiero que no hagas esto, de todos modos) puedes agregar condicionalmente los archivos basados ​​en la página que estás visitando.

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

La razón por la que no le sugiero que haga esto es que se llamará al enlace para cada página, incluidas las que no está agregando los archivos. hook_init() se usa generalmente para agregar archivos a cada página.

Puede agregar esos archivos en el menú de devolución de llamada (a.k.a., la página de devolución de llamada); si la devolución de llamada del menú es una función de creación de formularios, puede usar la propiedad #attached, como el siguiente código.

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

Acerca del código en línea que está agregando, le recomendaría que también lo ponga en un archivo y que utilice los comportamientos Drupal en lugar de $(document).ready(). Si necesita pasar argumentos para el código de JavaScript, puede usar la configuración de JavaScript (consulte drupal_add_js () para comprender en detalle cómo pasar la configuración al código de JavaScript).
Administración de JavaScript en Drupal 7 explica en detalle cómo administrar el código JavaScript en Drupal 7, y la sección Los títulos Comportamientos informan cómo Drupal comportamientos se cambian en la última versión Drupal).

6
kiamlaluno

Puede agregar el código en la devolución de llamada de su menú. En lugar de agregar el código JS en línea, te sugiero que crees tu propio archivo 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(),
    ),
  );
}

Luego debe agregar el my.js archivo a su mi módulo. Darse cuenta de $no es una variable global en Drupal 7 en su lugar usa jQuery:

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

También podría convertir esto en un comportamiento de JavaScript, que es lo que se recomienda hacer. Eso se vería así:

(function ($) {

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