Drupal e jQuery. Lezione 8. Colleghiamo a Drupal 7 jQuery UI e jQuery UI Tabs

Codice del file

/sites/all/modules/custom/custom.info

name = custom
description = custom module
core = 7.x

/sites/all/modules/custom/custom.module

<?php
 
  drupal_add_library('system', 'ui.tabs');

Codice CSS:

#tabs{
  border: 0px;
}
 
.ui-tabs-nav{
  background: none;
  border: none;
}

Codice HTML in node-product.tpl.php:

<div id="tabs">
      <ul>
        <li>
          <a href="#tabs-1">Descrizione</a>
        </li>
        <li>
          <a href="#tabs-2">Caratteristiche</a>
        </li>
      </ul>
 
      <div id="tabs-1">
        <?php
          print render($content['body']);
        ?>
      </div>
      <div id="tabs-2">
        <?php
          print render($content);
        ?>
      </div>
    </div>

Per cominciare, è necessario creare un modulo personalizzato.

https://rupalbook.org/content/iz-chego-sostoit-modul-drupala

Ora bisogna impostare un peso (weight) del modulo custom maggiore di quello dei moduli del core. Per farlo, accedi al database tramite phpMyAdmin e imposta il valore del campo weight su 100 o superiore. La voce relativa al modulo può essere trovata nella tabella system:

Ora nel modulo custom è possibile collegare i plugin di jQuery UI, ad esempio così:

<?php
drupal_add_library('system', 'ui.tabs');
drupal_add_library('system', 'ui.accordion');

Il codice può essere inserito all’inizio del modulo, subito dopo il tag di apertura PHP.