自作プラグイン/tab

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

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

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

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

ダウンロード

最新: GitHub

セットアップ

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個目のタブの表示名,2個目のタブの表示名,3個目のタブの表示名,...){{
1個目のタブに表示する内容
#split
2個目のタブに表示する内容
#split
3個目のタブに表示する内容
#split
︙
}}

もしくは

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

使用例

includexプラグインと組み合わせ

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

代替書式を使用した場合

#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)
}}

追加したい機能

• 特になし

備考

• 代替書式はラベルとコンテンツの関連性がよりわかりやすくなることを期待して追加した。

コメント