- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2022-07-06T04:29:04+09:00;2022-02-08T10:23:56+09:00","default:kanateko","kanateko")
#author("2023-07-20T15:51:45+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);
CENTER:#ref(tab.jpg,center,wrap,400x0)
#contentsx
*タブ切り替え表示プラグイン [#x4043488]
#infobox(plugin){{
name=tab
ver=1.3
pukiwiki=1.5.3
update=2022-02-08
ver=2.0.0
pukiwiki=1.5.4
update=2023-07-20
}}
指定した領域をタブで表示切り替えできるようにするプラグイン。
-このプラグインでできること
--ページを任意の範囲で分割してタブ化
--タブのラベルは自由に設定可能
--分割用のキーワードを変更可能 (デフォルト: #split)
--分割用のキーワードを変更可能 (デフォルト: #split or #-)
#clear
*ダウンロード[#nc904a0b]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]
※現在の配布バージョンは1.3.0
|~日付|~バージョン|~備考|h
|2022-02-08|1.3|#ul(別タイプの書式を追加)|
|~|1.2|#ul(コードを整理,ラベルの数が足りない場合のエラーを追加)|
|2020-10-16|1.1|#ul(タブの最大数を3つ -> 無制限に変更)|
|~|1.0|#ul(全体的に手直しをして公開)|
|2019-06-30|0.1|#ul(タブの個数が最大で3つのプロトタイプを作成)|
|2023-07-20|2.0.0|#ul(コードを全体的に修正,class指定オプションの追加,マルチラインプラグインの入れ子に対応)|
|2022-02-08|1.3.0|#ul(別タイプの書式を追加)|
|~|1.2.0|#ul(コードを整理,ラベルの数が足りない場合のエラーを追加)|
|2020-10-16|1.1.0|#ul(タブの最大数を3つ -> 無制限に変更)|
|~|1.0.0|#ul(全体的に手直しをして公開)|
|2019-06-30|0.1.0|#ul(タブの個数が最大で3つのプロトタイプを作成)|
*セットアップ [#ma9d057e]
+ダウンロードした「tab.inc.php」をpluginフォルダに入れる。
+skin/pukiwiki.cssに以下の記述を追加。
#prism(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;
}
}}
**使用方法 [#gf4f575f]
#tab(1個目のタブの表示名,2個目のタブの表示名,3個目のタブの表示名,...){{
#tab{{
#:1個目のタブの表示名
1個目のタブに表示する内容
#split
#:2個目のタブの表示名
2個目のタブに表示する内容
#split
#:3個目のタブの表示名
3個目のタブに表示する内容
#split
︙
}}
もしくは
#tab{{
#:1個目のタブの表示名
#tab(1個目のタブの表示名,2個目のタブの表示名,3個目のタブの表示名,...){{
1個目のタブに表示する内容
#:2個目のタブの表示名
#-
2個目のタブに表示する内容
#:3個目のタブの表示名
#-
3個目のタブに表示する内容
#-
︙
}}
*使用例 [#me8eb03d]
includexプラグインと組み合わせ
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)
}}
**旧書式を使用した場合 [#seb52406]
#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,slideshow.inc.php,twitter.inc.php,youtube.inc.php){{
#includex(自作プラグイン/expand,section=(num=1),num=12:,permalink=>>expand.inc.php)
#split
#includex(自作プラグイン/slideshow,section=(num=1),num=9:,permalink=>>slideshow.inc.php)
#split
#includex(自作プラグイン/twitter,section=(num=1),num=8:,permalink=>>twitter.inc.php)
#split
#includex(自作プラグイン/youtube,section=(num=1),num=8:,permalink=>>youtube.inc.php)
}}
**代替書式を使用した場合 [#seb52406]
#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)
}}
*追加したい機能 [#rc557fc6]
-特になし
*備考 [#u664f1f3]
-代替書式はラベルとコンテンツの関連性がよりわかりやすくなることを期待して追加した。
-新書式はラベルとコンテンツの関連性がよりわかりやすくなることを期待して追加した。
-v2.0.0は動作にPHP8以降が必要なため、配布は一旦保留。
*コメント [#n8472dd2]
#pcomment(reply)