it-swarm-eu.dev

Přidání JavaScriptu a CSS na konkrétní stránku nabídky

Nastavil jsem a Drupal 7 s několika vlastními bloky a nabídkami napsanými mnou.

Mám non-Drupal PHP skript zobrazující uživatele (někteří z nich jsou externí, tj. Nejsou uloženi v drupal tabulek) jako tabulka s DataTables jQuery plugin.

Chtěl bych přepsat tento skript jako nabídku Drupal), takže ji lze nazvat http://preferans.de/top .

Obsah my.module je následující.

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

Obsah my.top.inc je následující.

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

Můj problém je, že nerozumím tomu, jak přidat kód CSS a JavaScript, takže je k dispozici pro /horní stránku, ale nikoli pro jakékoli jiné Drupal cesty).

Asi bych měl zavolat:

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

(Viz část hlavičky můj původní neadrupální skript ).

Jak mohu omezit tato volání na /horní stránku a kde mám tyto hovory provádět? Měl bych je dát do háčku nebo přidáním některých vlastností do svého menu?

7
Alexander Farber

Obecně jsou soubory CSS a JavaScript přidány s hook_init () , což umožňuje agregaci těchto souborů, když je agregace povolena.

Pomocí hook_init() (doporučuji, abyste to stejně nedělali) můžete podmíněně přidat soubory založené na navštívené stránce.

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

Důvod, proč vám to nedoporučuji, je, že se zavolá háček pro všechny stránky, včetně těch, které soubory nepřidáváte. hook_init() se obvykle používá k přidání souborů na každou stránku.

Tyto soubory můžete přidat do nabídky zpětného volání (a.k.a., zpětné volání stránky); Pokud je zpětné volání nabídky funkcí nástroje pro tvorbu formulářů, můžete jako následující kód použít vlastnost #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',
);

O vloženém kódu, který přidáváte, bych doporučil vložit také tento soubor do souboru a namísto $(document).ready() použít chování Drupal. Pokud potřebujete předat argumenty do kódu JavaScript, můžete použít nastavení JavaScriptu (viz drupal_add_js () , abyste podrobně porozuměli tomu, jak předat nastavení kódu JavaScript).
Správa JavaScriptu v Drupal 7 podrobně vysvětluje, jak spravovat JavaScript kód v Drupal 7, a názvy sekcí Chování hovoří o tom, jak se chování Drupal změnila v poslední Drupal verzi.

6
kiamlaluno

Kód můžete přidat do zpětného volání nabídky. Namísto vložení kódu JS inline bych vám navrhl vytvořit si vlastní soubor 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(),
    ),
  );
}

Pak byste měli přidat my.js soubor do mého modulu. Všimněte si, že $ není globální proměnná v Drupal 7 použijte jQuery:

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

Můžete to také učinit z chování JavaScriptu, což je doporučená věc. To by vypadalo asi takto:

(function ($) {

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