自作プラグイン/tab

2020-10-18 (日) 13:05:41

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

BL3_logo.png
ようこそGAMERS WIKIへ
テーブル可能
tab.inc.php
製作者kanateko
ライセンスGPLv3
バージョン1,2
動作確認PukiWiki 1.5.2 ~
最終更新2020-10-16

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

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

ダウンロード

最新: GitHub

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

インストール

  1. ダウンロードした「tab.inc.php」をpluginフォルダに入れる。
  2. skin/pukiwiki.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;
    }
    
  3. 必要に応じてデザインを調整。デフォルトの状態だと暗い背景のページで使用することを前提にしているため、明るい背景のページで使うと見にくいと思われる。

使用方法

#tab(1個目のタブの表示名,2個目のタブの表示名,3個目のタブの表示名,...){{
1個目のタブに表示する内容
#split
2個目のタブに表示する内容
#split
3個目のタブに表示する内容
#split
︙
}}

使用例

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)
}}
プラグインの詳細を表示

こんな感じで指定した領域を折りたたみ表示するプラグインです。

expand.inc.php
製作者kanateko
ライセンスGPLv3
動作確認PukiWiki 1.5.2 ~
最終更新2020-02-10

<details>及び<summary>タグを使用して、任意の範囲を折りたたんで表示できるプラグイン。
regionプラグインの代替として作成。
なおIEとEdgeではdetailsが未対応なので折りたたまれない。

  • このプラグインでできること
    • 見出し (summary) の指定
    • 見出しの色変更
    • 見出しのサイズ変更
    • 展開した状態で表示

より高機能な新しい折りたたみプラグインを作成しました。

自作プラグイン/ac
自作プラグイン/ac

マルチライン部分を折りたたみ、指定した見出し部分をクリックorタップすることで展開するプラグイン。プラグイン名は "accordion" から。 折りたたみプラグインといえば昔からよく使われるregionプラグインがあるが、これは開閉用の小さなボタンをピンポイントで押さないと動作しないため、より使いやすいものを新たに作成した。 以前にも同じ理由で似たよう

2021-07-26
2021-07-26 (月) 22:31:14
slideshow.inc.php
製作者kanateko
ライセンスGPLv3
動作確認PukiWiki 1.5.2 ~
最終更新2020-03-10

slickを利用した画像スライドショープラグイン
添付した画像を指定してスライドショーに追加できる

slickの設定やcssを弄ることで様々なデザインのスライドショーを表示可能
現在のプラグインの設定は最もシンプルなものにしてある

  • このプラグインでできること
    • 添付画像の表示
    • 自動再生のON/OFF
    • スライド表示時間の変更
twitter.inc.php
製作者kanateko
ライセンスGPLv3
動作確認PukiWiki 1.5.2 ~
最終更新2020-03-10

Twitterのタイムラインや特定のツイートを埋め込んで表示するプラグイン。
プラグインを探していた当時、使えるプラグインが残っていなかったため自作。

  • このプラグインでできること
    • 指定ユーザーのタイムラインを表示
    • 特定のツイートを表示
    • テーマの変更 (明/暗)
    • 幅と高さの変更
    • 会話形式の非表示
slideshow.inc.php
製作者kanateko
ライセンスGPLv3
バージョン1.4
動作確認PukiWiki 1.5.2 ~
最終更新2021-07-07

既存のプラグイン(pukiwiki:自作プラグイン/youtube.inc.php)だと機能が少なかったため、勉強も兼ねて一から新しく作ったもの。
iframeを使用するので要PukiWiki 1.5.2以上。
オプションで様々なパラメータを指定することができ、複数タイプの動画リストにも対応している。

  • このプラグインでできること
    • YouTube動画の埋め込み (iframe)
    • 再生リストの埋め込み (自動判別)
    • 指定ユーザーの動画リスト埋め込み
    • 指定キーワードの動画リスト埋め込み
    • 動画サイズの指定 (何通りか指定方法あり)
    • 自動再生のON/OFF
    • ループ再生のON/OFF
    • 再生開始位置の指定
    • 再生終了位置の指定
    • 再生リストの開始位置の指定

追加したい機能

  • スタイル変更機能

コメント

コメントはありません。 コメント/自作プラグイン/tab