logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll

Drupal と jQuery。レッスン 8。Drupal 7 に jQuery UI、jQuery UI tabs を接続する

05/12/2019, 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

次に、カスタム モジュールの重量をコア モジュールの重量より大きく設定する必要があります。これを行うには、phpmyadmin 経由でデータベースにアクセスして、モジュールの重量を 100 以上に設定します。モジュールに関するレコードは、system テーブルで見つけることができます。

System db table

次に、custom モジュール内に jquery ui プラグインを接続できます。例えば、このようにします:

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

コードはモジュールの最初、PHP 開始タグの直後に挿入できます。