Quick Tabs

Views、ノード、ブロック、または他のQuickTabsインスタンスをタブコンテンツとして組み合わせ、複数のレンダリングスタイルでタブ付きコンテンツブロックを作成します。

quicktabs
28,463 sites
59
drupal.org
gui api content
tabs tabbed content accordion UI block Views AJAX content organization layout navigation
Drupal 10 Drupal 11

インストール

Drupal 11, 10 v4.0.1
composer require 'drupal/quicktabs:^4.0'

概要

Quick Tabsは、Drupalでタブ付きコンテンツブロックを作成するための柔軟なシステムを提供します。管理者は、Views、ノード、ブロック、さらにはネストされたQuickTabsインスタンスなど、各タブのさまざまなコンテンツソースを選択して、タブ付きコンテンツのブロックを簡単に作成できます。

このモジュールは、すぐに使える複数のレンダリングスタイルを備えています：組み込みCSSテーマ（Pamela、On the Gray、Tabs Bar、Material Tabs）を持つ軽量なクラシックquicktabsレンダラー、jQuery UI Tabs、jQuery UI Accordionです。コンテンツはAJAXで読み込むことができ、初期ページ読み込みのパフォーマンスが向上します。また、Cookieを使用したタブメモリ機能により、ユーザーが最後に選択したタブを記憶します。

開発者向けには、Quick Tabsはタブに表示できるコンテンツの種類（TabTypeプラグイン）とタブのレンダリング方法（TabRendererプラグイン）の両方を拡張できる堅牢なプラグインアーキテクチャを提供します。また、指定されたフィールドで行をグループ化してViewの結果をタブ付きコンテンツとしてレンダリングできるViewsスタイルプラグインも含まれています。

Features

  • 複数のコンテンツソース（Views、ノード、ブロック、他のQuickTabs）を組み合わせたタブ付きコンテンツブロックを作成
  • 3つのレンダリングオプション：クラシックQuickTabs、jQuery UI Tabs、jQuery UI Accordion
  • AJAXロードオプション - 初期ページ読み込みを高速化するためにタブコンテンツをオンデマンドで読み込み
  • 4つの組み込みCSSテーマ：Pamela、On the Gray、Tabs Bar、Material Tabs
  • Cookieを使用したタブメモリでページ読み込み間でユーザーが最後に選択したタブを記憶
  • コンテンツのないタブを自動的に非表示にする空タブ非表示オプション
  • フィールドでグループ化されたタブとしてViewの行をレンダリングするViewsスタイルプラグイン
  • 既存のQuickTabsインスタンスのコピーを素早く作成する複製機能
  • キーボードナビゲーションサポート（矢印キー）を備えたアクセシブルなタブインターフェース
  • カスタムタブタイプとレンダラー用の拡張可能なプラグインアーキテクチャ
  • ネストされたQuickTabsサポート - あるQuickTabsインスタンスを別のインスタンス内に埋め込み可能
  • 個々のタブへのカスタムCSSクラスサポート

Use Cases

商品情報タブ

説明、仕様、レビュー、関連商品など、異なる商品情報セクション用のタブを持つブロックを作成します。各タブは異なるViewsやノードフィールドから取得でき、ページを圧迫することなく整理された商品情報を表示します。

Ajax読み込み付きユーザーダッシュボード

アカウント設定、注文履歴、保存済みアイテム、通知のタブを持つユーザーダッシュボードを構築します。Ajax読み込みを有効にすると、アクティブなタブのコンテンツのみが読み込まれ、重いコンテンツを持つページのパフォーマンスが向上します。

マルチViewデータ表示

Viewsスタイルプラグインを使用して、カテゴリ、日付、または任意のフィールドでグループ化された単一Viewの結果を表示します。各グループは自動的にタブになり、月別のイベントやトピック別の記事を表示するのに便利です。

アコーディオンFAQセクション

各質問が折りたたみ可能なパネルとなるアコーディオンレンダラーを使用してFAQセクションを作成します。折りたたみオプションを有効にすると、ユーザーは複数の質問を展開したり、すべてを折りたたんでスキャンしやすくできます。

地域別コンテンツブロック

Viewsを使用して地域でフィルタリングされたコンテンツを各タブに表示し、地域固有のコンテンツをタブで表示します。ユーザーはページリロードなしで地域情報を素早く切り替えられます。

ネストされたタブナビゲーション

QuickTabsインスタンスをネストして複雑なナビゲーション構造を作成します。メインのQuickTabsはタブコンテンツとして他のQuickTabsを含むことができ、詳細なコンテンツ階層のための複数レベルのタブ構成を可能にします。

Tips

  • マシン名はCSS IDの一部となり、作成後は変更できないため、慎重に選んでください。説明的でセマンティックな名前を選択してください。
  • コンテンツが重いタブのパフォーマンスを向上させるには、Ajax読み込みを有効にして、ユーザーが各タブをクリックするまで読み込みを遅延させます。
  • Viewsスタイルプラグインは動的タブコンテンツに強力です - 任意のフィールドでグループ化してデータから自動的にタブを作成できます。
  • カスタムCSSクラスはカスタムタブクラスオプションを通じてタブごとに追加でき、個々のタブに特定のスタイリングを適用するのに便利です。
  • ネストされたQuickTabsを使用する場合は、複雑なネストがパフォーマンスに影響する可能性があるため、適切なキャッシュ戦略を確保してください。
  • タブタイトルは限定的なHTML（img、em、strong、h2-h6、small、span、i、br）をサポートしており、タブラベルにアイコンやフォーマットを追加できます。

Technical Details

Admin Pages 5
Quick Tabs /admin/structure/quicktabs

すべてのQuickTabsインスタンスを一覧表示するメイン管理ページ。ここから既存のインスタンスの表示、編集、削除、複製、および新規作成ができます。各行にはインスタンス名とストレージタイプ、利用可能な操作が表示されます。

QuickTabsインスタンスを追加 /admin/structure/quicktabs/add

新しいQuickTabsインスタンスを作成するフォーム。名前、レンダリングスタイル、タブコンテンツ、および各種オプションを設定します。各インスタンスは配置用の対応するブロックを作成します。

Quick Tabを編集 /admin/structure/quicktabs/{quicktabs_instance}/edit

既存のQuickTabsインスタンスを編集します。追加フォームと同じですが、既存の設定が事前入力されています。

Quick Tabを削除 /admin/structure/quicktabs/{quicktabs_instance}/delete

QuickTabsインスタンスを削除するための確認フォーム。関連するブロックも削除されます。

Quick Tabを複製 /admin/structure/quicktabs/{quicktabs_instance}/duplicate

新しいマシン名で既存のQuickTabsインスタンスのコピーを作成します。

権限 1
Quick Tabsの管理

ユーザーがQuickTabsインスタンスの作成、編集、削除、複製を行うことを許可します。この権限を持つユーザーは、Quick Tabs設定への完全な管理アクセス権を持ちます。

Hooks 3
hook_quicktabs_tab_type_info_alter

タブタイププラグインの定義を変更します。モジュールが利用可能なタブコンテンツタイプを変更または拡張できます。

hook_quicktabs_tab_renderer_info_alter

タブレンダラープラグインの定義を変更します。モジュールが利用可能なレンダリングオプションを変更または拡張できます。

hook_quicktabs_instance_alter

レンダリング前にQuickTabsインスタンスを変更します。レンダリング時にタブ、オプション、その他のプロパティを変更できます。

Troubleshooting 5
Ajax読み込みタブがアクセス制限されるべきコンテンツを表示する

Ajaxモードが有効な場合、コンテンツは基本的な「access content」権限のみをチェックするメニューコールバック経由で読み込まれます。機密コンテンツの場合は、Ajaxモードを無効にするか、コンテンツタイプの表示設定でフィールドレベルのアクセス制御が適切に設定されていることを確認してください。

タブメモリ（Cookie）がページ間で機能しない

js_cookieモジュールがインストールされ有効になっていることを確認してください。JavaScriptが正しく読み込まれており、ブラウザコンソールにJSエラーが表示されていないことを確認してください。Cookieはマシン名に基づいて各QuickTabsインスタンスごとに設定されます。

「空のタブを非表示」が有効なのに空のタブが表示される

「空のタブを非表示」オプションは、コンテンツが動的に読み込まれるため、Ajaxモードでは機能しません。Ajaxで空のタブを非表示にするには、レンダリング前にサーバー側でコンテンツをチェックするか、Ajaxモードを無効にしてください。

Viewsの引数がタブコンテンツで正しく渡されない

引数フィールドでURLパスセグメントを参照するには、%0、%1、%2などの形式を使用してください。%0はドメインの後の最初のセグメントです。URL構造が引数プレースホルダーと一致していることを確認してください。

AccordionまたはjQuery UI Tabsが正しくレンダリングされない

対応するサブモジュール（quicktabs_accordionまたはquicktabs_jqueryui）が有効になっていること、および必要な依存モジュール（jquery_ui_accordionまたはjquery_ui_tabs）もインストールされ有効になっていることを確認してください。

Security Notes 3
  • Ajaxモードのセキュリティ警告：Ajaxが有効な場合、タブコンテンツはブロックレベルのアクセス制限に関係なく、「access content」権限を持つ任意のユーザーがメニューコールバック（/quicktabs/ajax/...）経由でアクセスできます。機密情報を含むブロックにはAjaxモードを使用しないでください。
  • Ajax経由で読み込まれるノードコンテンツは標準のnode_accessチェックを使用しますが、Panelsなどのモジュールからのフィールドレベルの制限は適用されない場合があります。コンテンツタイプの表示設定レベルでフィールドの表示を設定してください。
  • モジュールは許可されたHTMLタグのホワイトリストでXss::filter()を使用してタブタイトルをサニタイズし、XSS攻撃を防止します。