開始行: &tag(プラグイン,自作,追加); CENTER:#ref(tab.jpg,center,wrap,400x0) #contentsx *タブ切り替え表示プラグイン [#x4043488] #infobox(plugin){{ name=tab ver=2.0.1 pukiwiki=1.5.4 update=2023-07-21 }} 指定した領域をタブで表示切り替えできるようにするプラグイ... -このプラグインでできること --ページを任意の範囲で分割してタブ化 --タブのラベルは自由に設定可能 --分割用のキーワードを変更可能 (デフォルト: #split or #-) #clear *ダウンロード[#nc904a0b] 最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugi... ※現在の配布バージョンは1.3.0 |~日付|~バージョン|~備考|h |2023-07-21|2.0.1|#ul(入れ子のプラグインを探す際の正規表... |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個目のタブの表示名 1個目のタブに表示する内容 #:2個目のタブの表示名 2個目のタブに表示する内容 #:3個目のタブの表示名 3個目のタブに表示する内容 ︙ }} もしくは #tab(1個目のタブの表示名,2個目のタブの表示名,3個目のタブ... 1個目のタブに表示する内容 #- 2個目のタブに表示する内容 #- 3個目のタブに表示する内容 #- ︙ }} *使用例 [#me8eb03d] #tab{{{ #:表示 includexプラグインと組み合わせ (新書式) #tab{{ #:expand.inc.php #includex(自作プラグイン/expand,section=(num=1),num=12:,p... #:slideshow.inc.php #includex(自作プラグイン/slideshow,section=(num=1),num=9:... #:twitter.inc.php #includex(自作プラグイン/twitter,section=(num=1),num=8:,p... #:youtube.inc.php #includex(自作プラグイン/youtube,section=(num=1),num=8:,p... }} #:ソース includexプラグインと組み合わせ (新書式) #tab{{ #:expand.inc.php #includex(自作プラグイン/expand,section=(num=1),num=12:,... #:slideshow.inc.php #includex(自作プラグイン/slideshow,section=(num=1),num=9... #:twitter.inc.php #includex(自作プラグイン/twitter,section=(num=1),num=8:,... #:youtube.inc.php #includex(自作プラグイン/youtube,section=(num=1),num=8:,... }} }}} **旧書式を使用した場合 [#seb52406] #tab(expand.inc.php,slideshow.inc.php,twitter.inc.php,yo... #includex(自作プラグイン/expand,section=(num=1),num=2:,p... #- #includex(自作プラグイン/slideshow,section=(num=1),num=2... #- #includex(自作プラグイン/twitter,section=(num=1),num=2:,... #- #includex(自作プラグイン/youtube,section=(num=1),num=2:,... }} *追加したい機能 [#rc557fc6] -特になし *備考 [#u664f1f3] -新書式はラベルとコンテンツの関連性がよりわかりやすくなる... -v2.0.0は動作にPHP8以降が必要なため、配布は一旦保留。 *コメント [#n8472dd2] #pcomment(reply) 終了行: &tag(プラグイン,自作,追加); CENTER:#ref(tab.jpg,center,wrap,400x0) #contentsx *タブ切り替え表示プラグイン [#x4043488] #infobox(plugin){{ name=tab ver=2.0.1 pukiwiki=1.5.4 update=2023-07-21 }} 指定した領域をタブで表示切り替えできるようにするプラグイ... -このプラグインでできること --ページを任意の範囲で分割してタブ化 --タブのラベルは自由に設定可能 --分割用のキーワードを変更可能 (デフォルト: #split or #-) #clear *ダウンロード[#nc904a0b] 最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugi... ※現在の配布バージョンは1.3.0 |~日付|~バージョン|~備考|h |2023-07-21|2.0.1|#ul(入れ子のプラグインを探す際の正規表... |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個目のタブの表示名 1個目のタブに表示する内容 #:2個目のタブの表示名 2個目のタブに表示する内容 #:3個目のタブの表示名 3個目のタブに表示する内容 ︙ }} もしくは #tab(1個目のタブの表示名,2個目のタブの表示名,3個目のタブ... 1個目のタブに表示する内容 #- 2個目のタブに表示する内容 #- 3個目のタブに表示する内容 #- ︙ }} *使用例 [#me8eb03d] #tab{{{ #:表示 includexプラグインと組み合わせ (新書式) #tab{{ #:expand.inc.php #includex(自作プラグイン/expand,section=(num=1),num=12:,p... #:slideshow.inc.php #includex(自作プラグイン/slideshow,section=(num=1),num=9:... #:twitter.inc.php #includex(自作プラグイン/twitter,section=(num=1),num=8:,p... #:youtube.inc.php #includex(自作プラグイン/youtube,section=(num=1),num=8:,p... }} #:ソース includexプラグインと組み合わせ (新書式) #tab{{ #:expand.inc.php #includex(自作プラグイン/expand,section=(num=1),num=12:,... #:slideshow.inc.php #includex(自作プラグイン/slideshow,section=(num=1),num=9... #:twitter.inc.php #includex(自作プラグイン/twitter,section=(num=1),num=8:,... #:youtube.inc.php #includex(自作プラグイン/youtube,section=(num=1),num=8:,... }} }}} **旧書式を使用した場合 [#seb52406] #tab(expand.inc.php,slideshow.inc.php,twitter.inc.php,yo... #includex(自作プラグイン/expand,section=(num=1),num=2:,p... #- #includex(自作プラグイン/slideshow,section=(num=1),num=2... #- #includex(自作プラグイン/twitter,section=(num=1),num=2:,... #- #includex(自作プラグイン/youtube,section=(num=1),num=2:,... }} *追加したい機能 [#rc557fc6] -特になし *備考 [#u664f1f3] -新書式はラベルとコンテンツの関連性がよりわかりやすくなる... -v2.0.0は動作にPHP8以降が必要なため、配布は一旦保留。 *コメント [#n8472dd2] #pcomment(reply) ページ名: