自作プラグイン/tab

カテゴリ：プラグイン 自作 追加

タブ切り替え表示プラグイン

指定した領域をタブで表示切り替えできるようにするプラグイン。

• このプラグインでできること
  • ページを任意の範囲で分割してタブ化
  • タブのラベルは自由に設定可能
  • 分割用のキーワードを変更可能 (デフォルト: #split or #-)

ダウンロード

最新: GitHub

※現在の配布バージョンは1.3.0

セットアップ

1. ダウンロードした「tab.inc.php」をpluginフォルダに入れる。
2. skin/pukiwiki.cssに以下の記述を追加。

   .plugin-tab {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     margin: 15px 5px;
   }
   
   .tab-label {
     font-weight: bold;
     min-width: 100px;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(98, 98, 98, 0.3);
     border-bottom-color: rgba(98, 98, 98, 1);
     border-radius: 4px 4px 0 0;
     padding: 10px 5px;
     margin-bottom: 10px;
     order: -1;
     flex: 1;
     text-align: center;
   }
   
   .tab-content {
     width: 100%;
     display: none;
   }
   
   .tab-switch {
     display: none;
   }
   .tab-switch:checked + .tab-label {
     background: transparent;
     border: 1px solid rgba(98, 98, 98, 1);
     border-bottom: none;
   }
   .tab-switch:checked + .tab-label + .tab-content {
     display: block;
   }
   

使用方法

#tab{{
#:1個目のタブの表示名
1個目のタブに表示する内容
#:2個目のタブの表示名
2個目のタブに表示する内容
#:3個目のタブの表示名
3個目のタブに表示する内容
︙
}}

もしくは

#tab(1個目のタブの表示名,2個目のタブの表示名,3個目のタブの表示名,...){{
1個目のタブに表示する内容
#-
2個目のタブに表示する内容
#-
3個目のタブに表示する内容
#-
︙
}}

使用例

includexプラグインと組み合わせ (新書式)
#tab{{
#:expand.inc.php
#includex(自作プラグイン/expand,section=(num=1),num=12:,permalink=>>expand.inc.php)
#:slideshow.inc.php
#includex(自作プラグイン/slideshow,section=(num=1),num=9:,permalink=>>slideshow.inc.php)
#:twitter.inc.php
#includex(自作プラグイン/twitter,section=(num=1),num=8:,permalink=>>twitter.inc.php)
#:youtube.inc.php
#includex(自作プラグイン/youtube,section=(num=1),num=8:,permalink=>>youtube.inc.php)
}}

旧書式を使用した場合

#tab(expand.inc.php,slideshow.inc.php,twitter.inc.php,youtube.inc.php){{
#includex(自作プラグイン/expand,section=(num=1),num=2:,permalink=>>expand.inc.php)
#-
#includex(自作プラグイン/slideshow,section=(num=1),num=2:,permalink=>>slideshow.inc.php)
#-
#includex(自作プラグイン/twitter,section=(num=1),num=2:,permalink=>>twitter.inc.php)
#-
#includex(自作プラグイン/youtube,section=(num=1),num=2:,permalink=>>youtube.inc.php)
}}

追加したい機能

• 特になし

備考

• 新書式はラベルとコンテンツの関連性がよりわかりやすくなることを期待して追加した。
• v2.0.0は動作にPHP8以降が必要なため、配布は一旦保留。

コメント