• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• 履歴 を表示
• 自作プラグイン/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("2021-08-04T01:56:13+09:00;2020-10-18T13:05:41+09:00","default:kanateko","kanateko")
#tag(プラグイン,自作,追加)
#contentsx
*タブ切り替え表示プラグイン [#x4043488]

#tab(画像,文章,テーブル){{{
#ref(ゲーム一覧/BL3_logo.png)
#split
CENTER:ようこそGAMERS WIKIへ
#split
#style(class=flex){{
|~テーブル|~も|~可能|h
|で|す|。|
}}
}}}

#infobox(plugin){{
name=tab
ver=1.2
pukiwiki=1.5.2
update=2020-10-16
}}


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

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

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

|~日付|~バージョン|~備考|h
|2020-10-16|1.2|タブの個数を無制限に変更、その他全体的に手直しをして公開|
|2019-06-30|0.6|タブの個数が最大で3つのプロトタイプを作成|

*インストール [#ma9d057e]
+ダウンロードした「tab.inc.php」をpluginフォルダに入れる。
+skin/pukiwiki.cssに以下の記述を追加。
#prism(css){{
/*tab.inc.php*/
.tab_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 15px 5px;
}
.tab_label {
    color: inherit;
    font-weight: bold;
    text-align: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(0,0,0,.3);
    border-bottom-color: rgba(255,255,255,.3);
    border-radius: 4px 4px 0 0;
    padding: 10px 3px;
    order: -1;
    flex: 1;
}
.tab_content {
    width: 100%;
    margin-top: 10px;
    display: none;
}
.tab_switch:checked+.tab_label {
    background: rgba(255,255,255,.25);
    border: 1px solid rgba(255,255,255,.3);
    border-bottom: none;
}
.tab_switch:checked+.tab_label+.tab_content {
    display: block;
}
.tab_switch {
    display: none;
}
}}
+必要に応じてデザインを調整。デフォルトの状態だと[[暗い背景のページ>https://jpngamerswiki.com/Borderlands3/?a1e93f7636#skilltree]]で使用することを前提にしているため、明るい背景のページで使うと見にくいと思われる。
**使用方法 [#gf4f575f]
 #tab(1個目のタブの表示名,2個目のタブの表示名,3個目のタブの表示名,...){{
 1個目のタブに表示する内容
 #split
 2個目のタブに表示する内容
 #split
 3個目のタブに表示する内容
 #split
 ︙
 }}

*使用例 [#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=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)
}}

*追加したい機能 [#rc557fc6]
-スタイル変更機能



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