Drupal en jQuery. Les 8. jQuery UI en jQuery UI Tabs koppelen aan Drupal 7

Bestandscode

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

CSS-code:

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

HTML-code in node-product.tpl.php:

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

Om te beginnen moet je een aangepaste (custom) module aanmaken.

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

Nu moet je het gewicht (weight) van de module custom hoger instellen dan dat van de kernmodules. Hiervoor ga je via phpMyAdmin naar de database en stel je het veld weight in op 100 of hoger. Je kunt het record van de module vinden in de tabel system:

Nu kun je in de module custom jQuery UI-plug-ins koppelen, bijvoorbeeld zo:

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

Je kunt deze code aan het begin van de module plaatsen, direct na de openings-tag van PHP.