• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• 履歴 を表示
• 自作プラグイン/tab へ行く。
  • 1 (2019-06-30 (日) 18:03:29)
  • 2 (2019-06-30 (日) 18:03:29)
  • 3 (2020-10-16 (金) 07:14:23)
  • 4 (2020-10-18 (日) 13:05:41)
  • 5 (2020-10-18 (日) 13:05:41)
  • 6 (2020-10-18 (日) 13:05:41)
  • 7 (2020-10-18 (日) 13:05:41)
  • 8 (2020-10-18 (日) 13:05:41)
  • 9 (2020-10-18 (日) 13:05:41)
  • 10 (2020-10-18 (日) 13:05:41)
  • 11 (2020-10-18 (日) 13:05:41)
  • 12 (2020-10-18 (日) 13:05:41)
  • 13 (2022-02-08 (火) 10:23:56)
  • 14 (2022-02-08 (火) 10:23:56)
  • 15 (2022-02-08 (火) 10:23:56)
  • 16 (2022-02-08 (火) 10:23:56)
  • 17 (2023-07-20 (木) 15:51:46)

#author("2022-05-20T05:52:33+09:00;2022-02-08T10:23:56+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
}}

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

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

*ダウンロード[#nc904a0b]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

|~日付|~バージョン|~備考|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つのプロトタイプを作成)|

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

もしくは

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

*使用例 [#me8eb03d]
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,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]
-代替書式はラベルとコンテンツの関連性がよりわかりやすくなることを期待して追加した。


*コメント [#n8472dd2]
#pcomment(,10,above,reply)