Quick Tabsモジュールの紹介

こんにちは！プログラマーの山中です！

最近朝が少し寒くて、もうすぐ秋がやってくることを肌で感じますね！

田舎の初秋といえば黄金色に輝く稲田を思い浮かべる人も多いかと思います。 通常9月頭が稲の刈り取りシーズンだと思うのですが、滋賀のお米ブランドのみずかがみは成長が早くってもう刈り取りの時期が来ています。 我が家の田んぼのみずかがみも既に1反刈り取られてました。 おいしいお米なのでどこかでみかけたら是非、食べてみてください(=´▽`=)ﾉ

さて、今回のブログではQuick tabモジュールを紹介します！

Quick Tabsの概要

Quick Tabs(quicktabs)はDrupalのコンテンツを通常のjQueryのタブやらjquery UI のタブ・アコーディオンやらを使ってブロックで表示させることができるモジュールです。 面倒なJavascriptのコードを書く必要がなく、管理画面上でパパっとタブメニュー付きのコンテンツブロックを作成することができます。

Chaos tool suiteモジュールが必須となってます。 ついでにViewsモジュールもインストールされていると使い道が広がりますよー！

Quick Tabsを作成する

モジュールのインストール方法はこちらをご覧ください。

モジュールをインストールしたら、 ホーム » 管理 » サイト構築 » クイックタブ(パス：admin/structure/quicktabs)　とアクセスしてください。 このページの「Add Quicktabs Instance」から作成することができます。

作成時には以下の情報を入力します。

• タイトル
• システム内部名称
• Renderer (表示する種類？)
  • accordion (jQuery UIのアコーディオン)
  • quicktabs (jQueryのタブ)
  • ui_tabs (jQuery UIのタブ)
• タブコンテンツ
  • ブロック
  • ノード
    • ノードIDで指定する必要があります。
  • 他のquick tabs
  • コールバック(サイト内のページのパスを指定)
    • 例えばユーザー登録ページや他のモジュールから出力されているページなどを表示することができます

また、Rendererの種類によっていろいろ指定できる項目がありますがこのオプションは設定してもそのまんまでも問題はありません。この辺りは実際にさわって確かめてみてくださいー！

ViewsモジュールをインストールしていたらViewコンテンツも表示することができます。 arguments(引数)も指定できるようなので、例えばViewsでargumentsを使ったカテゴリ別の記事を表示させるビューを作成していた場合などに役立ちますね！ ...文字だけだと何言ってるのかちょっとわからないのでViewsでカテゴリ別記事一覧についてはまた今度ブログ記事にします。

Quick Tabsを設置する

自分好みのタブが作成できたら ホーム » 管理 » サイト構築 » ブロック(パス：admin/structure/block)　とアクセスしてください。 無効の項目より下に先ほど設定したタイトルでブロックが作成できているかと思います。 このブロックを好きなリージョンまで持っていき、保存して、実際のページを見に行きましょう！

※画像ではbartikテーマのコンテンツリージョンに配置しています。

どうでしょうか？簡単にタブメニュー付きのコンテンツが作成できましたね！

おまけ：Quicktabs Stylesモジュールについて

Quick tabsと一緒に入ってるモジュール、Quicktabs Styles(quicktabs_tabstyles)をインストールすると ただのjQueryのタブ(作成時のRenderer選択肢の一つのquicktabs)にオプションでスタイルをつけることができます！

スタイルは以下のスタイルから選べます(*'v')/