logo

额外区块类型 (EBT) - 全新的布局构建器体验❗

额外区块类型 (EBT) - 样式化、可定制的区块类型:幻灯片、标签页、卡片、手风琴等更多类型。内置背景、DOM Box、JavaScript 插件的设置。立即体验布局构建的未来。

演示 EBT 模块 下载 EBT 模块

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

额外段落类型 (EPT) - 类似的基于 Paragraph 的模块集合。

演示 EPT 模块 滚动

滚动

<p>Drupal 与 jQuery。第8课:在 Drupal 7 中集成 jQuery UI 和 jQuery UI Tabs</p>

10/10/2025, by Ivan

文件代码

/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代码:

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

在 node-product.tpl.php 中的 HTML 代码:

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

首先,需要创建一个自定义模块。

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

接下来需要将 custom 模块的权重设置得比核心模块更高。为此,请通过 phpMyAdmin 打开数据库,并在 system 表中将模块的 weight 值设置为 100 或更高。模块记录位于 system 表中:

System db table

现在,可以在 custom 模块中加载 jQuery UI 插件,例如:

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

可以在模块开头(PHP 开始标签之后)直接插入这段代码。